1
收藏
评论

页面数据(参数)传输的方式

小程序页面数据(参数)传输方式总结。

上一篇,我们学会了如何制作简单的分享卡片,并保存在相册中。示例中,我们单独创建了 canvas 页面,卡片内的数据是直接在页面中写死的,当然这只是作为示例,实际情况中,我们的数据应该是从其他页面传输过来。所以,今天就来谈谈小程序页面之间传参的方式都有哪些?

下面就接着上一篇的例子,继续完善程序,我们在 pages 目录下,新建 days 目录,然后在 days 目录下,新建 Page index 用来显示日期列表,目录结构如下图:

index 页面的代码实现,就不多介绍了,它就是一个显示日期的列表,大概样子如下:

建议你能够照着上面这个样子,把代码写出来,不要认为看着简单,就不想动手,写出来才是自己的。

这里只贴出 wxml 的代码如下:

<view class="list" bindtap='goto' data-title="新中国成立 70 周年" data-date="2019-10-01" data-isPast="{{ true }}" data-number="26">
  <view class="title">新中国成立 70 周年</view>
  <view class="danger">26</view>
  <view class="date-desc">还剩天数</view>
  <view class="desc">2019-10-01</view>
</view>

数据是写死在页面中的,这里先不用管,重点看数据的传输,这里的数据传输有两层:

第一层,是从视图层传输到逻辑层,采用的方法,前面已经介绍过,就是通过 data-* 属性的方式,例如上面例子中,data-titledata-datedate-isPast以及date-number,分别将 tiltedateisPastnumber 字段传输到逻辑层。

逻辑层如何获取呢?看 js 中 goto 函数的代码:

goto: function(e){
  let date = e.currentTarget.dataset.date;
  let title = e.currentTarget.dataset.title;
  let isPast = e.currentTarget.dataset.ispast; // 注意这里的参数名
  let number = e.currentTarget.dataset.number;
  console.log(e.currentTarget.dataset); // 打印出来试试
  wx.navigateTo({
    url: '../canvas/canvas?title=' + title + '&date=' + date + '&isPast' + isPast + '&number=' + number
  })
},

上面这个函数做的事情,就是参数的「一收一发」,获取页面传过来的参数,然后转发出去。需要注意的一点是data-* 参数名的一些规则,如果 * 中有大写字母,将自动转成小写;如果出现短横杠,会自动转成驼峰变量,例如:data-is-past 变成 isPast,记不住没关系,打印出来试试就知道了。

第二层,是从 A 页面传输到 B 页面,页面的跳转,官方提供了以下几种 API:

具体用法看文档,这里我们使用的是 wx.navigateTo,在 URL 后面加上 ?key1=value1&key2=value 的方式,就可以将参数传输到下一个页面。

紧接着的问题就是,下一个页面如何接收参数,答案是:通过页面的 onLoad 事件函数。

打开 canvas 页面的 js 文件,编辑 onLoad 函数如下:

onLoad: function (options) {
  let title = options.title;
  let date = options.date;
  let isPast = options.isPast;
  let number = options.number;
  if(title && date){
    this.setData({
      title,
      date,
      isPast,
      number
    })
  }
},

看代码一目了然,参数直接保存在 options 对象中了。

写到这里,我们的 canvas 页面,可以算作是动态页面了,通过其他页面传输过来的参数,显示不一样的卡片。

总结

到这篇文章为止,我们已经知道了,小程序页面数据 or 参数传输的一些方式,总结一下就是:

  1. 将数据从逻辑层传输到视图层,通过 this.setData() 函数;
  2. 将数据从视图层传输到逻辑层,通过 data-* 的方式;
  3. 将数据从 A 页面传输到 B 页面,通过页面跳转 url 参数的方式;

接收数据的方法,对应为:

  1. 视图层使用 {{ value }} 语法;
  2. 使用回调函数的 e 对象,参数保存在 e.currentTarget.dataset
  3. 使用页面的 onLoad 事件函数,参数保存在 options 对象里

以上方式,应该能够满足绝大多数页面数据传输的需求,当然还有一些极端情况,例如:url 中保存参数值的长度是有限度的。如果出现类似情况,该如何解决?

其实,我们还有更多更灵活的方式,例如借助缓存的功能,再或者借助数据库。后续如果涉及到具体案例,会再进行介绍。

更多文章:https://github.com/pengloo53/miniprogram-articles

最后一次编辑于  09-05  (未经腾讯允许,不得转载)
复制链接赞 1收藏投诉评论

5 个评论

  • Wang
    Wang
    09-06

    好基础啊

    09-06
    赞同
    回复 1
    • 鲁鹏
      鲁鹏
      09-06
      小程序开发有不基础的嘛
      09-06
      回复
  • 騁爲
    騁爲
    09-12

    URL传参适合基础数据类型,跨页面传递对象的时候,我还是喜欢globalData

    09-12
    赞同
    回复 2
    • 鲁鹏
      鲁鹏
      09-12
      globalData 太多对象的话,会混乱的哦,不同场景不同用法,有时我直接使用缓存了
      09-12
      回复
    • 騁爲
      騁爲
      09-12回复鲁鹏
      太多了确实不好管理,不过目前传递的数据还是比较少,我一般都是在A页面设置,B页面取出后并删除globalData数据。用缓存我怕频繁读写文件导致性能问题。
      09-12
      回复