由环境切换引发的页面通讯机制思考

一、前言

APP开发完毕，app store上架审核前存在后台晚于APP发布的场景，鉴于APP首页页面渲染依赖于后台接口，且苹果上架审核人员对于页面渲染效果比较苛刻，故制定出应用启动时默认连接生产环境，通过接口查询识别到非发版版本时切换到UAT环境的应对策略。

二、解决方案

在uni-app实现过程中，APP.vue作为首加载文件，环境切换在此页面的onLoad方法中完成。环境切换完成后，通过页面通讯方式完成页面接口间的依赖关系制定。

APP.vue 通过触发全局的自定义事件方式，告知全局环境切换已完成。

uni.$emit('switchRequestAddress', {msg: true});

APP首页通过监听全局的自定义事件方式，获悉全局环境切换已完成，可正常进行接口调用。

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

通过以上方式便可实现应用正式上架前根据生产环境信息动态切换接口请求环境效果。

感悟: 总体来看，uni-app开发过程中遇到的问题均可以在uni-app官方文档中找到相应的解决方案，所以技术文档还是要熟悉。

2.1 uni.$on(eventName,callback) 与 uni.$once(eventName,callback) 的区别

• uni.$on(eventName,callback)：监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
• uni.$once(eventName,callback)：监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

三、拓展阅读

• uni-app 页面通讯