在開發(fā)微信小程序過程之中，遇到這么一些需要在微信小程序頁面之間進行數(shù)據(jù)的傳遞的情況讼稚，也遇到了開發(fā)過程微信小程序限制情況椭赋，特此做個總結(jié)。

• 全局變量之中傳遞參數(shù)數(shù)據(jù)
  • 在微信小程序的開發(fā)過程之中雇庙，需要從A頁面跳轉(zhuǎn)到B頁面，并且把A頁面的數(shù)據(jù)傳遞到B頁面使用灶伊〗埃可以使用全局變量使用的方法，微信小程序官方提供app.js全局變量定義文件谁帕，里面可以定義需要在全局需要使用的變量與及變量值峡继，例如用戶登錄之后，需要在所有頁面中使用用戶登錄狀態(tài)等匈挖。
  • 微信小程序初始化時碾牌，首先會加載app.json全局樣式配置文件和全局變量文件，例如下面的globalData變量儡循。
  • 在app.js定義全局變量后舶吗，可以在各頁面間直接加載全局變量，小程序提供了getApp()方法择膝，可以直接獲取到App({...})這個全局實例對象誓琼。

App({

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

  /**
   * 當小程序啟動，或從后臺進入前臺顯示腹侣，會觸發(fā) onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 當小程序從前臺進入后臺叔收，會觸發(fā) onHide
   */
  onHide: function () {
    
  },

  /**
   * 當小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時傲隶，會觸發(fā) onError 并帶上錯誤信息
   */
  onError: function (msg) {
    
  }饺律，
  //全局變量
  globalData：{
      userInfo：null
  }
   
})

//page/index/index
var app=getApp();//取得全局App({..})實例
var userInfo=app.globalData.userInfo;//取得全局變量需要的值

• 使用本地緩存的方法保存全局變量,本地緩存是有存儲限制的，所以建議手動刪除不再需要的緩存數(shù)據(jù)跺株。
  • 假如在A頁面保存需要的信息,如下圖就可以直接保存鍵名為cargo的數(shù)據(jù)复濒。

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并傳入要獲取到的鍵值名就可以獲取本地緩存的數(shù)據(jù)。

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

• 通過在跳轉(zhuǎn)乒省、重定向等轉(zhuǎn)變頁面時候巧颈，可以直接通過url來傳送數(shù)據(jù)。
  • 在A頁面?zhèn)鬟f數(shù)據(jù)到B頁面中使用的時候可以直接使用以下數(shù)據(jù)袖扛。

  //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不能跳轉(zhuǎn)到tabar定義的頁面砸泛，查看了微信小程序提供了wx.switchTab進行跳轉(zhuǎn)，但是switchTab不可以傳遞url參數(shù)攻锰，后面提供了wx.reLaunch函數(shù)晾嘶。
  • 往組件模板之中傳遞數(shù)據(jù)，可以直接在模板的data-*中傳遞數(shù)據(jù)娶吞。

  <template is="模板名" data="數(shù)據(jù)對象"/>
  

• 通過頁面棧獲取到上一頁面對數(shù)據(jù)進行修改
  • 假設從A頁面跳轉(zhuǎn)到B頁面，而B頁面需要對A頁面的數(shù)據(jù)進行修改處理械姻。

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

• 對于全局變量的妒蛇，也可以直接通過第三方服務器用數(shù)據(jù)庫進行保存，是要使用的時候直接從數(shù)據(jù)庫里面直接讀取全局變量楷拳。
  • 使用wx.request提交與讀取數(shù)據(jù)

  //提交數(shù)據(jù)給第三方服務器進行插入緩存數(shù)據(jù)庫處理
   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)
      }
  })
  //從緩存數(shù)據(jù)庫讀取數(shù)據(jù)
  wx.request({
      url: 'test.php', //僅為示例，并非真實的接口地址
      data: {
         username:'kiwis'
      },
      method:'GET',
      header: {
        'content-type': 'application/json'
      },
     success: function(res) {
        console.log(res.data)
      }
  })
  

• 在使用url進行參數(shù)傳遞時候欢揖，傳遞數(shù)據(jù)有字節(jié)限制陶耍；詳情可以查閱微信小程序的文檔；在使用url傳參數(shù)數(shù)據(jù)時候她混，如果傳送的參數(shù)值是一個json數(shù)據(jù)烈钞，要使用JSON.stringify對json對象轉(zhuǎn)換成字符串的形式；在開發(fā)小程序過程中坤按，使用Nodejs獲取傳遞的參數(shù)時毯欣，沒有經(jīng)過字符串序列化，在后臺獲取不到參數(shù)值臭脓，顯示為null酗钞。所以需要JSON.stringify,然后在后臺邏輯之中使用JSON.parse序列化成對象使用。
• 小程序通過wx.navaigaTo跳轉(zhuǎn)到具體的頁面，并傳遞相關(guān)聯(lián)的參數(shù)數(shù)據(jù)過去案例如下砚作，class為item的view綁定了tap事件窘奏，傳遞數(shù)據(jù)通過data-* 來定義(*是自定義的儲存數(shù)據(jù)變量值，其中的item是真實數(shù)據(jù))例如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事件通過下面的方式傳遞數(shù)據(jù),通過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"]
    })
   }
  

• 在要接收上一頁面?zhèn)鬟f過來的數(shù)據(jù)的頁面通過onLoad事件的options參數(shù)里面包含了上一頁面所有傳遞過來的參數(shù)數(shù)據(jù)着裹，可以通過下面的方式進行獲取。

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