一：頁(yè)面關(guān)閉數(shù)據(jù)傳遞

在頁(yè)面關(guān)閉的時(shí)候，將數(shù)據(jù)傳遞到上一個(gè)界面，這是一個(gè)很常用的功能，一般用于數(shù)據(jù)選擇，比如淘寶的收貨人選擇，需要在收貨人管理界面將選擇的收貨人信息傳遞到訂單界面。

在Android中，activity自帶有activityForResult，進(jìn)行傳遞

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

在React-Native中，則是通過navigator 在push的時(shí)候，傳遞一個(gè)callback，子頁(yè)面關(guān)閉之前，回調(diào)該callback進(jìn)行值傳遞，然后進(jìn)行處理

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

通過文檔，我們可以看到小程序沒有像Android 和 IOS 那樣，有系統(tǒng)提供的api進(jìn)行操作，而頁(yè)面跳轉(zhuǎn)是通過

 

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

跳轉(zhuǎn)傳遞的參數(shù)和web的連接一樣，也不能像React-Native 那樣，傳遞callback。

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

看來，不能通過跳轉(zhuǎn)的時(shí)候做處理，換個(gè)思路，看看是否能在返回的時(shí)候做文章，我們看文檔，小程序的返回是通過

 

1. wx.navigateBack(OBJECT)
2. // 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面?？赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。
3.  
4. //OBJECT 參數(shù)說明：
5.  
6. //參數(shù) 類型 默認(rèn)值 說明
7. //delta Number 1 返回的頁(yè)面數(shù)，如果 delta 大于現(xiàn)有頁(yè)面數(shù)，則返回到首頁(yè)。

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

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

當(dāng)然不是！

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

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

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

我們可以看到，返回的是通過 wx.navigateTo方法到當(dāng)前頁(yè)面的路徑的所有頁(yè)面，好像有點(diǎn)眉目了，我們是否可以找到上級(jí)頁(yè)面然后去修改他的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. })

運(yùn)行之后，喜極而泣，果然能修改上個(gè)頁(yè)面data屬性，從而更新UI

封裝自己的pageForResult

這個(gè)方法很有可能用的地方比較多，而且可能返回的不是上級(jí)頁(yè)面，我們可以做下簡(jiǎn)單的封裝

 

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(默認(rèn)為1) 頁(yè)面
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;

使用起來很簡(jiǎn)單

 

1. // 修改上個(gè)界面的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. // 或是在上級(jí)頁(yè)面增加一個(gè) pageForResualt方法

上面的封裝，我們可以通過兩種方式進(jìn)行數(shù)據(jù)傳遞

如果你有更高的方法，請(qǐng)告訴我

 

通過在父級(jí)界面定義pageFroResult來接受數(shù)據(jù)通過在子頁(yè)面調(diào)用setData({}) 指定父級(jí)的相關(guān)data字段進(jìn)行頁(yè)面刷新

二：picker的日期bug

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

從底部彈起的滾動(dòng)選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時(shí)間選擇器，日期選擇器，默認(rèn)是普通選擇器。

通過查看小程序文檔

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

使用方法比較簡(jiǎn)單，可以直接在wxml 文件中進(jìn)行使用

 

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

重點(diǎn)來了

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

 

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>

以上是測(cè)試代碼，代碼比較簡(jiǎn)單，就是在頁(yè)面有個(gè)picker控件，默認(rèn)顯示日期是2017-01，開始日期和結(jié)束日期分別是：2016-05 和 2017-01，粒度為月份(month，這個(gè)很重要，只有粒度為month的時(shí)候才會(huì)出現(xiàn)這個(gè)bug)當(dāng)選擇新的日期后，在頁(yè)面上更新對(duì)應(yīng)的年和月。

運(yùn)行一下代碼

 

沒有任何毛病啊，顯示完全正常。別急，上面的視頻我們是在devTools 上面運(yùn)行的，我們?cè)囋囋谡鏅C(jī)上運(yùn)行

 

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