uni-app的框架接口

App.vue页面介绍

App.vue 是 uni-app 的主组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件。但 App.vue 本身不是页面，这里不能编写视图元素。
App.vue 文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储 globalData
应用生命周期仅可在 App.vue 中监听，在页面监听无效。

应用生命周期

uni-app 支持如下应用生命周期函数

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

在 App.vue 文件中使用生命周期函数

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		onError: function() {
			console.log('报错了')
		}
	}
</script>

注意：

• 应用生命周期仅可在 App.vue 中监听，其他页面监听无效
• App.vue 文件中不能写模板

globalData

小程序有 globalData，这是一种简单的全局变量机制。这套机制在 uni-app 里也可以使用，并且全端通用。
在 App.vue 中定义 globalData 的相关配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

• js 中操作 globalData 的方式如下： getApp().globalData.text = 'hahaha'
• 在 应用 onLaunch 时，getApp 对象还未获取，暂时可以使用 this.$scope.globalData 或者 this.$options.globalData 获取 globalData
• 如果需要把 globalData 的数据绑定到 .vue 页面上，可以在页面的 onShow 页面生命周期里进行变量重新赋值。
• globalData 是简单的全局变量，如果使用状态管理，使用 vuex（在 main.js 中定义）
  App.vue

<script>
	export default {
		globalData: {
			text: 'text'
		},
		onLaunch: function() {
			console.log(this.$options.globalData.text)
			console.log(this.$scope.globalData.text)
		}
	}
</script>

new.vue

<template>
	<view>
		<text>{{newText}}</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				newText: ''
			}
		},
		onLoad() {
		},
		onShow() {
			getApp().globalData.text = 'hahah'
			this.newText = getApp().globalData.text
			console.log(this.newText)
		}
	}
</script>

全局样式

在 App.vue 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在 App.vue 中。
注意如果工程下同时有 vue 和 nvue 文件，全局样式的所有 css 会应用于所有文件，而 nvue 支持的 css 有限，编译器会在控制台报警，提示某些 css 无法在 nvue 中支持，此时需要把 mvue 不支持的 css 写在单独的条件编译里，如：

<style>
 /* #ifndef APP-PLUS-NVUE */
 @import './common/uni.css';
 /* #endif */
</style>

生命周期

应用生命周期

应用生命周期仅可在 App.vue 中监听，在其它页面监听无效
uni-app 支持如下应用生命周期函数：

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

示例：

<script>
	export default {
		// 应用生命周期函数，只能在 App.vue 页面中调用监听
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		onError: function() {
			console.log('报错了')
		}
	}
</script>

页面生命周期

uni-app 支持如下页面生命周期函数：

• onLoad： 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
• onShow： 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
• onReady： 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
• onHide： 监听页面隐藏
• onUnload： 监听页面卸载
• onResize： 监听窗口尺寸变化
• onPullDownRefresh： 监听用户下拉动作，一般用于下拉刷新
• onReachBottom： 页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据
• onTabItemTap： 点击 tab 时触发，参数为 Object
• onShareAppMessage： 用户点击右上角分享
• onPageScroll： 监听页面滚动，参数为 Object
• onNavigationBarButtonTap： 监听原生标题栏按钮点击事件，参数为 Object
• onBackPress： 监听页面返回，返回 event = {from:backbutton、navigateBack},backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。支付宝小程序只有真机能触发，只能监听非 navigateBack 引起的返回，不可阻止默认行为
• onNavigationBarSearchInputChanged： 监听原生标题栏搜索输入框输入内容变化事件
• onNavigationBarSearchInputConfirmed： 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的搜索按钮时触发
• onNavigationBarSearchInputClicked： 监听原生标题栏搜索输入框点击事件

注意事项：
onReachBottom 使用注意，可 pages.json 里定义具体页面底部的触发距离 onReachBottomDistance，比如设为 50，那么滚动页面到距离底部 50px 时，就会触发 onReachBottom 事件；如果使用 scroll-view 导致页面没有滚动，则触底事件不会被触发

onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：

• scrollTop：参数类型为 Number，页面在垂直方向已滚动的距离（单位为 px）
  • onPageScroll 里不要写交互复杂的 js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非H5端，js是在逻辑层执行的，两层之间通信是由损耗的。如果在滚动过程中。频繁触发两层之间的数据交换，可能会造成卡顿。
  • 如果想实现滚动时标题栏透明渐变，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 为 transparent
  • 如果需要滚动吸顶固定某些元素，推荐使用 css 的粘性不急
  • 在 App、微信小程序、H5中，也可以使用 wxs 监听滚动；在 app-nvue 中，可以使用 bindingx 监听滚动
