uni-app

uni-app

生命周期

应用生命周期

函数名	说明
onlaunch	当uni-app初始化完成时触发(全局只触发一次)
onShow	当uni-app启动，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发
onUniNViewMessage	对nvue页面发送的数据进行监听

• 应用生命周期仅可在App.vue中监听，在其他页面监听无效。
• onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942

页面生命周期

函数名	说明	平台差异说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击tab时触发，参数为Object	微信小程序、百度小程序、H5、App(自定义组件模式)
onShareAppmessage	用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+App、H5
onBackPress	监听页面返回，返回event = {from:backbutton、navigateBack}，backbutton表示来源是左上角返回按钮或android返回键；navigateBack表示来源是uni.navigateBack	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框内容变化事件	App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发	App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5

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，并拦截点击事件。

onNavigationBarButtonTap参数说明:

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

onBackPress回调参数对象说明:

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

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

组件生命周期

函数名	说明	平台差异说明
beforeCreate	在实例初始化之后被调用
created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用
mounted	挂在到实例上去之后调用
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前	仅H5平台支持
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子	仅H5平台支持
beforeDestroy	实例销毁之前调用
destoryed	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解除绑定，多有的事件监听器会被移除，所有的子实例也会被销毁

路由

​ uni-app页面路由为框架统一管理，开发者需要在page.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以uni-app的路由用法与Vue Router不同，如仍希望采用Vue Router方式管理路由，可在插件市场搜索Vue-Router。

路由跳转

• 使用navigator组件跳转
• 调用API跳转

页面栈

​ 框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下:

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app打开的第一个页面
打开新页面	新页面入栈	调用API uni.navigateTo、使用组件 < navigator open-type=“navigate”/>
页面重定向	当前页面出栈，新页面入栈	调用API uni.redirectTo、使用组件 < navigator open-type=“redirectTo”/>
页面返回	页面不断出栈，直到目标页面返回页	调用API uni.navigateBack、使用组件 < navigator open-type=“navigateBack”/>、用户按左上角返回按钮、安卓用户点击物理back按键
Tab切换	页面全部出栈，只留下新的Tab页面	调用API uni.switchTab、使用组件 < navigator open-type=“switchTab”/>、用户切换Tab
重加载	页面全部出栈，只留下新的页面	调用API uni.reLaunch、使用组件 < navigator open-type=“reLaunch”/>

运行环境判断

生产环境和开发环境

if(process.env.NODE_ENV === 'development'){
     
    console.log('开发环境')
} else if(process.env.NODE_ENV === 'production'){
     
    console.log('生产环境')
}

判断平台

switch(uni.getSystemInfoSync().platform){
     
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

配置

pages.json

​ pages.json文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。类似微信小程序中app.json的页面管理部分。

​ 配置项列表:

属性	类型	必填	描述
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则
tabBar	Object	否	设置底部tab的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置
preloadRule	Object	否	分包预下载规则
workers	String	否	Worker代码放置目录

{
     
    "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"
        },
        "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
        "pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
    },
    "tabBar": {
     
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "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"
        }
    },
  "easycom": {
     
    "autoscan": true, //是否自动扫描组件
    "custom": {
     //自定义扫描规则
      "uni-(.*)": "@/components/uni-$1.vue"
    }
  }
}

mainfest.json

​ mainfest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。

​ 配置项列表:

属性	类型	默认值	描述
name	String		应用名称
appid	String	新建uni-app项目时，DCloud云端分配	应用标识
description	String		应用描述
versionCode	String		版本号
versionName	String		版本名称
transformPx	Boolean	true	是否转换项目的px，为true时将px转换为rpx，为false时，px为传统的实际像素
networkTimeout	Object		网络超时时间
debug	Boolean	false	是否开启debug模式，开启后调试信息以info的形式给出，其信息有页面的注册，页面路由，数据更新，事件触发等
uniStatistics	Object		是否开启uni统计，全局配置
app-plus	Object		App特有配置
h5	Object		H5特有配置
quickapp	Object		快应用特有配置
mp-weixin	Object		微信小程序特有配置
mp-alipay	Object		支付宝小程序未提供可配置项
mp-baidu	Object		百度小程序特有配置
mp-toutiao	Object		字节跳动小程序特有配置
mp-qq	Object		qq小程序特有配置

package.json

​ 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台。

​ package.json扩展配置用法:

{
     
    /**
     package.json其它原有配置 
     */
    "uni-app": {
     // 扩展配置
        "scripts": {
     
            "custom-platform": {
      //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {
     //环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": {
      //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }
}