uni-app页面通信方法集锦本篇主要介绍uni-app页面通信方法，由于uni-app基于vue.js开发，api参考

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

uni-app是流行跨端开发框架之一，其采用Vue.js框架，开发者编写一套代码，即可发布到ios、Android、H5、微信小程序、支付宝小程序、钉钉小程序等多个平台。

本篇主要介绍uni-app页面通信方法，所谓通信指的就是页面之间的数据传递，由于uni-app基于vue.js开发，api参考微信小程序，所以uni-app的页面通信有类似vue也有类似微信小程序的，下面我们逐一进行介绍。

1 全局挂载 Vue.prototype

在main.js使用 Vue.prototype方法，可以挂载一些使用频率较高的常量或方法，比如全局接口地址、全局APP升级检测方法，这样在uni-app的每个vue页面上，都可以直接使用。

示例如下：

 // main.js
 // api接口地址
 Vue.prototype.apiUrl = "http://111.191.152.25:9104/dev-api/"
 
 // 全局request封装方法
 import {
     myRequest
 } from './util/api.js'
 Vue.prototype.$myRequest = myRequest
 
 // 加密解密
 import {
     getRondomKey,
     rsaEncrypt,
     aesEncrypt
 } from './util/encrypt.js'
 Vue.prototype.getRondomKey = getRondomKey
 Vue.prototype.rsaEncrypt = rsaEncrypt
 Vue.prototype.aesEncrypt = aesEncrypt
 
 // 公共工具方法
 import lib from "./util/lib.js"
 Vue.prototype.lib = lib

然后在 pages/index/index.vue 中调用

 <script>
     export default {
         data() {
             return {};
         },
         onLoad() {
             // 打印接口地址
             console.log('apiUrl:' + this.apiUrl);
         },
         methods: {
             // 调用全局request方法
             async listNews() {
                 const res = await this.$myRequest({
                     url: '/system/news/list',
                     data: {
                         pageNum: 1,
                         pageSize: 3
                     }
                 })
                 this.newsList = res.data.rows
             },
         }
     }
 </script>

2 globalData公共变量

globalData来源于微信小程序，用于声明全局变量，uni-app 引入了globalData概念，并应用在H5、App等平台。globalData支持vue和nvue共享数据，是一种比较简单的全局变量使用方式。

globalData定义于App.vue页面中，其他页面可以使用getApp() API 读写这个值。

 <script>
     export default {
         globalData: {
             webName: '掘金'
         },
         onLaunch: function() {
             console.log('App Launch')
         },
         onShow: function() {
             console.log('App Show')
         },
         onHide: function() {
             console.log('App Hide')
         }
     }
 </script>

其他页面：

 // 取值
 console.log(getApp().globalData.webName) // '掘金'
 // 赋值
 getApp().globalData.webName = 'New 掘金'

3 url传参

A页面向B页面传递参数

 uni.navigateTo({
     url: 'test/test?id=1&url=' + encodeURIComponent('http://juejin.cn')
 });

B页面在onload生命周期中，可以获得A页面传递的参数

 export default {
     onLoad: function(option) { 
         //option为object类型，会序列化上个页面传递的参数
         console.log(option.id); //打印出上个页面传递的参数。
         console.log(option.url); //打印出上个页面传递的参数。   
     }
 }

4 uni. $emit()和uni.$ on() 通讯

uni. $emit、 uni.$ on 、 uni. $once 、uni.$ off 是 App 全局事件级别的，可以跨任意组件、页面，是适用性最广泛的通讯方法，在以下场景均可使用：

vue 与 nvue，nvue 与 vue 间的通讯

tabbar 页面之间的通讯

父页面与多级子页面间的通讯

传值页面通过uni.$emit(eventName,Object)，注册事件名，并携带一个对象信息，如下例，在onLoad生命周期中，注册一个emitData事件名，然后携带一个网站信息的对象：

 <script>
     export default {
         data() {
             return {};
         },
         onLoad() {
             uni.$emit('emitData', {
                 webName: '掘金',
                 sologon: '金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。'
             });
         }
     };
 </script>

然后，在接收页面的onLoad中，通过回调来获取这个事件携带的对象，注意要在onUnload函数中使用uni.$off('emitData')来移除监听：

 <script>
     export default {
         data() {
             return {
 
             };
         },
         onLoad() {
             // 监听事件
             uni.$on('emitData', res => {
                 console.log(res.webName); // =>"掘金" res即emitData携带的对象
             });
         },
         onUnload() { // 移除监听事件
             uni.$off('emitData');
         }
     };
 </script>

uni. $once(eventName,callback)也同样用于监听由 `uni.$ emit` 触发的全局自定义事件，但仅触发一次，在第一次触发之后移除该监听器。

5 使用Vue事件总线通讯

首先，把eventBus对象挂载到Vue原型上：

 Vue.prototype.$eventBus = new Vue()

在 A 页增加点击事件，使用$emit发送自定义事件postData和携带消息

 <button @click=“sendData”>sendData</button>

 sendData() {
     this.$eventBus.$emit(“postData”,'掘金')
 }

在 B 页面created()函数中，使用$on监听postData事件

 created() {  
     this.$eventBus.$on(“postData”, function(data) {     
         console.log(data) //=>’掘金‘
     }
 }

6 nvue 和 vue 相互通讯

uni-app有两种页面开发方式，一种是原生渲染的nvue和webview渲染的vue页面，两者通讯，需要用到uni.postMessage()方法和onUniNViewMessage()生命周期函数，其步骤是：

首先，在nvue页面使用uni.postMessage(data)方法来发送数据，注意data必须是json数据。

 <template>
     <div @click="post"> <text>点击页面发送数据</text> </div>
 </template>
 <script>
     export default {
         methods: {
             post(e) {
                 uni.postMessage({
                     webName: "掘金",
                      sologon: "掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。"
                 });
             }
         }
     }
 </script>

其次，在app.vue页面里使用 onUniNViewMessage 进行监听、接收：

 <script>
     export default {
         onUniNViewMessage: function(e) {
             console.log(JSON.stringify(e.data)) // 接收到的数据
         },
         onLaunch: function() {
             console.log('App Launch');
         }
     }
 </script>

本篇完！

uni-app页面通信方法集锦