uni-app 使用npm安裝onfire.js實(shí)現(xiàn)頁面回傳參數(shù)

使用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)容,說明通知接收到了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容