位置: IT常识 - 正文

uniapp详细介绍(uniapp简介)

编辑:rootadmin
uniapp详细介绍 一,什么是uni-appuni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台

推荐整理分享uniapp详细介绍(uniapp简介),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp总结,uniapp从入门到进阶,uniapp从入门到进阶,uniapp有什么用,uniapp总结,uniapp入门到实战,uniapp入门到实战,uniapp简介,内容如对您有帮助,希望把文章链接给更多的朋友!

其实uni-app是微信小程序与vue的结合体,语法基本保持是保持一致,唯一不同的是uni-app中没有div和span标签,如果你已经掌握了vue与微信小程序中的任意一个,恭喜你,你就可以做uni-app开发了

二,开发工具Hbuilderx微信开发者工具安卓模拟器(雷电,mumu)三,新建一个项目1,新建项目点击HbuilderX菜单栏文件>项目>新建选择uni-app,填写项目名称,项目创建的目录2,Hbuilde界面

3,文件的介绍4,文件目录pages.json :文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json :文件是应用的配置文件,用于指定应用的名称、图标、权限等。App.vue:是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js:是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。uni.scss:文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。unpackage:就是打包目录,在这里有各个平台的打包文件pages:所有的页面存放目录static:静态资源目录,例如图片等components:组件存放目录四,运行项目1,H5端

2,小程序端打开开发工具的服务端口 在Hbuilderx工具中配置微信开发者工具的地址uniapp详细介绍(uniapp简介)

配置微信小程序id 运行到微信小程序 3,模拟器端(mumu)首先要打开我们的模拟器,保证他处于开启状态 配置模拟器的端口号

夜神模拟器端口号:62001 海马模拟器端口号:26944 逍遥模拟器端口号:21503 MuMu模拟器端口号:7555 天天模拟器端口号:6555

运行到模拟器 五,uni-app的相关语法

其实uni-app是微信小程序与vue的结合体,语法基本保持是保持一致,唯一不同的是uni-app中没有div和span标签,如果你已经掌握了vue与微信小程序中的任意一个,恭喜你,你就可以做uni-app开发了

