微信小程序> 小程序动态全局变量传值-微信小程序中使用全局变量解决页面的传值问题-小程序页面传值

小程序动态全局变量传值-微信小程序中使用全局变量解决页面的传值问题-小程序页面传值

浏览量:1518 时间: 来源:Hariod
微信小程序中使用全局变量解决页面的传值问题

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变完成了页面间的数值传递。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