微信小程序——頁面之間傳遞值

小程序頁面傳值的方式：

1.正向傳值：上一頁面 -->  下一頁面

1. url傳值
2. 本地儲存
3. 全局的app對象

2.反向傳值：下一頁面 -->  上一頁面

1. 本地儲存
2. 全局的app對象

 

先說一下正向傳值：

1.url傳值：

 通過url傳值的需要通過option來獲取參數值。

 更多詳情可以訪問小程序-navigateTo章節。

 A頁面：

wx.navigateTo({
  url: 'test?id=1'
})

 

B頁面：

Page({
  data:{
    id:'',
  },
  onLoad: function(option){
    this.setData({
      id:option.id
    })
  }
})

 

2.本地存儲：

關於緩存，可以先訪問小程序-數據緩存稍作了解。

A頁面：

wx.setStorageSync('username', 'ddd')

 

B頁面：

Page({
  data:{
    username:'',
  },
  onLoad: function(){
   var username = wx.getStorageSync('username')
   this.setData({
       username: username
    })
  }
})

 

3.全局的app對象

關於app對象，可以訪問小程序-注冊程序了解相關信息。

A頁面：

var app = getApp();
app.username='ddd';

 

B頁面：

var app = getApp();
var username = app.username;

 

再說一下反向傳值，看了上面那幾種方法，聰明的你應該知道反向傳值有哪幾種方式了。對，就是方法2和方法3：

1.本地存儲：

B頁面：

wx.setStorageSync('username', 'ddd');
//返回上一頁
wx.navigateBack();

 

A頁面：

Page({
  data:{
    username:'',
  },
  onShow: function(){
   var username = wx.getStorageSync('username')
   this.setData({
       username: username
    })
  }
})

 

2.全局的app對象

B頁面：

var app = getApp();
app.username='ddd';

 

A頁面：

var app = getApp(); 

Page({
  data:{
    username:'',
  },
  onShow: function(){
   var username = app.username;
   this.setData({
       username: username
    })
  }
})

 

3.在當前頁通過獲取前一個 page 實例，再賦值

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面
//直接調用上一個頁面的 setData() 方法，把數據存到上一個頁面中去
prevPage.setData({
  mdata:1 
})

這種方法的弊端：因為進入 B 頁面的入口可能是很多個。這樣做，可能會導致獲取到的頁面實例不正確。

 

4.通過onfire.js為來實現這個效果

onfire.js的下載地址https://github.com/hustcc/onfire.js

使用思路：

1. A 頁面先訂閱一個事件，並定義處理方法； 
2. 從 B 頁面返回時，發送消息； 
3. A 頁面卸載時，解除訂閱。

使用方法如下：

A頁面代碼如下：

var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
    // 當消息被傳遞時，做具體的事
});
Page({
  data: {
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onUnload: function (e) {
    onfire.un('key');
    onfire.un(eventObj);//移除
  }
})

我們可以在 A 頁面直接調用 onfire.on 方法，訂閱一個名字為 key 的消息。在上面的代碼中，消息附帶的參數無傳參。 
如果需要傳參的話，直接在 function 里增加參數即可，例如：

var eventObj = onfire.on('key', function (data){
  // 執行操作
})

需要注意的是，一定要在 onUnload 里（在頁面被關閉時）取消訂閱消息，並取消綁定 eventObj。

B 頁面里代碼在回調的地方加入以下代碼：

onfire.fire('key');//key 為上文中訂閱的消息
// 有參數時
onfire.fire('key','test')

 

方法介紹完畢。各位看官好好享用~

 

參考文章：

小程序2個頁面如何接傳值

 

一個 JS 庫就能解決小程序跨頁傳遞事件消息和數據