微信小程序页面的传值取值.
小程序传递参数的方式有三种:
(1)通过在App.js中设置全局变量
(2)通过拼接URL直接传递
(3)通过数据缓存存储再获取
1.app.js
通常把不更改的常量数据放在app.js的Data中,在各个页面都可以通过App实例获取Data的数据.
var app = getApp(); var data = app.data;
2.wx.navigateTo({})中URL携带参数
wx.navigateTo({ url: 'test?id=1' });
3.数据缓存方式
①wx.setStorageSync(KEY,DATA)存储数据
try { wx.setStorageSync('key', 'value') } catch (e) { }②wx.getStorageSync(KEY)获取数据
try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { // Do something when catch error } 或 wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) } })
1. 传递String字符串
Page({ data: { testStr: 'xiaochengxu' }, next: function(e){ wx.navigateTo({ url: '/test/test?str='+this.data.testStr }) } })
Page({ onLoad:function(options){ console.log("接收到的参数是str="+options.str); } })
打印内容:接收到的参数是str=xiaochengxu
2. 传递对象
Page({ data: { testData:{name:'username', password:'password'} }, next: function(e){ wx.navigateTo({ url: '/test/test?testData='+JSON.stringify(this.data.testData) }) } })
Page({ data:{ testData:null }, onLoad:function(options){ console.log("接收到的参数是testData="+options.testData); this.data.testData = JSON.parse(options.testData); }})
打印内容:接收到的参数是testData={"name":"username","password":"password"}
3. 传递数组集合
Page({ data: { list:['item-A','item-B'] }, next: function(e){ wx.navigateTo({ url: '/test/test?list='+JSON.stringify(this.data.list), }) } })
Page({ data:{ list:[] }, onLoad:function(options){ console.log("接收到的参数是list="+options.list); this.data.list = JSON.parse(options.list); }})打印内容:接收到的参数是list=["item-A","item-B"]
使用的话,就给数组赋值就可以了,看这个示例
onLoad
:
function
(options
)
{
// 页面初始化 options为页面跳转所带来的参数
console
.log
(
"接收到的参数是list="
+ options
.goodsList
);
this
.setData
({
list
: JSON
.parse
(options
.goodsList
)
})
}