• onBackPress 上不可使用 async，会导致无法阻止默认返回

onPageScroll(e) { // nvue 暂时
	console.log("滚动距离为：" + e.scrollTop);
},

onTabItemTap 返回的 json 对象说明

• index ：String 类型，被点击 tabItem 的序号，从 0 开始
• pagePath： String 类型，被点击 tabItem 的页面路径
• text ： String 类型，被点击 tabItem 的按钮文字
  注意：
• onTabItemTap 常用于点击当前 tabItem，滚动或刷新当前页面。如果是点击不同的 tabItem，一定会触发页面切换
• 如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用 plus.nativaObj.view 放一个区块盖住原先的 tabItem 事件
• 支付宝小程序平台 onTabItemTap 表现为点击非当前 tabItem 后触发，因此不能用于实现点击返回顶部这种操作

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期

• beforeCreate： 在实例初始化之后被调用
• created： 在实例创建完成后被立即调用
• beforeMount： 在挂载开始之前被调用
• mounted： 挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可使用 $nextTick
• beforeUpdate： 数据更新时调用，发生在虚拟 DOM 打补丁之前
• updated： 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
• beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用
• destoryed： Vue 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁

页面

getApp()

getApp() 函数用于获取当前应用实例，一般用于获取 globalData
实例：

const app = getApp()
console.log(app.globalData)

注意：

• 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，可以通过 this.$scope 获取对应的app实例
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一格元素为首页，最后一个元素为当前页面。
注意：getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误
每个页面实例的方法属性列表：

• page.$getAppWebview()： 获取当前页面的 webview 对象实例，仅适用于 App 平台
• page.route： 获取当前页面的路由

小提示：

• navigateTo、redirectTo 只能打开非 tabBar 页面
• switchTab 只能打开tabBar 页面
• reLaunch 可以打开任意页面
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar的页面，底部都有tabBar
• 不能在 App.vue 里面进行页面跳转

补充：用户点开小程序，之后如果没有关闭小程序，手机关屏或者隐藏了小程序，当再次进来的时候，我们需要定位到用户之前打开的页面

• 小程序如果隐藏或者手机锁屏，都会触发全局生命周期 - onHide
• 后台到前台（用户再次打开小程序）都会触发 onShow 生命周期

export default {
    globalData: {
        URL: null
    },
    onShow() {
        if (this.globalData.URL) {
            uni.navigateTo({url: this.globalData.URL})
            return
        }  
    },
    onHide(){
        const pageUrl = getCurrentPages()
       	// this.globalData.url = pageUrl[pageUrl.length - 1]['route']
		this.globalData.url = pageUrl[pageUrl.length - 1].route
    }
}

$getAppWebview()

uni-app 在 getCurrentPages() 获得的页面里内置了一个方法 $getAppWebview() 可以得到当前 webview 的对象实例，从而实现对 webview 更强大的控制。此方法仅 App 支持。

页面通讯

uni.$emit(eventName, OBJECT)

触发全局的自定事件。附加参数都会传给监听器回调

• eventName： String 类型，事件名
• OBJECT： Object 类型，触发时间携带的附加参数
  代码示例：

uni.$emit('update', {mag: '页面更新'})

uni.$on(eventName, callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入时间触发函数的额外参数

• eventName： String 类型，事件名
• callback： Function，事件的回调函数
  代码示例：

uni.$on('update', function(data) {
	console.log('监听到事件来自 update，携带参数 msg 为：' + data.msg)
})

uni.$once(eventName, callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器

• eventName： String 类型，事件名
• callback： Function，事件的回调函数
  代码示例：

uni.$once('update', function(data) {
	console.log('监听到事件来自 update，携带参数 msg 为：' + data.msg)
})

uni.$off([eventName, callback])

移除全局自定义事件监听器

• eventName： Array，事件名
• callback： Function。事件的回调函数
  注意：
• 如果没有提供参数，则移除所有的事件监听器
• 如果只提供了事件，则移除该事件所有的监听器
• 如果同时提供了事件与回调，则只移除这个回调的监听器
• 提供的回调必须跟 $on 的回调为同一个才能移除这个回调的监听器

$emit，$on，$off 常用于跨页面，跨组件通讯
注意事项：

• uni.$emit、uni.$on、uni.$once、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue等
• 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on注册监听，onUnload里边uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听