微信小程序页面之间三种传值方式_微信小程序页面传值

第一种：url传值

A页面部分js代码

Page({
  jumpPage(e) {
    var zhi = 'biubiubiu~~哔?哔';
    wx.navigateTo({
      url: '/pages/detail/detail?zhi=' + encodeURIComponent(zhi),
    }
})
1
2
3
4
5
6
7

B页面部分js代码

Page({
  /**
    * onLoad生命周期函数--监听页面加载
    */
  onLoad(options) {
  	const zhi = options.zhi || '';
  	console.log(decodeURIComponent(zhi)); // biubiubiu~~哔?哔
  },
})
1
2
3
4
5
6
7
8
9

第二种：将值缓存在本地，再从本地取值

A页面部分js代码

Page({
  jumpPage(e) {
    var zhi = "biubiubiu~~";
    wx.setStorageSync("zhi", zhi);//同步
    wx.navigateTo({
      url: '/pages/detail/detail', //这儿url不用带值了
    })
  }
})
1
2
3
4
5
6
7
8
9

B页面部分js代码

Page({
	/**
   	* onLoad生命周期函数--监听页面加载
   	*/
  onLoad(options) {
    var zhi = wx.getStorageSync("zhi");
    console.log(zhi); //biubiubiu~~
  },
})
1
2
3
4
5
6
7
8
9

本地缓存，不要超过10M大小，所以高清图片、视频、音频就不通过本地缓存传值了。

第三种：全局传值

app.js页面代码

App({
  globalData: {
    mockData: '模拟数据'
  }
})
1
2
3
4
5

其他页面js代码

const app = getApp();
Page({
  onLoad: function (options) {
  	// 获取globalData里面mockData的值
  	const mockData = app.globalData.mockData;
  	console.log(mockData); // 模拟数据
	
	// 重新赋值
	app.globalData.mockData = '重新赋值';
  }
})
1
2
3
4
5
6
7
8
9
10
11