用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

微信小程序开发--页面传值

Rolan 2017-9-1 00:08

之前做小程序的时候就使用过页面的传值,但是一直没写写成博客。今天有个网友问我页面怎么传值,我就写写下来,让他去看看。之前做iOS开发的时候就有很多页面传值的应用,什么正向传值,反向传值,跨页面传值等。实 ...

之前做小程序的时候就使用过页面的传值,但是一直没写写成博客。今天有个网友问我页面怎么传值,我就写写下来,让他去看看。 
之前做iOS开发的时候就有很多页面传值的应用,什么正向传值,反向传值,跨页面传值等。实现的方式有:通知,本地储存,公开属性,代理,单例等。 
那么小程序有哪些呢?

小程序页面传值的方式

/*          
 *  页面传值:1.正向传值:上一页面 -->  下一页面
 *              1.url传值
 *              2.本地储存
 *              3.全局的app对象
 *          2.反向传值:下一页面 -->  上一页面
 *              1.本地储存
 *              2.全局的app对象
 */
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这里正向传值有3种,反向传值有2种,如有遗漏欢迎补充。 
这里的url传值只能是正向传值,其他的本地储存和全局的app对象既可以正向传值也可以反向传值。

项目结构

pages
  -- Apage  // 页面A
  -- Bpage  // 页面B
app.js
app.json
app.wxss
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

效果图

正向传值的实现

url传值

url传值,希望你已经看了wx.navigateTo(OBJECT)。 
这里写图片描述
这里说了页面路劲可以像GET请求一样拼接参数,那么怎么获取这个参数呢? 
这个不知道大家发现没,在每个页面的.js文件里面都默认会生成生命周期的几个方法,其中:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {

},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这个是待有参数options的。这里就需要利用它了。

A页面代码

var goodsid3 = 'A2B3'
wx.navigateTo({
  url: '../Bpage/index?goodsId=' + goodsid3,
})
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

B页面代码

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  // 这里是获取 url里面的参数
  var goodsid3 = options.goodsId;
  this.setData({
    AtB3: goodsid3
  })
},
    赞赏
    鲜花
    鲜花 (2)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (2 人)

    分享至 : QQ空间
    收藏
    原作者: 湖工电气 来自: csdn

    相关阅读