文本 |

最近我所在团队在开发一个小程序，遇到了一个困扰前端很久的课题：页面间如何传递数据和变量？

一开始我们选择使用路径传递的方式来解决问题，但是众所周知，HTTP Get请求URL的最大长度因浏览器而异，大部分浏览器只能接受7000个字符的数据。

因此我们认为这种方法不可靠。

经过对官网的研究，我发现了两种方法可以“相对优雅”地完成这个任务。

使用全局变量

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

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>

接下来使用模板和属性来声明要使用的模板，然后传入模板所需的数据。例如：

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

为 item 分配一个值来显示模板数据。

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

这瞬间就解决了页面值传递问题。

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

本文经智小程序授权转载，关注微信公众号并在微信后台回复“带参数的二维码”，即可获取小程序生成带参数二维码教程。