uniapp頁面間通信相關(guān)方法總結(jié)
利用url傳參進行通訊
uni.navigateTo({url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io')});
B頁面接收A頁面?zhèn)鬟f的參數(shù)
export default {onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)console.log(option.id); //打印出上個頁面?zhèn)鬟f的參數(shù)。console.log(option. url); //打印出上個頁面?zhèn)鬟f的參數(shù)。}}
uni.$emit()和uni.$on() 進行通訊
自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的進行頁面的通訊 ，觸發(fā)的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等。
具體如何使用呢？我們假設(shè)一個場景，進入app,是未登陸狀態(tài)，需要在我的頁面點擊登陸，進入登陸頁面進行登陸。登陸成功之后，返回到我的頁面，實時顯示登陸后的用戶信息。
監(jiān)聽事件
首先，在我的頁面監(jiān)聽事件。
// 我的頁面onLoad(){// 監(jiān)聽事件uni.$on('login',(usnerinfo)=>{this.usnerinfo = usnerinfo;})},onUnload() {// 移除監(jiān)聽事件uni.$off('login');},
因為事件監(jiān)聽是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件監(jiān)聽，避免重復(fù)監(jiān)聽。
觸發(fā)事件
進入登陸頁面，觸發(fā)事件
// 登陸頁面uni.$emit('login', {avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',token: 'user123456',userName: 'unier',login: true});
使用 uni.$emit 觸發(fā)事件后，對應(yīng)的 uni.$on 就會監(jiān)聽到事件觸發(fā)，在回調(diào)中去執(zhí)行相關(guān)的邏輯。
更多使用場景
以上只是一個簡單的場景應(yīng)用。而我們開發(fā)中會遇到很多頁面間通訊場景，如：
vue 與 nvue，nvue 與 vue 間的通訊
tabbar 頁面之間的通訊
父頁面與多級子頁面間的通訊
基本上述場景均可以實現(xiàn)，本質(zhì)上就是一個頁面通知另一個面我發(fā)生了變化，你需要處理一下。
絕大部分頁面的通訊都可以使用 uni.$emit、 uni.$on 、 uni.$once 、uni.$off 四個事件完成。
Tips
如果頁面沒有打開，將不能 注冊監(jiān)聽事件 uni.$on 和 uni.$once 。
一次性的事件，直接使用 uni.$once 監(jiān)聽，不需要移除。
使用 EventBus 進行通訊
// 將eventBus對象注冊到Vue的原型上
Vue.prototype.$eventBus = new Vue()
// 在 A 頁面添加點擊事件向 B 頁面發(fā)送消息
<button @click=“sendMsg”>Send</button>sendMsg() {this.$eventBus.$emit(“getId”, 12)}
// 在 B 頁面注冊監(jiān)聽事件
created() {this.$eventBus.$on(“getId”, function(id) {this.id = id}}
利用“全局變量”進行通訊
公用模塊
定義一個專用的模塊，用來組織和管理這些全局的變量，在需要的頁面引入。
注意，這種方式只支持多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。
示例如下：
在 uni-app 項目根目錄下創(chuàng)建 common 目錄，然后在 common 目錄下新建 helper.js 用于定義公用的方法。
const websiteUrl = 'http://uniapp.dcloud.io';const now = Date.now || function () {return new Date().getTime();};const isArray = Array.isArray || function (obj) {return obj instanceof Array;};export default {websiteUrl,now,isArray}
接下來在 pages/index/index.vue 中引用該模塊。
<script>import helper from '../../common/helper.js';export default {data() {return {};},onLoad(){console.log('now:' + helper.now());},methods: {}}</script>
這種方式維護起來比較方便，但是缺點就是每次都需要引入。
掛載 Vue.prototype
將一些使用頻率較高的常量或者方法，直接擴展到 Vue.prototype 上，每個 Vue 對象都會“繼承”下來。
注意這種方式只支持vue頁面
示例如下：
在 main.js 中掛載屬性/方法
Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';Vue.prototype.now = Date.now || function () {return new Date().getTime();};Vue.prototype.isArray = Array.isArray || function (obj) {return obj instanceof Array;};
然后在 pages/index/index.vue 中調(diào)用
<script>export default {data() {return {};},onLoad(){console.log('now:' + this.now());},methods: {}}</script>
這種方式，只需要在 main.js 中定義好即可在每個頁面中直接調(diào)用。
Tips
每個頁面中不要在出現(xiàn)重復(fù)的屬性或方法名。
建議在 Vue.prototype 上掛載的屬性或方法，可以加一個統(tǒng)一的前綴。比如 $url、global_url 這樣，在閱讀代碼時也容易與當前頁面的內(nèi)容區(qū)分開。
globalData
小程序中有個globalData概念，可以在 App 上聲明全局變量。Vue 之前是沒有這類概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平臺都實現(xiàn)了。
在 App.vue 可以定義 globalData ，也可以使用 API 讀寫這個值。
globalData支持vue和nvue共享數(shù)據(jù)。
globalData是一種比較簡單的全局變量使用方式。
定義：App.vue
<script>export default {globalData: {text: 'text'},onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}</script><style>/*每個頁面公共css */</style>
js中操作globalData的方式如下：
賦值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'
如果需要把globalData的數(shù)據(jù)綁定到頁面上，可在頁面的onshow聲明周期里進行變量重賦值。HBuilderX 2.0.3起，nvue頁面在uni-app編譯模式下，也支持onshow。
Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
HBuilderX 2.2.5+起，支持vue和nvue之間共享。參考
這里以登錄后同步更新用戶信息為例，簡單說明下 Vuex 的用法，更多更詳細的 Vuex 的內(nèi)容，建議前往其官網(wǎng) Vuex 學(xué)習(xí)下。
舉例說明：
在 uni-app 項目根目錄下新建 store 目錄，在 store 目錄下創(chuàng)建 index.js 定義狀態(tài)值。
const store = new Vuex.Store({state: {login: false,token: '',avatarUrl: '',userName: ''},mutations: {login(state, provider) {console.log(state)console.log(provider)state.login = true;state.token = provider.token;state.userName = provider.userName;state.avatarUrl = provider.avatarUrl;},logout(state) {state.login = false;state.token = '';state.userName = '';state.avatarUrl = '';}}})
然后，需要在 main.js 掛載 Vuex
import store from './store'Vue.prototype.$store = store
最后，在 pages/index/index.vue 使用
<script>import {mapState,mapMutations} from 'vuex';export default {computed: {...mapState(['avatarUrl', 'login', 'userName'])},methods: {...mapMutations(['logout'])}}</script>
詳細示例，請下載附件，在 HBuilderX 中運行。
示例操作步驟：未登錄時，提示去登錄。跳轉(zhuǎn)至登錄頁后，點擊“登錄”獲取用戶信息，同步更新狀態(tài)后，返回到個人中心即可看到信息同步的結(jié)果。
注意：對比前面的方式，該方式更加適合處理全局的并且值會發(fā)生變化的情況。
注意事項
* .vue 和 .nvue 并不是一個規(guī)范，因此一些在 .vue 中適用的方案并不適用于 .nvue。Vue 上掛載屬性，不能在 .nvue 中使用。**
nvue 和 vue 相互通訊
步驟
1、在nvue頁面使用uni.postMessage(data),發(fā)送數(shù)據(jù)，data只能為json數(shù)據(jù),
2、在app.vue頁面里使用 onUniNViewMessage 進行監(jiān)聽，接受數(shù)據(jù)
代碼示例
nvue頁面
<template><div @click="test"><text>點擊頁面發(fā)送數(shù)據(jù)</text></div></template><script>export default {methods: {test(e) {uni.postMessage({test: "數(shù)據(jù)",value:"數(shù)據(jù)"});}}}</script>
App.vue
<script>export default {onUniNViewMessage:function(e){console.log("App.vue收到數(shù)據(jù)")console.log(JSON.stringify(e.data))},onLaunch: function() {console.log('App Launch');}}</script>
本文完~