微信小程序——詳細講解頁面傳值(多種方法)

1、使用navigator的url帶參傳值

（1）在pageA頁面有一個固定的值要傳遞到pageB頁面，比如說一個固定的值user_id要傳遞給B

<navigator url="../index/pageB?user_id='12345678'">index4</navigator>

注：？后面為你要傳遞的值

這樣在pageB頁面js的onload函數里面，使用setData方法可以獲取到傳遞過來的值，並將它賦值給pageB頁面初始數據
在pageB頁面的data里面聲明一個初始數據

data: {
    user_id:''
 },

然后在onload函數中進行操作，頁面加載時獲取

onLoad: function (options) {
    this.setData({
      user_id:options.user_id
    })
    console.log(this.data.user_id)
  },

 

（2）在一般情況下我們要傳多個值，與上面的差不多，只是多加了一個&，下面我代碼示范

pageA

<navigator url="../index/pageB?user_id='12345678'&user_name='lhs'">index</navigator>

pageB

data: {
    user_id:'',
    user_name:''
  },
onLoad: function (options) {
    this.setData({
      user_id:options.user_id,
      user_name: options.user_name,
    })
    console.log(this.data.user_id)
    console.log(this.data.user_name)
  },

 

（3）當然也可以在js頁面傳值，比如使用wx.navigateTo、wx.redirectTo等，下面我讓大家看看與navigator對應關系

 

從上面可以看出navigator的open-type="navigate"(不寫默認值是navigate)等於wx.navigateTo

好了，我接着使用wx.navigateTo使用傳值；首先在pageA綁定一個點擊事件

<button catchtap="pageB">index</button>

在事件中寫入參數，當然如果是傳多個參數的話就要在后面加&

pageB: function () {
    wx.navigateTo({
      url: '../logs/logs?user_id=' + 520,
    })
  },

詳細：

1、wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。（可帶參）

2、wx.redirectTo：關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。（可帶參）

3、wx.switchTab：跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面（不可帶參）

4、wx.reLaunch：關閉所有頁面，打開到應用內的某個頁面（可帶參）

5、wx.navigateBack ：關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。（沒有url屬性，不可帶參）

總結：

switchTab這種導航方式，不能帶參，也就是說不能通過url進行傳參，解決方法就是如果要跳轉到tab頁面，使用reLaunch方法

 

 

2、利用getCurrentPages進行頁面傳值

（1）.getCurrentPages()獲取當前頁面棧。數組中第一個元素為首頁，最后一個元素為當前頁面。

pageA：dataFromB和dataFromC都是從pageB和pageC獲取的，暫時沒有數據

<text class='currentPage'>當前頁面:[pageA.wxml]</text>
<view class='container'>
    <text>{{name}}</text>    
    <text>{{dataFromB}}</text>
    <text>{{dataFromC}}</text>
</view>

<button type = "primary" catchtap='goToPageB'>跳轉到pageB</button>

pageA的樣式

page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage{
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: red;
    line-height: 80rpx;
    color: #fff;

}
.container{
    width: 600rpx;
    height: 300rpx;
    background-color: red;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
    color: #fff;
}

pagaA要初始化數據，綁定goTopageB跳轉到pageB

data: { name: '花澤香菜', dataFromB: '', dataFromC: '' }, goToPageB: function () { // 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。小程序中頁面棧最多十層
 wx.navigateTo({ url: '../pageB/index', }) },

 

pageB：array[index]是傳值給pageA的數據，這里綁定goToPageC函數跳到pageC

<text class='currentPage'>當前頁面:[pageB.wxml]</text>
<view class='container'>
    <!-- <text>{{name}}</text> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker"> 國籍：{{array[index]}} </view> 
    </picker>
</view>

<button type = "primary" catchtap='goToPageC'>跳轉到pageC</button>

pageB的樣式

