在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。比如:在A页面input输入框,输入电话号码,点击添加。需要在B页面电话区域中,显示刚刚输入的电话号码。因为这是两个页面,就需要先存储,再取值。微信小程序提供了数据存储的API,wx.setStorage(OBJECT)可以将数据存储在本地缓存中指定的key中,如果重复会覆盖掉原来该key对应的内容。思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮时,如果变量不为空,将变量的值存储在本地缓存中,在B页面,使用wx.getStorage(OBJECT)方法取值;ps:源代码在页面底部代码如下:对input输入框,绑定事件bindinput=”bindKeyInput”,设置value=”{{inputValue}}”,因为电话号码为数字,设置type=”number”。对按钮添加点击事件bindtap=”addbtn”在JS文件中添加代码B页面代码在JS文件中,声明变量addtel。在页面切换过来的时候,取出我们刚存储的值,赋值给变量addtel。在需要显示电话号码的地方,用变量来接收。在JS文件中添加代码data:{addtel:”}这里在onShow的方法中进行取值,当小程序启动,或从后台进入前台显示,就会触发onShow。不过,每个微信小程序都可以有自己的本地缓存,使用这些方法时,要注意本地缓存最大为10MB,wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)可以对本地缓存进行设置、获取和清理。。也可以使用wx.clearStorage(wx.clearStorageSync)来清理缓存。代码写完之后,进行测试。在输入框中输入电话号码,点击添加。OK,取值成功。A页面源代码:viewinputplaceholder=”输入手机号添加客户”type=”number”bindinput=”bindKeyInput”value=”{{inputValue}}”/buttontype=”warn”bindtap=”addbtn”添加/button/viewvarapp=getApp()Page({data:{inputValue:”},bindKeyInput:function(e){this.setData({inputValue:e.detail.value})},addbtn:function(){if(this.data.inputValue){wx.redirectTo({url:’../ordered/ordered’})wx.setStorage({key:”addTel”,data:this.data.inputValue})}else{wx.showModal({title:’手机号为空’,content:’请输入手机号码’,success:function(res){if(res.confirm){console.log(‘用户点击确定’)}}})}},onload:function(){//onload}})B页面源代码:viewnavigatortext电话/textviewtext{{addtel}}/textimagesrc=”/image/tel.png”/image/view/navigator/viewvarapp=getApp()Page({data:{addtel:”},onShow:function(){varthat=this;wx.getStorage({key:’addTel’,success:function(res){console.log(res.data)that.setData({addtel:res.data})}})}})其他相关资料可以查阅小程序官方API,
微信流水,微信小程序数据存储与取值
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信流水,微信小程序数据存储与取值
相关推荐
如何实现线上卖断货?私域流量与公域流量哪个重要?15013808327
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务