小程序页面间传递数据的方式

阅读 14658  ·  发布日期 2020-08-24 17:26  ·  温州雄霸网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】 最近在做小程序项目,发现小程序的页面间经常需要传递一些数据。根据自己的了解和熟悉,针对不同的数据要求,总结到有几种不同的传数据方式,下面做一下简单的介绍归纳。第一种:页面跳转时通过url传递使用wx.navigateTo 与 wx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...

小程序页面间传递数据的方式

最近在做小程序项目,发现小程序的页面间经常需要传递一些数据。
根据自己的了解和熟悉,针对不同的数据要求,总结到有几种不同的传数据方式,下面做一下简单的介绍归纳。
第一种:
页面跳转时通过url传递使用wx.navigateTo 与 wx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad 的时候获取且初始化。
//pageA.js // Navigate wx.navigateTo({
url: '
../pageB/pageB?name=lin&gender=male'
, }
) // Redirect wx.redirectTo({
url: '
../pageB/pageB?name=lin&gender=male'
, }
) // pageB.js ... Page({
onLoad: function(option){
console.log(option.name + '
is'
+ option.gender);
this.setData({
option: option }
);
}
}
)需要注意的问题:
使用wx.navigateTo 与 wx.redirectTo时,不允许跳转到 tab 所包含的页面;onLoad只执行一次;适用:
这种方式一般适用于少数页面之间需要少量数据传递,如B页面需要A页面中的1-2个数据等等。
第二种:
使用全局变量来传递在 app.js 文件中定义全局变量 globalData,旧页面将要传递的数据赋值存放在里面,新页面调用全局变量获取传递数据值。
// app.js App({
// 全局变量 globalData: {
name: null }
}
) //pageA.js ··· getApp().globalData.name = "lin";
//pageB.js ··· this.setData({
userName: getApp().globalData.name }
);
要注意的问题:
使用的时候,直接使用 getApp() 拿到存储的信息。
适用:
这种方式一般适用于多个页面或者全部页面都需要获取使用同一个数据,比如一开始进入首页就获取到的用户信息等;第三种:
使用本地缓存使用小程序中的本地缓存Storage,旧页面将传递数据存入缓存中,新页面通过调用获取缓存的API得到数据。
//pageA.js ··· wx.setStorageSync('
sessionId'
, res.sessionId);
//pageB.js ··· var sessionId = wx.getStorageSync('
sessionId'
);
要注意的问题:
Storage每次存入会覆盖掉原来该 key 对应的内容。
如果用户主动删除小程序或因存储空间原因被系统清理,Storage中数据将被清除。
单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
适用:
这种方式一般适用于即使小程序退出然后再重新进入,也要保留的数据,类似于登录状态的保留等。
推荐教程:
《微信小程序》以上就是小程序页面间传递数据的方式的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
小程序本文转载于:
简书,如有侵犯,请联系a@php.cn删除
上一篇:
八分钟带你入门微信小程序开发
下一篇:
小程序画布canvas隐藏的问题解决相关文章相关视频新手必备的微信小程序开发指南微信小程序省市联动功能微信小程序中自定义select下拉选项框组件微信小程序必知必会面试题小程序页面间传递数据的方式小程序API接口(一)小程序API接口(二)第三方平台开发小程序(一) [温州做小程序]