一:頁(yè)面關(guān)閉數(shù)據(jù)傳遞在頁(yè)面關(guān)閉的時(shí)候,將數(shù)據(jù)傳遞到上一個(gè)界面,這是一個(gè)很常用的功能,一般用于數(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)是通過
wx.navigateTo(OBJECT)//url String 是 需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2'//success Function 否 接口調(diào)用成功的回調(diào)函數(shù)//fail Function 否 接口調(diào)用失敗的回調(diào)函數(shù)//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í)候做文章,我們看文檔,小程序的返回是通過
wx.navigateBack(OBJECT)// 關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面??赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。//OBJECT 參數(shù)說明://參數(shù) 類型 默認(rèn)值 說明//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屬性呢?
Page({...submit: function(e) {let pages = getCurrentPages()let curPage = pages[pages.length - (delta + 1)];let data = curPage.data;curPage.seo?tData({'data.invoice': {key1: "111", "key2": "222"}});}})運(yùn)行之后,喜極而泣,果然能修改上個(gè)頁(yè)面data屬性,從而更新UI
封裝自己的pageForResult
這個(gè)方法很有可能用的地方比較多,而且可能返回的不是上級(jí)頁(yè)面,我們可以做下簡(jiǎn)單的封裝
class Router {/*** 返回并回傳值* */navigateBack(obj) {let delta = obj.delta ? obj.delta : 1;if (obj.data) {let pages = getCurrentPages()let curPage = pages[pages.length - (delta + 1)];if(curPage.pageForResult) {curPage.pageForResult(obj.data);} elseo? {curPage.setData(obj.data);} }wx.navigateBack({delta: delta, // 回退前 delta(默認(rèn)為1) 頁(yè)面success: function (res) {// successobj.success && obj.success(res);},fail: function (err) {// failobj.function && obj.function(err);},complete: function () {// completeobj.complete && obj.complete();}})}}Router = new Router();module.exports = Router;使用起來很簡(jiǎn)單
// 修改上個(gè)界面的invoicelet invoice = {type: type,header: header,content: content,header_content: this.data.headerContent}Router.navigateBack({data: {invoice: invoice}});// 或是在上級(jí)頁(yè)面增加一個(gè) pageForResualt方法上面的封裝,我們可以通過兩種方式進(jìn)行數(shù)據(jù)傳遞
如果你有更高的方法,請(qǐng)告訴我
對(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)行使用
// wxml<picker mode="selector" ><picker mode="time" ><picker mode="date" >重點(diǎn)來了
我在開發(fā)過程中有個(gè)需求是按月份進(jìn)行訂單的篩選,所以需要用日期選擇器,先看一下日期控件的使用方法

// page/test/index.jsPage({data: {year: 2017,month: 1,},bindDateChange: function (e) {let [year, month] = e.detail.value.split("-");this.setData({year: year,month: month})},})
// wxml<picker mode="date" fields="month" value="2017-01" start="2016-05" end="2017-01" bindchange="bindDateChange"><text class="t-title">{{year}}年</text><text class="t-value">{{month}}月</text></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年開始的月份。