如何高效的阅读uni-app框架？（建议收藏）
作者 | Jeskson 来源 | 达达前端小酒馆
uni-app的框架，配置：page.json，manifest.json，package.json，vue.config.js。脚本，应用程序，main.js。日志打印，定时器，生命周期，页面，页面通讯。
pages.json文件时用来对uni-app进行全局配置的，它是用来写页面文件的路径，窗口样式，底部的tabbar等，类似于小程序中的app.json的页面管理。这里注意的是定位，在小程序中是在app.json的，而在uni-app中式在manifest配置的，这一点是我做地图时注意到的内容。
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
}
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"blurEffect": "none|extralight|light|dark", // 模糊效果，使用模糊效果时不要设置背景颜色，否则模糊效果会失效，默认值为none（仅iOS平台支持 HBuilderX 2.4.3+）
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
}
}globalStyle，设置应用的状态栏，导航条，标题，窗口背景颜色等。
pages，配置页面路径。第一项为应用入口，增加或是减少页面，都在pages数组中进行修改即可。
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": { ... }
}
]
}page页面
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",//设置页面标题文字
"enablePullDownRefresh":true//开启下拉刷新
}
},
...
]
}常见titleNView配置代码示例
{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
}, {
"path": "pages/log/log", //日志页面
"style": {
"app-plus": {
"bounce": "none", //关闭窗口回弹效果
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
}
]
}
}
}
}, {
"path": "pages/detail/detail", //详情页面
"style": {
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"//透明渐变导航栏
}
}
}
}, {
"path": "pages/search/search", //搜索页面
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",//透明渐变导航栏
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px", //输入框圆角
"placeholder": "请输入搜索内容",
"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
}
}
}
}
}
...
]
}app-plus，h5，mp-alipay
{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"titleNView": false , //禁用原生导航栏
"subNVues":[{//侧滑菜单
"id": "drawer", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
"path": "pages/index/drawer.nvue", // nvue 路径
"style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
"position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
"width": "50%"
}
}, {//弹出层
"id": "popup",
"path": "pages/index/popup",
"style": {
"position": "popup",
"margin":"auto",
"width": "150px",
"height": "150px"
}
}, {//自定义头
"id": "nav",
"path": "pages/index/nav",
"style": {
"position": "dock",
"height": "44px"
}
}]
}
}
}]
}h5：
titleNView,导航栏
pullToRefresh,下拉刷新
tabBar，通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应项。
当设置position为top时，将不会显示icon，tabBar中的list时一个数组，最少配置2个，最多配置5个。
tabbar切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待的雪花。当展示过一次tabbar页面的时候，再次切换tabbar页面的时候，就只会触发onShow这个方法，不会触发onLoad了。
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}condition启动模式配置，开发期间有效。属性：current仅仅在当前激活的模式有效，list节点的索引值，list启动模式列表。
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "swiper", //模式名称
"path": "pages/component/swiper/swiper", //启动页面，必选
"query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
},
{
"name": "test",
"path": "pages/component/switch/switch"
}
]
}subPackages分包加载配置，但在5+app中为整包。subPackages节点接收一个数组，每个项都是应用的子包。
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA
│ └─list
│ └─list.vue
├─pagesB
│ └─detail
│ └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json {
"pages": [{
"path": "pages/index/index",
"style": { ...}
}, {
"path": "pages/login/login",
"style": { ...}
}],
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "list/list",
"style": { ...}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": { ...}
}]
}],
"preloadRule": {
"pagesA/list/list": {
"network": "all",
"packages": ["__APP__"]
},
"pagesB/detail/detail": {
"network": "all",
"packages": ["pagesA"]
}
}
}preloadRule分包预载配置，key页面的路径，value是进入页面的预下载配置。
manifest.json文件时应用的配置文件，应用的名称，图标，权限等等。
networkTimeout各类网络请求的超时时间。
package.json文件为uni-app的扩展节点，可以实现自定义的编译平台。
{
/**
package.json其它原有配置
*/
"uni-app": {// 扩展配置
"scripts": {
"custom-platform": { //自定义编译平台配置，可通过cli方式调用
"title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
"BROWSER":"", //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
"env": {//环境变量
"UNI_PLATFORM": "" //基准平台
},
"define": { //自定义条件编译
"CUSTOM-CONST": true //自定义条件编译常量，建议为大写
}
}
}
}
}vue.config.js是一个可选的配置文件
uni.css文件为全局应用的样式风格。使用时需要在style节点上添加lang="scss"。
<style lang="scss">
</style>uni.scss变量：
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;app.vue时我们页面的入口文件。
应用的生命周期：
onLaunch:当uni-app初始化完成时触发，全局只触发一次；onShow:当uni-app启动，或者从后台进入前台显示时触发；onHide:当uni-app从前台进入到后台时触发；onError:当uni-app报错时触发；onUniNViewMessage:对nvue页面发送的数据进行监听。
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>globalData时小程序的机制，在uni-app也是可用。
App.vue配置：
<script>
export default {
globalData: {
text: 'text'
}
}
</script>获取：
getApp().globalData.text = 'test'用getApp对象还没有获取到，可以用
this.$scope.globalData获取globalDatamain.js时入口文件，时初始化vue实例并使用需要的插件。
import Vue from 'vue'
import App from './App'
import pageHead from './components/page-head.vue' //引用page-head组件
Vue.config.productionTip = false
Vue.component('page-head', pageHead) //全局注册page-head组件
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount() //挂载Vue实例打印日志：console向控制台打印日志信息，debug向控制台打印debug日志，log向控制台打印log日志，info，warn，error分别向控制台打印,info,warn,error日志。
setTimeout定时器，到时间后执行，clearTimeout取消setTimeout设置的定时器，setInterval()设置一个定时器，clearInterval()取消由setInterval设置的定时器。
应用的生命周期：
onLaunch 当uni-app 初始化完成时触发，全局只触发一次
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发
onUniNViewMessage 对 nvue 页面发送的数据进行监听
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>页面生命周期
onLoad 监听页面加载
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面滚动到底部的事件
onTabItemTap 点击 tab 时触发，参数为Object
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动
onNavigationBarButtonTap 监听原生标题栏按钮点击事件
onBackPress 监听页面返回
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。
beforeCreate 在实例初始化之后被调用 created 在实例创建完成后被立即调用
beforeMount 在挂载开始之前被调用 mounted 挂载到实例上去之后调用
beforeUpdate 数据更新时调用 updated
beforeDestroy 实例销毁之前调用 destroyed 实例销毁后调用
getApp() 函数用于获取当前应用实例
const app = getApp() console.log(app.globalData)
getCurrentPages() 函数用于获取当前页面栈的实例
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
getCurrentPages()
获得的页面里内置了一个方法 $getAppWebview() 可以得到当前webview的对象实例
getCurrentPages()
可以得到所有页面对象，然后根据数组，可以取指定的页面webview对象
uni.$emit
触发全局的自定事件
uni.$on
监听全局的自定义事件
uni.$once
监听全局的自定义事件，事件可以由 uni.$emit 触发，但是只触发一次
uni.$off移除全局自定义事件监听器
uni.$emit('update',{msg:'页面更新'})uni.$on('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})uni.$once('update',function(data){
console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})