uniapp頁面通信方法總彙

uni-app 是一個使用 vue.js 開發所有前端應用的架構，開發者編寫一套代碼，可釋出到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平台。

利用url傳參進行通訊

A頁面向B頁面傳遞參數

uni.navigateTo({  
    url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io')  
});

B頁面接收A頁面傳遞的參數

export default {  
    onLoad: function (option) { //option為object類型，會序列化上個頁面傳遞的參數  
        console.log(option.id); //列印出上個頁面傳遞的參數。
        console.log(option. url); //列印出上個頁面傳遞的參數。
    }  
}

uni.$emit()和uni.$on() 進行通訊

自 HBuilderX 2.0.0 起支援 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以友善的進行頁面的通訊，觸發的事件都是 App 全局級别的，跨任意元件，頁面，nvue，vue 等。

具體如何使用呢？我們假設一個場景，進入app,是未登陸狀态，需要在我的頁面點選登陸，進入登陸頁面進行登陸。登陸成功之後，傳回到我的頁面，實時顯示登陸後的使用者資訊。

監聽事件

首先，在我的頁面監聽事件。

// 我的頁面  
onLoad(){  
    // 監聽事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除監聽事件  
        uni.$off('login');  
    },

因為事件監聽是全局的，是以使用 uni.$on ，需要使用 uni.$off 移除全局的事件監聽，避免重複監聽。

觸發事件

進入登陸頁面，觸發事件

// 登陸頁面  
uni.$emit('login', {  
      avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
      token: 'user123456',  
      userName: 'unier',  
      login: true  
});

使用 uni.$emit 觸發事件後，對應的 uni.$on 就會監聽到事件觸發，在回調中去執行相關的邏輯。

使用 EventBus 進行通訊

// 将eventBus對象注冊到Vue的原型上

Vue.prototype.$eventBus = new Vue()

// 在 A 頁面添加點選事件向 B 頁面發送消息

<button @click=“sendMsg”>Send</button>


sendMsg() {
  this.$eventBus.$emit(“getId”, 12)
}

// 在 B 頁面注冊監聽事件

created() {
  this.$eventBus.$on(“getId”, function(id) {
     this.id = id 
  }
}

利用“全局變量”進行通訊

公用子產品

定義一個專用的子產品，用來組織和管理這些全局的變量，在需要的頁面引入。

注意，這種方式隻支援多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。

示例如下：

在 uni-app 項目根目錄下建立 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 中調用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

這種方式，隻需要在 main.js 中定義好即可在每個頁面中直接調用。

Tips

每個頁面中不要在出現重複的屬性或方法名。
建議在 Vue.prototype 上挂載的屬性或方法，可以加一個統一的字首。比如 $url、global_url 這樣，在閱讀代碼時也容易與目前頁面的内容區分開。

globalData

小程式中有個globalData概念，可以在 App 上聲明全局變量。Vue 之前是沒有這類概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都實作了。

在 App.vue 可以定義 globalData ，也可以使用 API 讀寫這個值。

globalData支援vue和nvue共享資料。

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的資料綁定到頁面上，可在頁面的onshow聲明周期裡進行變量重指派。HBuilderX 2.0.3起，nvue頁面在uni-app編譯模式下，也支援onshow。

Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。

HBuilderX 2.2.5+起，支援vue和nvue之間共享。參考

這裡以登入後同步更新使用者資訊為例，簡單說明下 Vuex 的用法，更多更詳細的 Vuex 的内容，建議前往其官網 Vuex 學習下。

舉例說明：

在 uni-app 項目根目錄下建立 store 目錄，在 store 目錄下建立 index.js 定義狀态值。

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 中運作。

示例操作步驟：未登入時，提示去登入。跳轉至登入頁後，點選“登入”擷取使用者資訊，同步更新狀态後，傳回到個人中心即可看到資訊同步的結果。

注意：對比前面的方式，該方式更加适合處理全局的并且值會發生變化的情況。

注意事項

* .vue 和 .nvue 并不是一個規範，是以一些在 .vue 中适用的方案并不适用于 .nvue。Vue 上挂載屬性，不能在 .nvue 中使用。**

nvue 和 vue 互相通訊

步驟

1、在nvue頁面使用uni.postMessage(data),發送資料，data隻能為json資料,

2、在app.vue頁面裡使用 onUniNViewMessage 進行監聽，接受資料

代碼示例

nvue頁面

<template>
    <div @click="test">
        <text>點選頁面發送資料</text>
    </div>
</template>
<script>
    export default {
        methods: {
            test(e) {
                uni.postMessage({test: "資料",value:"資料"});
            }
        }
    }
</script>

App.vue

<script>
    export default {
        onUniNViewMessage:function(e){
          console.log("App.vue收到資料")
          console.log(JSON.stringify(e.data))  
        },
        onLaunch: function() {
            console.log('App Launch');
        }
    }
</script>

uniapp頁面通信方法總彙

利用url傳參進行通訊

uni.$emit()和uni.$on() 進行通訊

監聽事件

觸發事件

更多使用場景

使用 EventBus 進行通訊

利用“全局變量”進行通訊

公用子產品

挂載 Vue.prototype

globalData

Vuex

注意事項

nvue 和 vue 互相通訊

繼續閱讀

HDU 4719 Oh My Holy FFF

CSU 1561 (More) Multiplication

CSU 1563 Lexicography

HDU 4721 Food and Productivity

ZOJ 1041 Transmitters

CSU 1562 Fun House

CodeChef PALPROB Palindromeness

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

HDU 2821 Pusher

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

UVA 519 Puzzle (II)

磁盤結構及在Linux中的命名

uniapp頁面通信方法總彙

利用url傳參進行通訊

uni.$emit()和uni.$on() 進行通訊

監聽事件​

觸發事件​

更多使用場景​

使用 EventBus 進行通訊

利用“全局變量”進行通訊

公用子產品​

挂載 Vue.prototype​

globalData​

Vuex

注意事項​

nvue 和 vue 互相通訊

繼續閱讀

監聽事件

觸發事件

更多使用場景

公用子產品

挂載 Vue.prototype

globalData

注意事項