page {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage {
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: #0ff;
    line-height: 80rpx;
}

.container {
    width: 600rpx;
    height: 300rpx;
    background-color: #0ff;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}

初始化pageB數據，這里是通過getCurrentPages獲取頁面棧給pageA傳值的

data: { array: ['德國', '日本', '英國', '法國', '比利時'], }, // 傳值 bindPickerChange: function (e) { let pages = getCurrentPages(); let currPage = null; //當前頁面 let prevPage = null; //上一個頁面 if (pages.length >= 2) { currPage = pages[pages.length - 1]; //最后一個元素為當前頁面。 prevPage = pages[pages.length - 2]; //上一個頁面 console.log(currPage + "，" + prevPage); } if (prevPage) { //給pageA頁面賦值 prevPage.setData({ dataFromB: '國籍：' + this.data.array[e.detail.value] }); } //給當前頁面賦值 this.setData({ index: e.detail.value }) }, goToPageC: function () { wx.navigateTo({ url: '../pageC/index', }) },

 

pageC：通過綁定goToPageA函數跳回pageA頁面

<text class='currentPage'>當前頁面:[pageC.wxml]</text>
<view class='container'>
    <!-- <text>{{name}}</text> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker"> 作品：{{array[index]}} </view> 
    </picker>
</view>

<button type = "primary" catchtap='goToPageA'>跳轉到pageA</button>

pageC樣式

page {
　　 display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}
.currentPage {
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: pink;
    line-height: 80rpx;
}
.container {
    width: 600rpx;
    height: 300rpx;
    background-color: pink;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}

初始化數據，這里是通過wx.navigateBack返回pageA，如果使用wx.navigateTo返回pageA是沒有傳值

/** * 頁面的初始數據 */ data: { array: ['戀愛循環', '大丈夫'], }, bindPickerChange: function (e) { let pages = getCurrentPages(); let currPage = null; //當前頁面
    let prevPage = null; //上一個頁面

    if (pages.length >= 2) { currPage = pages[pages.length - 1]; //最后一個元素為當前頁面。
      prevPage = pages[pages.length - 3]; //pageA頁面
      console.log(currPage + "，" + prevPage); } if (prevPage) { //給上一個頁面賦值
 prevPage.setData({ dataFromC: '代表作品：' + this.data.array[e.detail.value] }); } //給當前頁面賦值
    this.setData({ index: e.detail.value }) }, goToPageA: function () { // 關閉當前頁面，返回上一頁面或多級頁面。
 wx.navigateBack({ delta:2 }) },

 運行效果：

注意：

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。
• 小程序頁面棧最多有十個，多了就不能使用wx.navigateTo跳轉

 

（2）頁面棧

從上圖可知使用wx.navigateBack頁面不斷出棧，直到目標返回頁；即pageA使用wx.navigateTo跳到pageB，pageB使用wx.navigateTo跳到pageC，pageC使用wx.navigateBack跳到pageA，而頁面棧是一路出棧的直到返回pageA，這時頁面棧就只有一個pageA

舉個例子，pagaA查看頁面棧的數量：

總數是1，而這個頁面棧就是pageA了

 

 

3. globalData全局對象

在 app.js 中定義全局變量

globalData: {
    userInfo: null,
    globalName:"lhs"
  }

在其他頁面可以取到全局變量

let app = getApp();    
console.log(app.globalData.globalName)

 

 

4、數據緩存

數據緩存，類似於cookie,localstorage,sessionstorage等本地緩存的方法，只不過微信小程序有它自己的本地緩存API。當然，為什么非要使用這種方法呢？

當然有第一二種方法不能用的情況，舉個例子，同樣要將頁面A的內容傳遞給頁面B，但是頁面B和頁面A沒有父子頁面關系，說簡單一點，就是A頁面和B頁面沒有跳轉關系，但是B頁面就是要從A頁面拿數據，前面提到頁面帶參跳轉就沒有用了，如果頁面層級太多，頁面棧的方法也就沒有，所以就要用到我們的第三種方法，數據緩存，將頁面A的數據本地緩存，然后在B頁面的onLoad函數中使用就行

 （1）wx.setStorage(OBJECT)和wx.getStorage(OBJECT)（異步接口）

將數據存儲在本地緩存中指定的 key 中。會覆蓋掉原來該 key 對應的內容。除非用戶主動刪除或因存儲空間原因被系統清理，否則數據都一直可用。單個 key 允許存儲的最大數據長度為 1MB，所有數據存儲上限為 10MB。

首先在頁面A的onload中使用wx.setStorage將要B頁面需要的值存儲起來，如果需要存儲多個值，可以封裝成數組或者對象鍵值對的形式

data: {
    info:{'name': '周傑倫',
      'phone': '123456789',
      'address': '台北'}  
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this
    wx.setStorage({
      key: 'information',
      data: that.data.info,
      success(res){//等同於success:function(res),es6的寫法，es6在小程序中都可以使用，推薦使用
     。。。。。。。
        }
    })    
  },

在B頁面我們只需要使用wx.getStorage()就可以拿到你需要的值了

data: {
    name:'',
    phone:'',
    address:''
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this
    wx.getStorage({
      key: 'information',
      success: function(res) {
        console.log(res.data)
        that.setData({
          name: res.data.name,
          phone: res.data.phone,
          address: res.data.address
        })
      }
    })  
  },

當然現在我們可以在A頁面采取頁面跳轉跳到B頁面看有沒有獲取到數據，其實也沒有必要，答案當然是獲取到了

注：這里還有一個同步 wx.setStorageSync和wx.getStorageSync，使用方法一樣

 

（2）.wx.clearStorage和wx.clearStorageSync（異步，同步清除緩存）

這種方法的弊端就在這兒，清除緩存，什么時候清除合理，都是值得思考的問題
我想一般就是在退出登錄的時候執行吧，不能過早，也不能過晚，時機很重要

 

（3）.wx.removeStorage(OBJECT)和wx.removeStorageSync(OBJECT)（異步，同步）

從本地緩存中異步移除指定 key
使用方法和存儲數據一樣，OK，不多做贅述

 

（4）.wx.getStorageInfo(OBJECT)和wx.getStorageInfoSync（異步，同步）

wx.getStorageInfo異步獲取當前storage的相關信息，比如說已經占用了多少存儲空間

wx.getStorageInfo({
  success: function(res) {
    console.log(res.keys)//當前storage中所有的key
    console.log(res.currentSize)//當前占用的空間大小, 單位kb
    console.log(res.limitSize)//限制的空間大小，單位kb
  }
})

wx.getStorageInfoSync()同步獲取當前storage的相關信息

try {
  const res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // Do something when catch error
}

看到這里大家應該注意到，結尾有Sync的為同步。

同異步區別：

1、同步方法會堵塞當前任務，直到同步方法處理返回。
2、異步方法不會塞當前任務。