微信小程序頁面間的數據傳遞和數據共享

方法一：利用url

如下圖所示，點擊更多按鈕跳轉到新頁面，並將對應的電影分類參數傳遞到新頁面，例如圖中應該傳遞的參數爲“豆瓣電影Top250”。

如下代碼所示，首先在.wxml文件中找到更多按鈕並綁定相應方法，接着通過data-name指定所傳參數的名字，如圖所傳參數名爲：category。

<view class="movie-header">
      <text class="header-title">{{categoryTitle}}</text>
      <text class="header-more" catchtap="onMore" data-category="{{categoryTitle}}">更多 ></text>
</view>

接着在.js文件中編寫相應的方法，在url中帶上相應參數即可，在url中問號之後的部分都是參數。

onMore: function(event){
    var category = event.currentTarget.dataset.category;
    wx.navigateTo({
      url: '../more-movie/more-movie?category=' + category,
    })
}

在這裏我們使用的路由函數是wx.navigateTo。但是如果所要跳轉的頁面帶有tabBar，那麼路由函數必須使用wx.switchTab。

onLoad: function (options) {
    var category = options.category;
}

 跳轉到新頁面後，只需在onLoad函數加上上面代碼即可獲取所傳參數。

 方法二：利用緩存

如下圖所示，我們在歡迎頁面獲取了用戶的暱稱和頭像，但是我們在其他頁面也需要使用該暱稱，最容易想到的辦法就是再次向服務器請求數據，但是這種方法並不高明，重複地請求數據是沒有必要的。我們可以將數據保存在緩存中，需要使用的時候從緩存中提取即可。

 

 

 微信小程序提供的緩存方法有同步和異步之分，一般情況下我們推薦使用同步方法，如下代碼所示，我們獲取了用戶信息並將暱稱保存在緩存中。

onLoad: function (options) {
    wx.getUserInfo({
      success: function (res) {
        wx.setStorageSync("userName", res.userInfo.nickName);
      }
    })
 }

獲取緩存的方法很簡單，在任意需要使用緩存數據的頁面.js文件中加上如下代碼即可。這裏我們將暱稱保存爲userName，因此當需要使用時只需wx.getStorageSync("userName")即可。

var userName = wx.getStorageSync("userName");

方法三：利用全局變量

首先需要知道的是，全局變量在app.js中定義。如下圖所示，我們需要在不同頁面獲取音樂的播放狀態。

 

 我們定義一個全局變量g_isPlayingMusic來保存播放狀態，默認爲false。

App({
  onLaunch: function () {

  },
  globalData: {
    g_isPlayingMusic: false
  }
})

在需要獲取該變量的頁面.js文件中按照如下代碼即可獲取。

var app = getApp();
Page({

  data: {
    isPlayingMusic: app.globalData.g_isPlayingMusic
  }
}）

獲取之後進行修改也很簡單，只需賦值即可。

app.globalData.g_isPlayingMusic = true;