微信小程序中使用全局變量解決頁面的傳值問題

 

由於項目需要，最近便在做 一個類似於美團的餐飲平台的的微信微信小程序 ，項目有十幾個頁面，那么頁面間的傳值被經常用到。在小程序中頁面間的傳值主要有使用全局變量和本地存儲這兩種方法，在這個項目中我采用的是全局變量的方法

項目中使用的地方

下圖為用戶下單頁面，下單時要選擇配送地址，點擊配送地址后跳入選擇地址頁面。

下圖為用戶選擇地址頁面，用戶點擊選擇地址選項進行選擇后再點擊返回按鈕回到用戶下單頁面

此為用戶選擇地址后返回的下單頁面。此時下單頁面的“選擇地址”變為了用戶自己的地址，便已經是完成了頁面間的傳值

全局變量傳值具體說明

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變完成了頁面間的數值傳遞。