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

作者: 梅先森森森森森森 | 来源:发表于2022-01-07 14:32 被阅读0次

image

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

image

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": [""]
        },
        "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);
})

❤️ 不要忘记留下你学习的脚印哟 ❤️

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读