在微信小程序頁面間傳遞數據

在開發微信小程序過程之中，遇到這麼一些須要在微信小程序頁面之間進行數據的傳遞的狀況，也遇到了開發過程微信小程序限制狀況，特此作個總結。

全局變量之中傳遞參數數據

• 在微信小程序的開發過程之中，須要從A頁面跳轉到B頁面，而且把A頁面的數據傳遞到B頁面使用。可使用全局變量使用的方法，微信小程序官方提供app.js全局變量定義文件，裏面能夠定義須要在全局須要使用的變量與及變量值，例如用戶登陸以後，須要在全部頁面中使用用戶登陸狀態等。
• 微信小程序初始化時，首先會加載app.json全局樣式配置文件和全局變量文件，例以下面的globalData變量。
• 在app.js定義全局變量後，能夠在各頁面間直接加載全局變量，小程序提供了getApp()方法，能夠直接獲取到App({...})這個全局實例對象。

App({

  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 當小程序從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {
    
  },

  /**
   * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
   */
  onError: function (msg) {
    
  }，
  //全局變量
  globalData：{
      userInfo：null
    }
    
    })
  //page/index/index
  var app=getApp();//取得全局App({..})實例
  var userInfo=app.globalData.userInfo;//取得全局變量須要的值
複製代碼

使用本地緩存的方法保存全局變量,本地緩存是有存儲限制的，因此建議手動刪除再也不須要的緩存數據。

• 假如在A頁面保存須要的信息,以下圖就能夠直接保存鍵名爲cargo的數據。

var cargo={
    id:'12345',
    count:2,
    name:'xx書籍',
    price:85,
    picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
  key:"cargo",
  data:cargo
})
複製代碼

• 在B頁面直接可使用小程序的wx.getStorage並傳入要獲取到的鍵值名就能夠獲取本地緩存的數據。

wx.getStorage({
  key: 'cargo',
  success: function(res) {
      console.log(res.data)
  } 
})
複製代碼

經過在跳轉、重定向等轉變頁面時候，能夠直接經過url來傳送數據。

• 在A頁面傳遞數據到B頁面中使用的時候能夠直接使用如下數據。

  //page A
  wx.navigateTo({
    url: 'test?id=1'
  })
  //or page A
  wx.redirectTo({
    url: 'test?id=1'
   })
  // or page A
  wx.reLaunch({
    url: 'test?id=1'
  })
  //page B
  Page({
      onLoad: function(option){
        console.log(option.query)
      }
  })
  複製代碼

• wx.navigateTo和wx.redirectTo不能跳轉到tabar定義的頁面，查看了微信小程序提供了wx.switchTab進行跳轉，可是switchTab不能夠傳遞url參數，後面提供了wx.reLaunch函數。
• 往組件模板之中傳遞數據，能夠直接在模板的data-*中傳遞數據。

<template is="模板名" data="數據對象"/>
複製代碼

經過頁面棧獲取到上一頁面對數據進行修改

• 假設從A頁面跳轉到B頁面，而B頁面須要對A頁面的數據進行修改處理。

//pageA
    page({
       data:{
          user:kiwis
       }
    })
    //pageB
    page({
        updateData:function(){
          var pages=getCurrentPages();
          var prevPage=pages[pages.length-2];
          prevPage.setData({
               user:'LaternKiwis'
           })
        }
    })
複製代碼

對於全局變量的，也能夠直接經過第三方服務器用數據庫進行保存，是要使用的時候直接從數據庫裏面直接讀取全局變量。

• 使用wx.request提交與讀取數據

//提交數據給第三方服務器進行插入緩存數據庫處理
     wx.request({
        url: 'test.php', //僅爲示例，並不是真實的接口地址
        data: {
           username:'kiwis',
            gender:1,
            picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
        },
        method:'POST',
        header: {
          'content-type': 'application/json'
        },
       success: function(res) {
          console.log(res.data)
        }
    })
    //從緩存數據庫讀取數據
    wx.request({
        url: 'test.php', //僅爲示例，並不是真實的接口地址
        data: {
           username:'kiwis'
        },
        method:'GET',
        header: {
          'content-type': 'application/json'
        },
       success: function(res) {
          console.log(res.data)
        }
    })
複製代碼

• 在使用url進行參數傳遞時候，傳遞數據有字節限制；詳情能夠查閱微信小程序的文檔；在使用url傳參數數據時候，若是傳送的參數值是一個json數據，要使用JSON.stringify對json對象轉換成字符串的形式；在開發小程序過程當中，使用Nodejs獲取傳遞的參數時，沒有通過字符串序列化，在後臺獲取不到參數值，顯示爲null。因此須要JSON.stringify,而後在後臺邏輯之中使用JSON.parse序列化成對象使用。
• 小程序經過wx.navaigaTo跳轉到具體的頁面，並傳遞相關聯的參數數據過去案例以下，class爲item的view綁定了tap事件，傳遞數據經過data-* 來定義(*是自定義的儲存數據變量值，其中的item是真實數據)例如wxml頁面以下所示：

<view class="container">
  <view class="item" wx:for="{{items}}" data-video="{{item}}"  bindtap="play">
    <image src="{{item.image_url}}" class="newsPic"></image>
    <view class="source">
      <text>{{item.source}}</text>
      <text class="count">評論 {{item.comments_count}}</text>
    </view>
    <view class="icon" >
      <text>{{item.title}}</text>
      <image src="../../images/{{path}}" class="play"></image>
    </view>
  </view>
  </view>
複製代碼

• 在wx的js文件中，經過play事件經過下面的方式傳遞數據,經過event.currentTarget.dataset獲取咱們自定義的video變量:

  play:function(event){
        var video = event.currentTarget.dataset.video;
    console.log(video)
    // this.setData({
    //   path:'play.png'
    // })
    wx.navigateTo({
      url: '../logs/logs?imgUrl=' + video.image_url + '&source_url=' + video["source_url"] + "&title=" + video.title + "&group_id=" + video["group_id"]
    })
   }
  複製代碼

• 在要接收上一頁面傳遞過來的數據的頁面經過onLoad事件的options參數裏面包含了上一頁面全部傳遞過來的參數數據，能夠經過下面的方式進行獲取。

  onLoad:function(options){
    var that=this
    that.setData({
      imgUrl:options.imgUrl,
      title:options.title,
      videoSrc:options.videoSrc,
      group_id:options["group_id"]
    })
  },
  複製代碼