小程序页面间数据传输模板

缓存传输数据

get方式传参

全局变量传参

index页面

index.wxml

<view>
  <input type="text" name="username" placeholder="请输入内容" bindinput="getinput"/js>
  <button bindtap="click1">通过缓存传输数据到test页面</button>
  <button bindtap="click2">通过get方式传输数据到test页面</button>
  <button bindtap="click3">通过全局变量传输数据到test页面</button>
</view>

index.js

const app = getApp()
Page({
  data: {
    name:"",
  },

  click1(){
    var name1 =  this.data.name;
    wx.setStorageSync('name',name1);
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },

  click2(){
    var name2 = this.data.name;
    wx.reLaunch({
      url: '/pages/test/test?name='+name2,
    })
  },

  click3(){
    var name3 = this.data.name;
    app.globalData.name = name3;
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },

  getinput(e){
    this.setData({
      name:e.detail.value
    })
  },

})

test页面

test.wxml

<view>
  <text>跳转页面</text>
  <view>
    接收由Page页面传输过来的数据
  </view>
  <view>
    <view>方式一：{{name1}}</view>
    <view>方式二：{{name2}}</view>
    <view>方式三：{{name3}}</view>
  </view>
</view>

test.js

// pages/test/test.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name1:"",
    name2:"",
    name3:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    var name1 = wx.getStorageSync('name');
    this.setData({
      name2:options.name,
      name3:app.globalData.name,
      name1
    })
  },

})

全局变量

app.js

  globalData: {
    userInfo: null,
    name:"jack"
  }