uni-app

介绍：

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

 

快速上手

初始化项目：

代码块

npm install @vue/cli -g

vue create -p dcloudio/uni-preset-vue my-project

解读：

• 默认模版【不支持TS】

• 默认模版（TypeScript）【支持TS】

• Hello uni-app 【uni-app 组件库】

• 登录模版

• 看图模版

• 新闻／咨询类模版

• 自定义模版

 

工具：

通过 HBuilderX 可视化界面进行开发，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用，如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。（传送门）

可不可以使用vscode?

答： 非App开发是可以的，App发布依然需要通过HBuilderX工具

 

应用生命周期：

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

注意

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• 在应用生命周期函数内进行页面跳转时需要注意，不要和pages.json内配置的首页打开时机冲突。

 

页面生命周期：

uni-app 支持如下页面生命周期函数：【部分函数存在平台差异】

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、百度小程序、H5、5+App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+ App、H5
onBackPress	监听页面返回，详细说明及使用：onBackPress 详解	5+App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	5+App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	5+App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	5+App、H5	1.6.0

onPageScroll 参数说明：

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

onTabItemTap 参数说明：

属性	类型	说明
index	String	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

注意

• onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。

• 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。

• onTabItemTap在App端，从HBuilderX 1.9 的自定义组件编译模式开始支持。

onNavigationBarButtonTap 参数说明：

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

onBackPress 回调参数对象说明：

属性	类型	说明
from	String	触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。

export default { data() { return {}; }, onBackPress(options) { console.log('from:' + options.from) } }

注意

• nvue 页面支持的生命周期参考：nvue 生命周期介绍。

 

路由：

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router。

 

路由跳转：

uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。

 

注意点：

• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

• css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

• HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。