小程序tab頁無法傳遞參數(shù)的方法
2021-07-28 10:42:43

小程序不支持tab頁面?zhèn)鬟fqueryString參數(shù),無論是navigator,還是通過api跳轉(zhuǎn)

在跳轉(zhuǎn)時通過在點擊事件中設(shè)置本地存儲后在另一個頁面獲取不到的問題

通過wx.getStorage()獲取不到數(shù)據(jù),遂改為了wx.getStorageSync()此種方式在開發(fā)者工具上可以獲取到,但是發(fā)現(xiàn)在部分android機型上無法獲取,猜測是因為navigator跳轉(zhuǎn)時可能并沒有立即存儲數(shù)據(jù),導(dǎo)致另一邊獲取不到,于是改成了將數(shù)據(jù)保存為全局變量,而不是本地存儲,然而,此種方法還是有問題,在真機上部分機型會出現(xiàn)"OnWebviewEvent: goPage, WebViewId xxxxxxxxx not found"警告,猜測是navigator組件的問題

解決方案

模擬實驗，一個跳轉(zhuǎn)支付的頁面。輸入金額，然后跳轉(zhuǎn)到支付tabBar
設(shè)置全局變量去解決

<!--index.wxml-->
<view>
<input  style="border:1px solid red" placeholder="請輸入金額" bindinput="moneyInput" ></input>
</view>
<button bindtap="pay">馬上去支付</button> 

//index.js
//獲取應(yīng)用實例
const app = getApp()
Page({

  data :{
    money:0
  },

  // 輸入金額input綁定事件，設(shè)置本地變量money的值
  moneyInput : function(e){
    this.setData({money:e.detail.value});
  },
  // 支付
  pay:function(){
    app.global_data.money = this.data.money;//比如輸入表單中的金額，然后跳轉(zhuǎn)到支付頁面
    if(app.global_data.money>0){
      wx.switchTab({
        url: '/pages/list/list',
      })
    }else{
      wx.showModal({
        title: '提示',
        content: '金額必須大于0',
      })
    }
    
  }


})

// pages/list/list.js
const app = getApp();
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
   
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    // 獲取全局變量的值
    console.log(app.global_data.money);// 這里可以在控制臺輸出之前頁面輸入的金額的值，間接的方式進行參數(shù)傳遞
  
  }
})

app.json

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "huangbaokang"
    },
    {
      "pagePath": "pages/list/list",
      "text": "支付中心"
    }
    ]
  },

頁面效果：

注意點：

在接收數(shù)據(jù)的onShow中接收,如果寫在onLoad中,在跳轉(zhuǎn)的時候不應(yīng)該用wx.switchTab跳轉(zhuǎn),而應(yīng)該用wx.reLaunch跳轉(zhuǎn),因為如果要跳轉(zhuǎn)的頁面以前已經(jīng)被打開了,用switchTab并不會重新渲染頁面,只會把頁面棧中的這個頁面重新顯示出來