使用uni-app開發(fā)了若干個(gè)app,一直頭痛于頁面之間傳值,A->B還行,可以通過url帶參數(shù)解決,B->A返回的時(shí)候傳參就比較麻煩了,之前開發(fā)小程序的時(shí)候,可以通過從頁面棧中找到前一個(gè)頁面并賦值的方法來解決,但是在uni-app中,這個(gè)方法行不通,查了很多,最后決定使用onfire.js來解決。
由于本人之前是搞原生開發(fā)的,對(duì)于混合或者web開發(fā)并不了解,個(gè)人對(duì)于onfire.js的理解就是一個(gè)全局通知,從B頁面發(fā)出一個(gè)通知帶上Key和Value,在其他某一個(gè)頁面監(jiān)聽這個(gè)Key值來獲取傳出來的Value。
在uni-app中要使用onfire.js,首先需要引入npm,好在uni-app是支持使用npm來安裝第三方包的。這里就把官方文檔的步驟引用一下,方便像我一樣懶的同學(xué)再去翻文檔:
1、使用命令行cd到項(xiàng)目根目錄(對(duì)這個(gè)不熟悉的朋友可以自己百度一下),然后初始化一下npm,運(yùn)行以下命令
npm init -y
2、運(yùn)行成功后,項(xiàng)目根目錄下會(huì)出現(xiàn)一個(gè)package.json文件,接下去我們安裝onfire.js包,繼續(xù)運(yùn)行命令
npm i --save onfire.js
3、安裝成功后,根目錄中會(huì)出現(xiàn)一個(gè)node_modules文件夾,里面就是安裝好的第三方包,只要看到里面有onfire.js文件夾就可以了
4、接下去就是在項(xiàng)目中引用了,我們首先來到main.js,引入onfire.js(完全復(fù)制下面的內(nèi)容到你的main.js就可以,自己打可能不會(huì)提示,也不用輸入完整的目錄)
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、運(yùn)行項(xiàng)目,當(dāng)B頁面fire觸發(fā)后,可以看到控制臺(tái)中打印出了123的內(nèi)容,說明通知接收到了