之前做小程序的时候就使用过页面的传值，但是一直没写写成博客。今天有个网友问我页面怎么传值，我就写写下来，让他去看看。
之前做iOS开发的时候就有很多页面传值的应用，什么正向传值，反向传值，跨页面传值等。实现的方式有：通知，本地储存，公开属性，代理，单例等。
那么小程序有哪些呢？
小程序页面传值的方式
/* * 页面传值:1.正向传值：上一页面 -- 下一页面 * 1.url传值 * 2.本地储存 * 3.全局的app对象 * 2.反向传值：下一页面 -- 上一页面 * 1.本地储存 * 2.全局的app对象 */这里正向传值有3种，反向传值有2种，如有遗漏欢迎补充。
这里的url传值只能是正向传值，其他的本地储存和全局的app对象既可以正向传值也可以反向传值。
项目结构
pages -- Apage // 页面A -- Bpage // 页面Bapp.jsapp.jsonapp.wxss效果图
正向传值的实现
url传值
url传值，希望你已经看了wx.navigateTo(OBJECT)。 
这里说了页面路劲可以像GET请求一样拼接参数，那么怎么获取这个参数呢?
这个不知道大家发现没，在每个页面的.js文件里面都默认会生成生命周期的几个方法，其中：
/** * 生命周期函数--监听页面加载 */onLoad: function (options) {},这个是待有参数options的。这里就需要利用它了。
A页面代码
var goodsid3 = 'A2B3'wx.navigateTo({ url: '../Bpage/index?goodsId=' + goodsid3,})B页面代码
/** * 生命周期函数--监听页面加载 */onLoad: function (options) { // 这里是获取 url里面的参数 var goodsid3 = options.goodsId; this.setData({ AtB3: goodsid3 })},本地储存
小程序-数据缓存这里大家自己去看。这里不做详细说明。
A页面代码
var goodsid1 = 'A2B1'wx.setStorageSync('goodsid1', goodsid1);B页面代码
var goodsid1 = wx.getStorageSync('goodsid1');this.setData({ AtB1: goodsid1})全局的app对象
这个大家看了小程序新建项目时生成的代码就知道怎么用了。
A页面代码
var app = getApp();app.dataA2B = 'A2B2';B页面代码
var app = getApp();var goodsid2 = app.dataA2B;反向传值的实现
本地储存
B页面代码
var goodsid = 'B2A1'wx.setStorageSync('B2A', goodsid);// 返回上一页wx.navigateBack();A页面代码
/** * 生命周期函数--监听页面显示 */onShow: function () { var goodsid = wx.getStorageSync('B2A'); this.setData({ dataBtA1: goodsid })},全局的app对象
这个大家看了小程序新建项目时生成的代码就知道怎么用了。
B页面代码
var app = getApp();app.dataB2A = 'B2A2';A页面代码
var app = getApp();/** * 生命周期函数--监听页面显示 */onShow: function () { var b2a = app.dataB2A; this.setData({ dataBtA2: b2a })},全部代码
app.js
App({ onLaunch: function() { //调用API从本地缓存中获取数据 }, dataA2B: '', dataB2A: ''})A页面
wxml
view我是页面A/viewview页面B传递给页面A的数据1：{{dataBtA1}}/viewview页面B传递给页面A的数据2：{{dataBtA2}}/viewbutton bindtap="btnClick"跳转到页面B/buttonjs
// pages/Apage/index.js/* * 页面传值:1.正向传值：上一页面 -- 下一页面 * 1.url传值 * 2.本地储存 * 3.全局的app对象 * 2.反向传值：下一页面 -- 上一页面 * 1.本地储存 * 2.全局的app对象 */ /* pages -- Apage // 页面A -- Bpage // 页面Bapp.jsapp.jsonapp.wxss */// 获取app.js 全局对象var app = getApp();Page({ /** * 页面的初始数据 */ data: { // 页面B 传递给 页面A的数据 dataBtA1: '', dataBtA2: '' }, // 页面跳转点击事件 btnClick: function(){ // 正向传值 页面传值的 第一种方式 var goodsid1 = 'A2B1' wx.setStorageSync('goodsid1', goodsid1); // 正向传值 页面传值的 第二种方式 app.dataA2B = 'A2B2'; // 正向传值 页面传值的 第三种方式 var goodsid3 = 'A2B3' wx.navigateTo({ url: '../Bpage/index?goodsId=' + goodsid3, }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { // 反向传值 第一种方式 var goodsid = wx.getStorageSync('B2A'); // 反向传值 第二种方式 var b2a = app.dataB2A; this.setData({ dataBtA1: goodsid, dataBtA2: b2a }) },})B页面
wxml
view我是页面B/viewview页面A传递给页面B的值1：{{AtB1}}/viewview页面A传递给页面B的值2：{{AtB2}}/viewview页面A传递给页面B的值2：{{AtB3}}/viewbutton bindtap="backClick"反向传值：页面B传值给页面A/buttonjs
// pages/Bpage/index.js// 获取app.js 全局对象var app = getApp();Page({ /** * 页面的初始数据 */ data: { // 接收页面A 传递给页面B的值 AtB1: '', AtB2: '', AtB3: '' }, // 页面B 返回页面A 按钮点击事件 backClick: function(){ // 反向传值 页面传值的 第一种方式 var goodsid = 'B2A1' wx.setStorageSync('B2A', goodsid); // 反向传值 页面传值的 第二种方式 app.dataB2A = 'B2A2'; // 返回上一页 wx.navigateBack() }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 正向传值 页面传值的 第一种方式 获取传递的值 var goodsid1 = wx.getStorageSync('goodsid1'); // 正向传值 页面传值的 第二种方式 获取传递的值 var goodsid2 = app.dataA2B; // 正向传值 页面传值的 第三种方式 获取传递的值 var goodsid3 = options.goodsId; this.setData({ AtB1: goodsid1, AtB2: goodsid2, AtB3: goodsid3 }) },})总结
关于页面传值，其实也就是搞清楚需求的前提下，利用已经掌握的技术来实现，只是这个应用是用来页面传值。
url传值
我们有时为了浏览器不缓存一些文件，我们在文件后面加上了时间戳，文件还是一样的；或者我们在已经打开的网页后面自己像GET请求方式那样添加参数，eg: https://www.baidu.com?baidu=李彦宏，和打开百度https://www.baidu.com页面还是一样的。
本地存储
我们一般是存储一些信息在本地，但是这个有存也有取，尽然可以存进去，我们只需要在需要的地方存取数据就行。这个还可以实现跨页面传值。
全局app对象
这个就是要搞清楚全局的概念和单例了。作为小程序开发，看看每次新建小程序项目时自动生成的代码就知道这个怎么用了。
至于以后的浏览器端的开发就需要自己去实现了。
总的来说页面传值基本就这，两个方向，三大类。搞清楚各自的特点就很好操作了。以后做浏览器端的项目开发时就很好处理了。
