E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发(十六)页面传值

E企盈直播平台营销卖货系统

之前做小程序的时候就使用过页面的传值,但是一直没写写成博客。今天有个网友问我页面怎么传值,我就写写下来,让他去看看。 之前做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.jsApp({  onLaunch: function() {    //调用API从本地缓存中获取数据  },  dataA2B: ”,  dataB2A: ”})A页面wxmlview我是页面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页面wxmlview我是页面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对象这个就是要搞清楚全局的概念和单例了。作为小程序开发,看看每次新建小程序项目时自动生成的代码就知道这个怎么用了。 至于以后的浏览器端的开发就需要自己去实现了。总的来说页面传值基本就这,两个方向,三大类。搞清楚各自的特点就很好操作了。以后做浏览器端的项目开发时就很好处理了。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发(十六)页面传值
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