微信小程序 - 页面间有哪些传递数据方法?
1. 使用全局变量实现数据传递2. 页面跳转或重定向时,使用url带参数传递数据3. 使用组件模板 template传递参数4. 使用缓存传递参数5. 使用数据库传递数据1. 全局APPapp.js和app.wxss中的代码都是全局生效的,所以我们可以利用这一点儿,在不同页面之间进行传值。//往globalData设置值getApp().globalData.data = "12345";//取g
1. 使用全局变量实现数据传递
2. 页面跳转或重定向时,使用url带参数传递数据
3. 使用组件模板 template传递参数
4. 使用缓存传递参数
5. 使用数据库传递数据
1. 全局APP
app.js和app.wxss中的代码都是全局生效的,所以我们可以利用这一点儿,在不同页面之间进行传值。
//往globalData设置值
getApp().globalData.data = "12345";
//取globaData的值
var data = app.globalData.data;
App({
globalData: {
data:XXX
}
})
GlobalData可以随时在页面中读取和存储数据,比Storage方便很多。
但是,在其他页面读取以及修改globalData。不论是读取还是修改,首先需要在应用的页面js文件中,引用app()实例,所以在js文件中,第一句要写上这句:
var app = getApp();
2. URL传值
这种方式最常用,比如:
wx.navigateTo({
url: '../detail/detail?cid='+cid+'&token='+token
})
这里面直接通过跳转页面的URL进行传值,然后在另一个页面进行接收:
onLoad: function (opt) {
console.log('cid =' + opt.cid);
console.log('access_token =' + opt.access_token);
}
传递字符串
var model = this.data.str;
wx.navigateTo({
url: '../detail/detail?model=' + model,
})
在下个页面的onload中获取
onLoad: function (options) {
var bean = options.model;
console.log(options.model)
this.setData({
model:bean
})
}
传递对象
通过提供的JSON.stingify方法,将对象转换成字符串后传递
var model = JSON.stringify( model);
wx.navigateTo({
url: '../detail/detail?model=' + model,
})
//接收
onLoad: function (options) {
//将字符串转换成对象
var bean = JSON.parse(options.model);
}
注意,传递对象有时会出现错误Uncaught SyntaxError: Unexpected end of input
使用encodeURICompoent与decodeURIComponent来解决即可
//传递时
//encodeURICompoent JSON.stringify(model);
var model = JSON.stringify( model);
wx.navigateTo({
url: '../detail/detail?model=' + encodeURICompoent(JSON.stringify(model)),
})
//接收时
//JAON.parse(decodeURIComponent(model));
onLoad: function (options) {
var bean = JSON.parse(decodeURIComponent(options.model));
}
这种传值方式只适合值比较少的时候使用,传值比较多的时候,还是建议写本地缓存~
3. 使用组件模板 template传递参数
父组件向子组件传值( properties )
1、父组件的json文件中声明对引用子组件
// parents.json
{
"usingComponents": {
"w-child": "/components/child/child"
}
}
2、父组件的wxml中使用子组件
父组件中使用子组件标签,并在标签上写自定义属性对子组件进行传递数据
<!-- parents.wxml-->
<w-child fatherName='winne' fatherAge='22'></w-child>
3、子组件在js中获取父组件中传过来的值
properties是组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
// child.js
properties: { // 在这里拿到了数据之后可以直接使用了(在wxml模板渲染,或者js中使用this.data.fatherName/this.properties.fatherName 都能获取到),不要直接修改properties属性中的数据
fatherName: {
type: String
},
fatherAge: Number
}
官网提示:在 properties 定义段中,属性名采用驼峰写法(fatherName);在 wxml 中,指定属性值时则对应使用连字符写法(father-name=“winne”),应用于数据绑定时采用驼峰写法(attr="{{fatherName}}")。
其实我们也可以全都使用驼峰写法(可能会低版本的微信不支持)。
详细组件的配置解析请看官网:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
子组件向父组件传值( this.triggerEvent() )
需要子组件手动触发事件,然后父组件监听事件
1、子组件触发自定义事件,传递数据给父组件
<!-- child.wxml-->
<view class="navi-item" data-index="0" bindtap="onChangeAnchor">tab</view>
2. 子组件在点击事件中主动触发自定义事件
// child.js
onChangeAnchor(e) {
var index = e.target.dataset.index
//子组件传值给父组件
let myEventDetail = { // 需要传递什么数据就在这个对象中写
val: index
}
// myEventDetail 对象,提供给事件监听函数的参数数据
// changeNaviIndex 是自定义名称事件,父组件中监听使用
this.triggerEvent('changeNaviIndex', myEventDetail)
}
3. 父组件wxml中监听子组件的自定义事件
<!-- parents.wxml-->
<!-- 注意这里写的事件监听名字-->
<w-child bind:changeNaviIndex="onGetIndex" />
3. 父组件的js中书写事件函数,获取子组件传递过来的数据
// parents.js
onGetIndex( paramData) { // paramData参数就是子组件的this.triggerEvent()
console.log(paramData.detail.val) // 0
}
4. 本地缓存
小程序API提供了本地缓存数据的API,默认可以缓存10M的数据,如下:
wx.setStorageSync('checkin', checkin);
checkin是一个object,在需要的页面直接调用wx.getStorageSync即可获取,这样就解决了传值较少的问题了。
https://blog.csdn.net/weixin_34218579/article/details/86977664
更多推荐


所有评论(0)