一           ，什么是uni-app

uni-app是一个使用 Vue.js 开发所有前端应用的框架
  
 
  
 
  
 
  
 
  
 
  ，开发者编写一套代码










，可发布到iOS           、Android
  
 
  
 
  
 
  
 
  
 
  、Web（响应式）










、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝） 
  
  
  
  
  
、快应用等多个平台

其实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工具中配置微信开发者工具的地址

配置微信小程序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:创建前

 
 

 
 

 
 

 
 

 
 

 ，没有this created:创建后；此时已经有了this,我们可以做的是发起ajax请求










，监听事件                 ，设置定时器 beforeMounte:挂在前
 
 
 
 
 
 
 
 
 
 
 ，此时只有虚拟dom mounted:挂载后；此时我们可以操作dom beforeUpdate：更新前 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-PLUS uni.showModal({ title:"你好App用户" }) // #endif 5










，条件编译 pages.json “style
  
  
  
  
  
 ”:{ "h5":{ "titleNView":{ "titleText":"我是H5" } }, "app-plus": { "titleNView":false //隐藏导航栏 } } // #ifdef MP-WEIXIN || APP { "path":"pages/condition/we", "style":{ "navigationBarTitleText": "小程序专有页面" } }, // #endif