小程序模板網(wǎng)

小程序踩坑記《二》頁面關(guān)閉數(shù)據(jù)傳遞,picker的日期bug

發(fā)布時間:2017-11-29 18:06 所屬欄目:小程序開發(fā)教程

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

 
 

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

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

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

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

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

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

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

 


			
  1. wx.navigateTo(OBJECT)
  2.  
  3. //url String 是 需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(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)用成功、失敗都會執(zhí)行)

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

這tm就尷尬了,大寫的懵逼?。。?!

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

 


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

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

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

當然不是!

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

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

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

我們可以看到,返回的是通過 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方法

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

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

 

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

二:picker的日期bug

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

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

通過查看小程序文檔

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

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

 


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

重點來了

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

 


			
  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,開始日期和結(jié)束日期分別是:2016-05 和 2017-01,粒度為月份(month,這個很重要,只有粒度為month的時候才會出現(xiàn)這個bug)當選擇新的日期后,在頁面上更新對應(yīng)的年和月。

運行一下代碼

 

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

 

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17990.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