github 位址
最近在做支付寶小程式(以下簡稱小程式)開發,發現小程式的日期選擇元件很不好用,比如安卓和ios裝置上,樣式明顯不同,因為小程式呼叫該元件是呼叫系統原生元件,所以會有一定的差異,另外,小程式提供的日期元件並不滿足我當前的業務需求:
該日期為快遞上門時間.
使用者只可選擇的日期範圍,當日往後2天(即今天,明天)的日期,並且時間選擇為早上9點至下午18點間的10個小時整點時間.
由於是快遞上門,所以可選擇的時間點為當前時間點2小時後(比如,現在時間是11點,使用者可選擇的最早時間為13點).
如果當前時間晚於下午18點,則使用者應該可以看到明天及後天2天的時間點.
針對以上需求,借助小程式的picker-view元件,進行了二次封裝,以下是封裝後的元件.
.
├── readme.md
├── components // 元件目錄
│ └── datetimepicker // 日期元件目錄
│ ├── datepickerbase.js // 基礎 js 檔案,需在使用檔案中引入
│ ├── datetimepicker.acss // 元件預設樣式,除非特殊需要,一般不用修改
│ ├── datetimepicker.axml // 元件預設結構
│ ├── datetimepicker.js // 元件 js
│ ├── datetimepicker.json // 元件配置資訊
│ └── js
│ ├── handledatearr.js // 日期陣列處理的 js ,用以生成所需的日期陣列
│ └── moment.min.js // 時間生成使用 moment.js
│└── pages // 示例目錄
└── index
├── index.acss
├── index.axml
├── index.js
└── index.json
pages/index下的使用方法.
pages/index/index.json需配置usingcomponents, 填寫元件路徑
}
pages/index/index.js引入基礎檔案,詳細配置及使用說明,參照js檔案內容
// 引入基礎初始
import datepicker from '../../components/datetimepicker/datepickerbase'
pages/index/index.axml使用picker元件
title // 元件標題
class // 元件樣式,可以自定義
visible // 元件顯示/隱藏
onhidepicker // 隱藏該元件的事件
onconfirm // 點選元件彈窗確定後的事件,onconfirm(str),其中 str 為最終**的引數,可取到 picker 的值
pickervalue // 預設引數,用來初始的時候用,傳入資料是 picker 的索引值,預設(0,0),即 預設選中兩列 picker 的第一項
picker-view所以在介面上沒有花過多的時間,主要可能還是日期時間陣列的生成需要處理一下,借助了moment.js庫,對於時間處理上還是很方便的,以下是對處理日期陣列handledatearr.js的**說明.
// 依賴於 moment.js
const moment = require('./moment.min')
/** * 生成日期時間陣列
* @param daylength // 要生成的天數時長,不傳的話,預設生成 1 天
* @param timesection // 時間區間,預設 10 , 可下單區間早上9點到下午6點,可下單時間在當前小時後2小時
*/function getdaysarr(daylength, timesection) else if( _expresshour > _earlyhour && _expresshour < _endhour) else if ( _expresshour >= _endhour && _expresshour < 24)
} else
} /**
* 獲取小時時間陣列
* @param nowhour // 當前小時
* @param hourslength // 小時區間長度
*/function gethoursarr(nowhour, hourslength) :00:00`)
}return _hoursarr
} return _daysarr
}module.exports =
datetimepicker.js檔案中使用handledatearr.js的方法
...
const = require('./js/handledatearr'); // 引入處理函式
component(,
methods: );
}}});
...
支付寶小程式元件通訊
下面先上 父頁面 axml 這是父頁面 上一次元件隱藏後傳遞過來的值是 展示子元件 父頁面 js page showchild function hidetest function info console.log 獲取元件傳遞的值 info 子元件 axml 這是載入過來的子元件 需要向父元件傳遞...
頭條小程式對接微信 支付寶
服務端獲取orderinfo function getorderinfo if service 3 elseif service 4 return orderinfo desc 服務端簽名 param array orderinfo 簽名前的支付資料 return string 簽名結果字串 1.去...
支付寶小程式商品加入購物車動畫
思路 乙個盒子做勻速運動，盒子裡的小球做變速運動 js page width 0,購物車寬 show false flag false,onload onready add e let that this let tran e.detail.clientx,e.detail.clienty this...