1,文本渲染<view class="">{{title}}</view><view class="" v-text="title"></view><view class="" v-html="str"></view> export default {data() {const currentDate = this.getDate({format: true})return {title: '明天就要静默了',str: "<strong>明天周五放假</strong>",}},2,条件渲染<view class="" v-if="score>=90">奖励一套房</view><view class="" v-else-if="score>=90">奖励一个媳妇</view><view class="" v-else-if="score>=80">奖励一辆车</view><view class="" v-else>啥也别想了</view> export default { data() {const currentDate = this.getDate({format: true})return {score: 82,}}3,列表渲染 //遍历数组 <view class="" v-for="(item,index) in list" :key="index">{{item}}</view>//遍历对象<view v-for="(value,key) in obj" v-bind:key="key">{{value}}</view>//遍历数字<view v-for="item in 5" :key="item">{{item}}</view> export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},num: 5,list: ['vue', '小程序', 'uni', 'jquery'],}},4,数据的双向绑定<view class="title">数据双向绑定</view><button @click="num++">{{num}}</button><input type="text" v-model="num" class="ipt"> export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},num: 5,}},5,属性绑定<button type="primary" v-bind:disabled="flag" @click="flag=!flag">按钮</button><button type="warn" v-bind:disabled="!flag" @click="flag=!flag">按钮</button>export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},title: 'Hello',num: 5,title: '明天就要静默了',str: "<strong>明天周五放假</strong>",score: 82,flag: true,list: ['vue', '小程序', 'uni', 'jquery'],date: currentDate,time: '12:01'}},六,uni-app的生命周期1,vue生命周期beforeCreate:创建前,没有thiscreated:创建后;此时已经有了this,我们可以做的是发起ajax请求,监听事件,设置定时器beforeMounte:挂在前,此时只有虚拟dommounted:挂载后;此时我们可以操作dombeforeUpdate:更新前updated:更新后beforeDestroy:销毁前;可以做的是移除监听事件,移除定时器2,小程序生命周期onLoad:加载类似于vue中的created生命周期onShow:页面显示时执行onReady:准备onHide:后台运行时执行onUnload:卸载七,路由1,导航路由:navigator

opentype打开类型: navigate跳转 redirect重定向(当前页面不留历史记录) navigateBack返回 relauch 重启 switchTab 跳转底部栏

2,路由传参路由参数是在拼接在url?之后的那一块<navigator url="pages/index/index?name=mumu&age=18"></navigator>在跳转后的页面接收参数onLoad(option){ console.log(options) //{name:'mumu',age:'18'}}3,路由常用api//跳转uni.navigateTo({url})//重定向uni.redirectTo({url})//返回uni.navigateBack()//切换底部栏uni.switchTab()//重启uni.reLaunch()八,条件编译1,什么是条件编译?

不同的平台展示不同特性与功能 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

2,语法

APP —— App端 H5 —— 网页 MP —— 小程序 MP-WEIXIN —— 微信小程序

//#ifdef 平台专有//#endif

3,css条件编译/* #ifdef APP */ .active{color:red}/* #endif */4,js条件编译// #ifdef APP-PLUSuni.showModal({title:"你好App用户"})// #endif5,条件编译pages.json“style”:{ "h5":{ "titleNView":{ "titleText":"我是H5" } }, "app-plus": { "titleNView":false //隐藏导航栏 }}// #ifdef MP-WEIXIN|| APP{"path":"pages/condition/we","style":{"navigationBarTitleText": "小程序专有页面"}},// #endif
本文链接地址:https://www.jiuchutong.com/zhishi/299674.html 转载请保留说明!

上一篇:javascript获取url信息的常见方法(javascript获取字符串长度)

下一篇:后端中dto、vo、entity的区别(后端中spef文件和spf文件)

  • 新媒体传播策略有哪些呢?(新媒体传播策略分析角度)

    新媒体传播策略有哪些呢?(新媒体传播策略分析角度)

  • 15.4口罩解锁怎么设置(s5戴口罩解锁)

    15.4口罩解锁怎么设置(s5戴口罩解锁)

  • wps自动保存时间设置在哪里(怎么设置wps自动保存时间)

    wps自动保存时间设置在哪里(怎么设置wps自动保存时间)

  • 苹果手机资料库怎么添加音乐(苹果手机资料库视频怎么导入相册)

    苹果手机资料库怎么添加音乐(苹果手机资料库视频怎么导入相册)

  • 微信语音通话有辐射吗(微信语音通话有录音备份吗)

    微信语音通话有辐射吗(微信语音通话有录音备份吗)

  • vivo旗舰机一共几款(vivo旗舰机有哪些系列2021)

    vivo旗舰机一共几款(vivo旗舰机有哪些系列2021)

  • 微信注销后聊天记录还在吗(微信重新登录后聊天记录没了)

    微信注销后聊天记录还在吗(微信重新登录后聊天记录没了)

  • 关联qq切换账号对方会下线吗(切换关联qq登录会被知道嘛)

    关联qq切换账号对方会下线吗(切换关联qq登录会被知道嘛)

  • 华为nova6怎么设置黑名单(华为nova6怎么设置视频锁屏)

    华为nova6怎么设置黑名单(华为nova6怎么设置视频锁屏)

  • 手机保存图片显示成功了为什么相册里没有(手机保存图片显示无权限怎么办)

    手机保存图片显示成功了为什么相册里没有(手机保存图片显示无权限怎么办)

  • z5i与z5x区别 (z5i和z5x哪个好)

    z5i与z5x区别 (z5i和z5x哪个好)

  • 后面四个摄像头的手机是哪一款(后面四个摄像头正方形的手机是哪一款)

    后面四个摄像头的手机是哪一款(后面四个摄像头正方形的手机是哪一款)

  • 封机器码换主板还是cpu(封机器码换主板也不管用)

    封机器码换主板还是cpu(封机器码换主板也不管用)

  • 光猫灯怎么闪才是正常的(光猫灯闪烁怎么回事)

    光猫灯怎么闪才是正常的(光猫灯闪烁怎么回事)

  • 文件不支持本地查看怎么办(文件不支持本地查看,请用其他应用打开)

    文件不支持本地查看怎么办(文件不支持本地查看,请用其他应用打开)

  • 苹果双摄像头有哪几款(苹果双摄像头手机有哪几款图片)

    苹果双摄像头有哪几款(苹果双摄像头手机有哪几款图片)

  • rm文件用什么播放器打开(rm 文件)

    rm文件用什么播放器打开(rm 文件)

  • 为什么华为p30拍照那么模糊(为什么华为p30拍视频时总是喜欢横屏)

    为什么华为p30拍照那么模糊(为什么华为p30拍视频时总是喜欢横屏)

  • 微软型号1796是几代(微软型号1514)

    微软型号1796是几代(微软型号1514)

  • 华为手机勿扰模式怎么关(华为手机勿扰模式怎么设置时间)

    华为手机勿扰模式怎么关(华为手机勿扰模式怎么设置时间)

  • r11充电器是多少w的(r11splus充电器参数)

    r11充电器是多少w的(r11splus充电器参数)

  • qq好友删除后再加回来还有火花吗(qq好友删除后再加回来还有幸运字符吗)

    qq好友删除后再加回来还有火花吗(qq好友删除后再加回来还有幸运字符吗)

  • 电脑的aero开启教程(电脑启用aero)

    电脑的aero开启教程(电脑启用aero)

  • 禁用 WordPress 更新检测和自动更新功能(wordpress限制ip访问)

    禁用 WordPress 更新检测和自动更新功能(wordpress限制ip访问)

  • 织梦DedeCMS提示“无法获得主键,因此无法进行后续操作”的原因和解决办法(织梦cms要钱吗)

    织梦DedeCMS提示“无法获得主键,因此无法进行后续操作”的原因和解决办法(织梦cms要钱吗)

  • 电子税务局税种认定怎么操作
  • 餐饮服务属于什么票据类型
  • 企业股利分配政策有哪些
  • 应收票据和应收账款的区别举例
  • 企业所得税弥补亏损年限
  • 名义股东转让股份侵权
  • 补助属不属于工资
  • 收到国债本金和利息会计分录
  • 投资性房地产的定义
  • 公司网站费用计入什么科目
  • 发票查验平台查询官网手机版App
  • 服务费的发票
  • 收据换发票的会计分录
  • 转出以前年度成本怎么做账
  • 微软输入法突然变成繁体字怎么改回来
  • 工商年报财务数据怎么填
  • 打开文件夹变成黑底
  • 软件开发过程rup
  • 商贸公司商品品种规格多如何核算
  • php获取文件列表并输出
  • 清理系统所有垃圾
  • 只交社保不发工资可以吗
  • 电脑开机显示怎么取消?
  • 宏基笔记本一键恢复系统
  • 实收资本可以大于注册资本嘛
  • autorun.exe无法运行
  • php读取word
  • uniapp自定义组件模式
  • 小额贷款企业收利息吗
  • 计算完工产品成本和在产品成本的方法有哪些
  • st的电机库性能怎么样呢
  • webpack性能优化 加载
  • jdbc连接mysql的url怎么写
  • 微信小程序怎么制作自己的小程序
  • php制作验证码
  • 研发支出的相关理论基础有哪些
  • 子公司吸收合并母公司 特殊性税务处理
  • 小型微利企业的认定标准2023年
  • css怎么制作
  • mysql好在哪里
  • 经典帝国cms生成器下载
  • 记账凭证的总账科目和明细科目
  • 什么经营范围可以开劳务费
  • 小规模纳税人可以开13的税吗
  • mysql中数据类型主要分为哪四种
  • sqlserver经典书籍
  • 无法收回离职员工合法吗
  • 租赁业发票
  • 应付职工薪酬代扣社保
  • 货款收不回来了怎么做账
  • 网上购物没有发票
  • 以存货抵偿债务
  • 收到损坏物品赔偿金如何入账
  • 员工垫付的费用会计分录
  • 销售产品收到现款120元是什么制
  • sql server建表时怎样选择数据类型
  • SQL2005、SQL2008允许远程连接的配置说明(附配置图)
  • 一条sql语句搞定一个数据
  • linux统计重复次数
  • windows版微信能运行小程序吗
  • windowsxp开机启动项在哪里设置
  • centos怎么配置yum
  • freebsd12安装图形界面
  • win10dll丢失
  • 80端口被system 占用解决方法
  • win8如何进行系统还原
  • 创建表格在哪里找
  • ipc漏洞入侵的基本步骤
  • netmon.exe
  • 全面解析A型天秤座男
  • jquery获取点击元素
  • python爬虫类
  • 网页中实现浏览的快捷键
  • jquery返回顶部代码
  • javascript对象定义
  • 小米电脑安装ubuntu
  • 四川省税务局官方网站申报窗口
  • 陕西省国税务局大企业处长邓谷祥简历
  • 湖南银税进件中心
  • 江苏税务法人实名采集怎么操作流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设