如何高效的阅读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.json:

{
    "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获取globalData

main.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);
})

❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客