微信小程序中使用全局变量解决页面的传值问题1.由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序,项目有十几个页面,那么页面间的传值被经常用到。在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的是全局变量的方法
项目中使用的地方下图为用户下单页面,下单时要选择配送地址,点击配送地址后跳入选择地址页面。2.下图为用户选择地址页面,用户点击选择地址选项进行选择后再点击返回按钮回到用户下单页面3.此为用户选择地址后返回的下单页面。此时下单页面的“选择地址”变为了用户自己的地址,便已经是完成了页面间的传值全局变量传值具体说明1.全局变量的定义2.在app.js中的appData下定义userAddress设其值为空用来存储用户的地址信息
App({/***当小程序初始化完成时,会触发onLaunch(全局只触发一次)*/onLaunch:function(){},/***当小程序启动,或从后台进入前台显示,会触发onShow*/onShow:function(options){},/***当小程序从前台进入后台,会触发onHide*/onHide:function(){},/***当小程序发生脚本错误,或者api调用失败时,会触发onError并带上错误信息*/onError:function(msg){},appData:{userinfo:null,appstore_id:null,userAddress:null,}})2.用户选择地址页面内容location.htmlimagesrc="{{item.image}}"mode="widthFix"bindtap="toCleanOrder"data-index="{{item.index}}"data-id="{{item.id}}"data-name="{{item.name}}"data-tel="{{item.tel}}"data-sex="{{item.sex}}"data-address_detail="{{item.address_detail}}"data-addre="{{item.addre}}"data-image="{{item.image}}"data-address="{{item.address}}"data-frequent_address="{{item.frequent_address}}"/viewclass="info"viewclass='info_up'text{{item.name}}/texttext{{item.sex}}/texttext{{item.tel}}/texttext{{item.frequent_address}}/text/viewtext地址:{{item.address}}{{item.address_detail}}/text/viewlocation.js//重新选择收获地址toCleanOrder:function(e){varthat=this;console.log(e);for(vari=0;ithat.data.add_rece_address_list.length;i++){if(i==e.currentTarget.dataset.index){li[e.currentTarget.dataset.index].image="../image/check.png"}else{li[i].image="../image/uncheck.png"}}that.setData({add_rece_address_list:li})app.appData.userAddress={address:e.currentTarget.dataset.address,address_detail:e.currentTarget.dataset.address_detail,frequent_address:e.currentTarget.dataset.frequent_address,index:e.currentTarget.dataset.index,name:e.currentTarget.dataset.name,sex:e.currentTarget.dataset.sex,tel:e.currentTarget.dataset.tel,};},3.在此页面中将后台传过来的地址信息定义到赋值给address、address_detail、frequent_address、index、name、sex、tel、再把这些数据封装到app.appData.userAddress里面供另一个页面使用
3.用户下单页面选择地址块内容payed.htmlviewclass='adress'bindtap='adressClick'imagesrc="../../image/map2.png"/imageviewwx:if="{{select_address==false}}"选择地址/viewviewwx:if="{{select_address==true}}"view{{payed_address}}{{payed_address_detail}}/viewview{{payed_name}}-{{payed_sex}}-{{payed_tel}}/view/view/viewviewclass="launch"style="border:none"imagesrc="../../image/map2.png"/imageview立即送出/view/viewpayed.js/***页面的初始数据*/data:{isShow:true,currentTab:0,select_address:null,payed_address:null,payed_address_detail:null,payed_name:null,payed_sex:null,payed_tel:null,},/**生命周期函数--监听页面显示*/onShow:function(){if(app.appData.userAddress==null){this.setData({select_address:false})}else{this.setData({select_address:true,payed_address:app.appData.userAddress.address,payed_address_detail:app.appData.userAddress.address_detail,payed_name:app.appData.userAddress.name,payed_sex:app.appData.userAddress.sex,payed_tel:app.appData.userAddress.tel,})}},/**地址点击函数*/adressClick:function(e){wx.navigateTo({url:'../../location/location',})}4.在此页面中将上个页面封装到app.appData.userAddress中里面的值赋给此页面定义的payed_address,payed_address_detail,payed_name,payed_sex,payed_tel变完成了页面间的数值传递。
小程序动态全局变量传值-微信小程序中使用全局变量解决页面的传值问题-小程序页面传值
浏览量:1657
时间:
来源:Hariod
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。












