一：頁面關閉數據傳遞

在頁面關閉的時候，將數據傳遞到上一個界面，這是一個很常用的功能，一般用于數據選擇，比如淘寶的收貨人選擇，需要在收貨人管理界面將選擇的收貨人信息傳遞到訂單界面。

在Android中，activity自帶有activityForResult，進行傳遞

在IOS中，一般通過Delegate/Block來處理

在React-Native中，則是通過navigator 在push的時候，傳遞一個callback，子頁面關閉之前，回調該callback進行值傳遞，然后進行處理

那么在小程序中怎么做呢？

通過文檔，我們可以看到小程序沒有像Android 和 IOS 那樣，有系統提供的api進行操作，而頁面跳轉是通過

 

1. wx.navigateTo(OBJECT)
2.  
3. //url String 是 需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'
4. //success Function 否 接口調用成功的回調函數
5. //fail Function 否 接口調用失敗的回調函數
6. //complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行）

跳轉傳遞的參數和web的連接一樣，也不能像React-Native 那樣，傳遞callback。

這tm就尷尬了，大寫的懵逼！！！！

看來，不能通過跳轉的時候做處理，換個思路，看看是否能在返回的時候做文章，我們看文檔，小程序的返回是通過

 

1. wx.navigateBack(OBJECT)
2. // 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。
3.  
4. //OBJECT 參數說明：
5.  
6. //參數 類型 默認值 說明
7. //delta Number 1 返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。

看上去，這個好像并不能做什么文章，只是一個返回操作，參數只能傳遞返回的頁面數，并沒有說可以回傳數據過去

難道真的沒有解決辦法了嗎？

當然不是！

文檔中有句非常重要的提示

可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

我們先看一下getCurrentPages()返回的數據是什么

我們可以看到，返回的是通過 wx.navigateTo方法到當前頁面的路徑的所有頁面，好像有點眉目了，我們是否可以找到上級頁面然后去修改他的data屬性呢？

 

1. Page({
2. ...
3.  
4. submit: function(e) {
5.  
6. let pages = getCurrentPages()
7. let curPage = pages[pages.length - (delta + 1)];
8. let data = curPage.data;
9. curPage.seo?tData({'data.invoice': {key1: "111", "key2": "222"}});
10. }
11. })

運行之后，喜極而泣，果然能修改上個頁面data屬性，從而更新UI

封裝自己的pageForResult

這個方法很有可能用的地方比較多，而且可能返回的不是上級頁面，我們可以做下簡單的封裝

 

1. class Router {
2.  
3. /**
4. * 返回并回傳值
5. *
6. */
7. navigateBack(obj) {
8.  
9. let delta = obj.delta ? obj.delta : 1;
10.  
11. if (obj.data) {
12. let pages = getCurrentPages()
13. let curPage = pages[pages.length - (delta + 1)];
14. if(curPage.pageForResult) {
15. curPage.pageForResult(obj.data);
16. } elseo? {
17. curPage.setData(obj.data);
18. }
19. }
20. wx.navigateBack({
21. delta: delta, // 回退前 delta(默認為1) 頁面
22. success: function (res) {
23. // success
24. obj.success && obj.success(res);
25. },
26. fail: function (err) {
27. // fail
28. obj.function && obj.function(err);
29. },
30. complete: function () {
31. // complete
32. obj.complete && obj.complete();
33. }
34. })
35. }
36. }
37.  
38. Router = new Router();
39. module.exports = Router;

使用起來很簡單

 

1. // 修改上個界面的invoice
2. let invoice = {
3. type: type,
4. header: header,
5. content: content,
6. header_content: this.data.headerContent
7. }
8.  
9. Router.navigateBack({data: {invoice: invoice}});
10. // 或是在上級頁面增加一個 pageForResualt方法

上面的封裝，我們可以通過兩種方式進行數據傳遞

如果你有更高的方法，請告訴我

 

通過在父級界面定義pageFroResult來接受數據通過在子頁面調用setData({}) 指定父級的相關data字段進行頁面刷新

二：picker的日期bug

對于一個app來說，日期選擇是一個非常常用的功能，無論是在IOS 、Android 還是 React-Native中都有系統空間或是比較成熟的解決方案，同樣，在小程序中，微信也給我提供了一個比較強大的日期組件——picker。

從底部彈起的滾動選擇器，現支持三種選擇器，通過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器。

通過查看小程序文檔

可以看到，通過mode屬性，分別可以支持普通選擇器、時間選擇器和日期選擇器。

使用方法比較簡單，可以直接在wxml 文件中進行使用

 

1. // wxml
2. <picker mode="selector" >
3. <picker mode="time" >
4. <picker mode="date" >

重點來了

我在開發過程中有個需求是按月份進行訂單的篩選，所以需要用日期選擇器，先看一下日期控件的使用方法

 

1. // page/test/index.js
2. Page({
3. data: {
4. year: 2017,
5. month: 1,
6.  
7. },
8.  
9. bindDateChange: function (e) {
10.  
11. let [year, month] = e.detail.value.split("-");
12. this.setData({
13. year: year,
14. month: month
15. })
16. },
17. })

 

1. // wxml
2.  
3. <picker mode="date" fields="month" value="2017-01" start="2016-05" end="2017-01" bindchange="bindDateChange">
4. <text class="t-title">{{year}}年</text>
5. <text class="t-value">{{month}}月</text>
6. </picker>

以上是測試代碼，代碼比較簡單，就是在頁面有個picker控件，默認顯示日期是2017-01，開始日期和結束日期分別是：2016-05 和 2017-01，粒度為月份(month，這個很重要，只有粒度為month的時候才會出現這個bug)當選擇新的日期后，在頁面上更新對應的年和月。

運行一下代碼

 

沒有任何毛病啊，顯示完全正常。別急，上面的視頻我們是在devTools 上面運行的，我們試試在真機上運行

 

我們可以看到，切換到2016年其他月份后，在切回2017年1月，會顯示2017年5月，目測問題是月份沒有更新到，而是顯示了2016年開始的月份。