如何高效的阅读uni-app框架？（建议收藏）

妖狐艹你老母 2021-08-19 16:30 346阅读 0赞

![file][]

作者 | 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配置的，这一点是我做地图时注意到的内容。

![file][file 1]

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"。

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页面发送的数据进行监听。

globalData时小程序的机制，在uni-app也是可用。

App.vue配置：

获取：

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 页面发送的数据进行监听

页面生命周期

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 前端相关的技术文章、工具资源、精选课程、热点资讯。

###  ###

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

###  ###

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

### 欢迎关注[达达][Link 1]的CSDN！ ###

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

![7d927f18ebd05ea1d505a572393fbc87.jpg][]

[file]: /images/20210724/2532e02401964116894e9224df07aa47.png
[file 1]: /images/20210724/c4897fefc85a44aca6d1e2f89afe54e2.png
[Link 1]: https://blog.csdn.net/qq_36232611
[7d927f18ebd05ea1d505a572393fbc87.jpg]: /images/20210724/e12588eb3e1f4f92a90c10ad5fd0e2fa.png