微信小程序页面传参

使用方法传参&navigator标签

index.wxml

<view>
  <view bindtap="transform">
    文章1
  </view>
  
  <navigator url="/pages/consume/consume?id=2&name=like">
    <view>
      文章2
    </view>
  </navigator>
</view>

index.js

通过事件点击事件触发页面跳转，通过wx.navigateTo()方法实现页面跳转并传递参数。
复制了页面的所有代码，下面的代码中也包含了页面的一个生命周期
当页面处于当前页面会触发onLoad、onReady、onShow这三个，当页面跳转时当前页面会触发onHide
当页面跳转通过wx.redirectTo()方法的时候就会触发onUnload，整个页面被卸载
当跳转到下一个页面之后就不能再返回到之前的页面。
//index.js
//获取应用实例
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  transform(){
    wx.navigateTo({
      url: '/pages/consume/consume?id=1',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { 
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {  
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {   
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {   
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {   
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {  
  }
})

consume.wxml

<view>
  {{info}}
</view>

consume.js

// pages/consume/consume.js
页面在onLoad的方法中通过options接收到传递过来的参数然后通过
this.setData({
    info: options.id
  })

改变data中的数据最后通过渲染到页面看到效果

Page({

  /**
   * 页面的初始数据
   */
  data: {
   info:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  console.log(options.id);
  this.setData({
    info: options.id
  })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})