开发 | 如何在小程序页面之间，传递数据和变量？

文 | Angeladaddy

最近组里开发小程序，遇到了一个困扰前端很长时间的话题：页面之间，如何传递数据和变量？

刚开始，我们选择使用路径传参解决。但是众所周知，各浏览器 HTTP Get 请求 URL 最大长度并不相同，大部分浏览器只能接受 7000 个字符的数据。

所以，我们觉得这个方式并不靠谱。

研究了一下官网，发现有两种方式可以「比较优雅」地完成这个任务。

使用全局变量

在项目 app.js 中定义 globalData（全局变量）。

App({
 globalData:{
   userInfo:'angeladaddy'
  }
});

在需要的地方，我们可以随意调用这个全局变量。

getGlobalVar:function(){
  var that=this;
  that.setData({
    globalvar_str:JSON.stringify(getApp().globalData)
  }) 
}

当然，赋值也是没问题的。

onLoad:function(options){
 getApp().globalData.userInfo+=' is an awesome man';
},

来试试效果：

使用模板

在官方文档中，模板的使用需要先定义一个模板，要用到 name 属性。

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

接着，使用模板和 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。比如这样：

<template is="msgItem" data="{{...item}}"/>

给 item 赋值，以显示模板数据。

Page({
data: {
 item: {
   index: 0,
   msg: 'this is a template',
   time: '2016-09-15'
 }
}
})

这样就「duang」地一下，解决了页面传值问题。

另外，既然小程序可以使用 ES6 的所有特性，那么那个 var that=this 又是什么鬼？为何不能用箭头函数解决作用域问题？大家可以自行尝试一下。

本文由知晓程序授权转载，关注微信号 zxcx0101，在微信后台回复「带参二维码」，获取生成小程序带参二维码教程。