使用uni-app开发了若干个app,一直头痛于页面之间传值,A->B还行,可以通过url带参数解决,B->A返回的时候传参就比较麻烦了,之前开发小程序的时候,可以通过从页面栈中找到前一个页面并赋值的方法来解决,但是在uni-app中,这个方法行不通,查了很多,最后决定使用onfire.js来解决。
由于本人之前是搞原生开发的,对于混合或者web开发并不了解,个人对于onfire.js的理解就是一个全局通知,从B页面发出一个通知带上Key和Value,在其他某一个页面监听这个Key值来获取传出来的Value。
在uni-app中要使用onfire.js,首先需要引入npm,好在uni-app是支持使用npm来安装第三方包的。这里就把官方文档的步骤引用一下,方便像我一样懒的同学再去翻文档:
1、使用命令行cd到项目根目录(对这个不熟悉的朋友可以自己百度一下),然后初始化一下npm,运行以下命令
npm init -y
2、运行成功后,项目根目录下会出现一个package.json文件,接下去我们安装onfire.js包,继续运行命令
npm i --save onfire.js
3、安装成功后,根目录中会出现一个node_modules文件夹,里面就是安装好的第三方包,只要看到里面有onfire.js文件夹就可以了
4、接下去就是在项目中引用了,我们首先来到main.js,引入onfire.js(完全复制下面的内容到你的main.js就可以,自己打可能不会提示,也不用输入完整的目录)
import onfire from 'onfire.js'
5、还是在main.js中,初始化onfire.js
Vue.prototype.$fire = new onfire()
6、好了,接下去就是使用了,在B页面中需要传参的地方加入以下代码
this.$fire.fire('testKey','123');
7、然后在需要接收的地方添加以下代码
this.$fire.on('testKey',result=>{ console.log(result) })
8、运行项目,当B页面fire触发后,可以看到控制台中打印出了123的内容,说明通知接收到了