微信小程序間使用navigator跳轉(zhuǎn)傳值問題實(shí)例分析
本文實(shí)例講述了微信小程序間使用navigator跳轉(zhuǎn)傳值問題。分享給大家供大家參考，具體如下：
前言
這次講一下我用 navigator 組件實(shí)現(xiàn)從一個(gè)小程序跳轉(zhuǎn)到另一個(gè)小程序的過程中遇到的問題。
extra-data 如何構(gòu)建
由于上網(wǎng)查資料得知 extra-data 是 json 格式。那么就不能在 HTML 屬性中直接寫。
那么剩下只有在 JS 里構(gòu)建了。
首先在 HTML 里，綁定 extra-data的值到 extra 變量
<navigator class="navi" url="" target="miniProgram" app-id="wxxxxxxxxxxxxxxx" extra-data="{{ extra }}" version="{{ version }}" path="/pages/index/index">
<image src="{{img}}" mode="scaleToFill" class="img">
</image>
</navigator>
然后在 JS 里構(gòu)建這個(gè)變量
Page({
data: {
extra: {
"color": '', // 動(dòng)態(tài)獲取
"partnerUsername": '99',
},
},
})
這里有個(gè)問題，就是如果 extra 里的 color 等變量是動(dòng)態(tài)從遠(yuǎn)程 api 獲取到的，那么應(yīng)該怎么賦值。
我憑直覺寫 extra.color = 'xx' ，嘗試了下不行。查閱資料發(fā)現(xiàn)，應(yīng)該這么寫:
wx.request({
url: url,
data: {
color: '',
},
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
"extra.color": app.globalData.color,
});
}
});
還可以在 path 屬性值后面跟參數(shù)來向目標(biāo)小程序傳值
通過搜索發(fā)現(xiàn)[這篇文章](https://cloud.tencent.com/developer/article/1157552)，我試了他給出的解決方案，是可行的，現(xiàn)在記錄在下面：
<navigator class="navi" url="" target="miniProgram" app-id="wxxxxxxxxxxxx" version="{{ version }}" path="zh_tcwq/pages/index/index?color={{ colorSet }}&partner={{ partner }}">
<image src="{{src}}" mode="scaleToFill" class="img">
</image>
</navigator>
// 源小程序
this.setData({
colorSet: app.globalData.color,
partner: app.globalData.partnerUsername,
});
// 目標(biāo)小程序
onShow: function (options) {
console.log(options.query.color + options.query.partner);
}
奇怪的問題（可能是bug）：打開調(diào)試時(shí)，目標(biāo)小程序能獲取到動(dòng)態(tài)的 extra-data，關(guān)閉后無法獲取到
原因是我沒配合法域名，所以動(dòng)態(tài)從 api 獲取的數(shù)據(jù)獲取不到。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
用js獲取當(dāng)前網(wǎng)卡的ip地址，可以是局域網(wǎng)的。不過一般本地使用的。2009-05-05
發(fā)表文章時(shí)自動(dòng)保存到剪貼板...2006-10-10
el-table動(dòng)態(tài)渲染列、可編輯單元格、虛擬無縫滾動(dòng)的實(shí)現(xiàn)
vue對數(shù)據(jù)處理很常見,本文主要介紹了對el-table組件二次封裝,包括對el-table的動(dòng)態(tài)渲染、單元格編輯；對于無縫滾動(dòng)的實(shí)現(xiàn),優(yōu)化大數(shù)據(jù)量下的頁面卡頓問題,感興趣的可以了解一下2023-12-12
js 實(shí)現(xiàn)ajax發(fā)送步驟過程詳解
這篇文章主要介紹了js 實(shí)現(xiàn)ajax發(fā)送過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
淺談layui 數(shù)據(jù)表格前后臺(tái)傳值的問題
今天小編就為大家分享一篇淺談layui 數(shù)據(jù)表格前后臺(tái)傳值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Javascript showModalDialog兩個(gè)窗體之間傳值
前一篇文章Javascript怎么在兩個(gè)窗體之間傳值中講到了如何利用window.open()方法打開新窗體，并在兩個(gè)窗體之間傳值的方法。2009-09-09
實(shí)際上，setTimeout和setInterval的語法相同。它們都有兩個(gè)參數(shù)，一個(gè)是將要執(zhí)行的代碼字符串，還有一個(gè)是以毫秒為單位的時(shí)間間隔，當(dāng)過了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。不過這兩個(gè)函數(shù)還是有區(qū)別的2015-06-06
這篇文章主要介紹了Promise掃盲貼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01