在微信小程序页面间传递数据
【在微信小程序页面间传递数据】在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况,也遇到了开发过程微信小程序限制情况,特此做个总结。全局变量之中传递参数数据
- 在微信小程序的开发过程之中,需要从A页面跳转到B页面,并且把A页面的数据传递到B页面使用。可以使用全局变量使用的方法,微信小程序官方提供
app.js
全局变量定义文件,里面可以定义需要在全局需要使用的变量与及变量值,例如用户登录之后,需要在所有页面中使用用户登录状态等。 - 微信小程序初始化时,首先会加载app.json全局样式配置文件和全局变量文件,例如下面的
globalData
变量。 - 在
app.js
定义全局变量后,可以在各页面间直接加载全局变量,小程序提供了getApp()
方法,可以直接获取到App({...})
这个全局实例对象。
App({/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {},/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {},/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {},/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {},
//全局变量
globalData:{
userInfo:null
}})
//page/index/index
var app=getApp();
//取得全局App({..})实例
var userInfo=app.globalData.userInfo;
//取得全局变量需要的值
复制代码
使用本地缓存的方法保存全局变量,本地缓存是有存储限制的,所以建议手动删除不再需要的缓存数据。
- 假如在A页面保存需要的信息,如下图就可以直接保存键名为cargo的数据。
var cargo={
id:'12345',
count:2,
name:'xx书籍',
price:85,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
key:"cargo",
data:cargo
})
复制代码
- 在B页面直接可以使用小程序的
wx.getStorage
并传入要获取到的键值名就可以获取本地缓存的数据。
wx.getStorage({
key: 'cargo',
success: function(res) {
console.log(res.data)
}
})
复制代码
通过在跳转、重定向等转变页面时候,可以直接通过url来传送数据。
- 在A页面传递数据到B页面中使用的时候可以直接使用以下数据。
//page A wx.navigateTo({ url: 'test?id=1' }) //or page A wx.redirectTo({ url: 'test?id=1' }) // or page A wx.reLaunch({ url: 'test?id=1' }) //page B Page({ onLoad: function(option){ console.log(option.query) } }) 复制代码
wx.navigateTo
和wx.redirectTo
不能跳转到tabar定义的页面,查看了微信小程序提供了wx.switchTab
进行跳转,但是switchTab
不可以传递url参数,后面提供了wx.reLaunch
函数。- 往组件模板之中传递数据,可以直接在模板的
data-*
中传递数据。
复制代码
通过页面栈获取到上一页面对数据进行修改
- 假设从A页面跳转到B页面,而B页面需要对A页面的数据进行修改处理。
//pageA
page({
data:{
user:kiwis
}
})
//pageB
page({
updateData:function(){
var pages=getCurrentPages();
var prevPage=pages[pages.length-2];
prevPage.setData({
user:'LaternKiwis'
})
}
})
复制代码
对于全局变量的,也可以直接通过第三方服务器用数据库进行保存,是要使用的时候直接从数据库里面直接读取全局变量。
- 使用
wx.request
提交与读取数据
//提交数据给第三方服务器进行插入缓存数据库处理
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
username:'kiwis',
gender:1,
picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
},
method:'POST',
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
//从缓存数据库读取数据
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
username:'kiwis'
},
method:'GET',
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
复制代码
- 在使用url进行参数传递时候,传递数据有字节限制;详情可以查阅微信小程序的文档;在使用url传参数数据时候,如果传送的参数值是一个json数据,要使用
JSON.stringify
对json对象转换成字符串的形式;在开发小程序过程中,使用Nodejs获取传递的参数时,没有经过字符串序列化,在后台获取不到参数值,显示为null。所以需要JSON.stringify
,然后在后台逻辑之中使用JSON.parse
序列化成对象使用。 - 小程序通过
wx.navaigaTo
跳转到具体的页面,并传递相关联的参数数据过去案例如下,class为item的view绑定了tap事件
,传递数据通过data-*
来定义(*是自定义的储存数据变量值,其中的item是真实数据)例如wxml页面如下所示:
{{item.source}}
评论 {{item.comments_count}}
{{item.title}}
复制代码
- 在wx的js文件中,通过play事件通过下面的方式传递数据,通过
event.currentTarget.dataset
获取我们自定义的video变量:play:function(event){ var video = event.currentTarget.dataset.video; console.log(video) // this.setData({ //path:'play.png' // }) wx.navigateTo({ url: '../logs/logs?imgUrl=' + video.image_url + '&source_url=' + video["source_url"] + "&title=" + video.title + "&group_id=" + video["group_id"] }) } 复制代码
- 在要接收上一页面传递过来的数据的页面通过
onLoad
事件的options
参数里面包含了上一页面所有传递过来的参数数据,可以通过下面的方式进行获取。onLoad:function(options){ var that=this that.setData({ imgUrl:options.imgUrl, title:options.title, videoSrc:options.videoSrc, group_id:options["group_id"] }) }, 复制代码
推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 你到家了吗
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 闲杂“细雨”
- 杜月笙的口才
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 赢在人生六项精进二阶Day3复盘