本章内容出自《小程式開發不求人》電子書, 點選下載下傳完整版
支付寶小程式快速示例
擷取手機驗證碼快速示例
此為簡約版擷取手機驗證碼元件,開發者可作為參考,也可直接內建使用。您也可以通過
進行學習操作。
掃碼體驗

前提條件
- 已完成 開發者入駐 與 小程式建立 。
- 已下載下傳并安裝 小程式開發者工具。
頁面使用
page.axml
<mobile-code
onSendCode="onSendCode"
onCodeInput="onCodeInput"/>
元件傳參說明
智能售貨櫃小程式快速示例
提供智能售貨櫃小程式模闆源碼,包含了會員注冊登陸、代扣授權、掃碼開門、支付結算、優惠券等功能。您也可以通過
使用說明
- 本示例為純用戶端代碼,可直接在模拟器和在真機預覽 。
- 部分頁面暫不支援調試,如遇此類不支援頁面,請在 web IDE > 模拟器 > 頁面路徑,切換頁面使用。
- 更多使用詳情請參見 代碼模闆市場。
- 已完成 開發者入駐 與 小程式建立。
- 已下載下傳并安裝 小程式開發者工具(簡稱 IDE)。
使用步驟
- 打開 IDE 相關的内容目錄,關聯已有 APPID。
- 通過 IDE 真機預覽 。
頁面内容
本項目包括的頁面數量為 11 個,分别是:首頁、先享後付首頁、優惠券頁面、附近裝置展示、登入注冊頁面、個人中心、我的訂單、訂單詳情、訂單完結、故障報修、掃碼支付等待頁面。
1. 首頁
頁面路徑:pages/index
包含先享後付和先付後享兩個行動點。
2. 先享後付首頁
頁面路徑:pages/home
- 優選推薦子產品
- 掃一掃功能子產品
- 搜尋附近裝置子產品
3. 優惠券頁面
頁面路徑:pages/coupon
已使用/未使用兩個 tab 優惠券清單。
4. 附近裝置展示
頁面路徑:pages/near
- 裝置地圖定位功能
- 附近裝置資訊清單
5. 登入注冊頁面
頁面路徑:pages/registeLogin
登入注冊功能。
6. 個人中心
- 個人資訊展示
- 其它行動點清單
7. 我的訂單
頁面路徑:pages/myOrder
我的訂單清單。
8. 訂單詳情
頁面路徑:pages/orderDetails
訂單詳情資訊。
9. 訂單完結
訂單支付結果頁,包含訂單資訊, 優惠券,實付金額, 備注等展示功能。
10. 故障報修
- 常用故障清單展示
- 故障資訊送出
- 聯系客服行動點
11. 掃碼支付等待頁面
頁面路徑:pages/openDoor
- 等待狀态展示
- 支付成功與失敗等後續行動點展示
自定義 UI 元件
1. 優選推薦
頁面路徑:module/good-list
優選貨品推薦展示清單元件。
2. 已選商品展示
頁面路徑:module/good-show
可展示商品詳情、金額合計。
3. 移動端登入框
頁面路徑:module/login-form。
可實作手機驗證碼登入功能。