微信小程序：頁面跳轉時傳遞數據到另一個頁面

一、功能描述

頁面跳轉時，同時把當前頁面的數據傳遞給跳轉的目標頁面，並在跳轉后的目標頁面進行展示

二、功能實現

1. 代碼實現

test1頁面

// pages/test1/test1.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    name:'Tom',
    age:'12'
  
  },

  buttonListener:function(){
    var that = this
    wx.navigateTo({
      url: '/pages/test2/test2?nameData=' + that.data.name + '&ageData=' + that.data.age
    })
  }
})

<!--pages/test1/test1.wxml-->
<view>
<text>姓名：{{name}}</text>
</view>
<view>
<text>年齡：{{age}}</text>
</view>
<button bindtap='buttonListener'>攜帶數據跳轉</button>

　

test2頁面

// pages/test2/test2.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    name:null,
    age:null
  
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      name:options.nameData,
      age:options.ageData
    })
  
  }
})

<!--pages/test2/test2.wxml-->
<view>
<text>姓名為：{{name}}</text>
</view>
<view>
<text>年齡為：{{age}}</text>
</view>

　　

2. 代碼分析

1. test1頁面

（1）Button點擊事件

　　案例中采用了點擊button觸發跳轉事件，所以要為button添加一個監聽函數。在test1.wxml頁面的<button>中添加bindTap屬性，來命名該button的監聽函數名稱。然后在test1.js中實現該監聽函數即可

（2）跳轉函數

　　微信小程序提供自帶的頁面跳轉函數，具體可參考微信小程序API；

　　跳轉時攜帶數據：　 url: '/pages/test2/test2?數據a的名稱=' + 數據a的內容 + '&數據b的名稱=' + 數據b的內容, 

 

2. test2頁面

（1）接收數據

　　使用onLoad函數在加載頁面時接收數據，通過options.數據a的名稱來獲取數據a的內容，並賦值給本地變量