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

由于项目需要，最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ，项目有十几个页面，那么页面间的传值被经常用到。在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法，在这个项目中我采用的是全局变量的方法

项目中使用的地方

下图为用户下单页面，下单时要选择配送地址，点击配送地址后跳入选择地址页面。

2.下图为用户选择地址页面，用户点击选择地址选项进行选择后再点击返回按钮回到用户下单页面

3.此为用户选择地址后返回的下单页面。此时下单页面的“选择地址”变为了用户自己的地址，便已经是完成了页面间的传值

全局变量传值具体说明

1.全局变量的定义

在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.html

<image src="{{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}}" /><view class="info"><view class='info_up'><text>{{item.name}}</text><text>{{item.sex}}</text><text> {{item.tel}}</text><text>{{item.frequent_address}}</text></view><text>地址：{{item.address}}{{item.address_detail}}</text></view>

location.js

 // 重新选择收获地址toCleanOrder: function(e) {var that = this;console.log(e);for (var i = 0; i < that.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,};},

在此页面中将后台传过来的地址信息定义到赋值给address、 address_detail、frequent_address、 index、name、sex、tel、
再把这些数据封装到app.appData.userAddress里面供另一个页面使用

3.用户下单页面选择地址块内容

payed.html

      <view class='adress' bindtap='adressClick'><image src="../../image/map2.png"></image><view wx:if="{{select_address==false}}">选择地址</view> <view wx:if="{{select_address==true}}"><view>{{payed_address}}{{payed_address_detail}}</view><view>{{payed_name}}-{{payed_sex}}-{{payed_tel}}</view></view></view><view class="launch" style="border:none"><image src="../../image/map2.png"></image><view>立即送出</view> </view>

payed.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',})}

在此页面中将上个页面封装到app.appData.userAddress中里面的值赋给此页面定义的 payed_address,payed_address_detail,payed_name,payed_sex, payed_tel变完成了页面间的数值传递。

微信小程序中使用全局变量解决页面的传值问题相关推荐

在微信小程序中怎么让一个页面的信息传递到另一个页面
首先需要在前台搭建好需要展示的那个页面.  <view class='nav'>输入个人信息</view> ...
如何将两个微信小程序合并_微信小程序--如何在两个页面之间传值
先看一下本周的部分的设计图在这里插入图片描述在这里插入图片描述在这里插入图片描述页面设计并不太复杂,主要是产品类型那块点击的样式,其余的都不太复杂,没啥好说的. 这次主要是想记录一下不同页面下 ...
微信小程序页面生成html,微信小程序教程系列之新建页面（4）
例如在web的开发中,新建一个页面只需要新建一个html文件即可. 但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习新建一个页面的步骤: 1> ...
微信小程序中全局变量userInfo在其它页面不可用（wx.getUserInfo为异步获取信息）
app.js中获取用户的openid和userinfo,并存储为全局变量,当在index中调用getApp().globalData.userInfo时却返回为空值: getUserInfo: fun ...
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化
微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化在小程序中,我们一般在app.js的onLaun ...
教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题背景为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后背景近期笔者在使用Taro进行微信小程序开发,当引 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
微信小程序中的页面文件和组件
页面文件页面构造器 JS文件页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
微信小程序中的html路径,新媒体运营：如何提取微信小程序路径到指定页面
目前微信小程序的功能已经非常的完善,可能平时我们都没有留意到.现在很多的app都有小程序版本,在微信端使用及推广都很便捷. 新媒体运营的同学们可能会发现一个问题,就是怎么才能直接到达小程序的一个指定页 ...

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

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

项目中使用的地方

全局变量传值具体说明

1.全局变量的定义

2.用户选择地址页面内容

3.用户下单页面选择地址块内容

微信小程序中使用全局变量解决页面的传值问题相关推荐

最新文章

热门文章