天天看點

支付寶小程式快速示例支付寶小程式快速示例

本章内容出自《小程式開發不求人》電子書, 點選下載下傳完整版

支付寶小程式快速示例

擷取手機驗證碼快速示例

此為簡約版擷取手機驗證碼元件,開發者可作為參考,也可直接內建使用。您也可以通過

進行學習操作。

掃碼體驗

支付寶小程式快速示例支付寶小程式快速示例

前提條件

  • 已完成 開發者入駐 與 小程式建立 。
  • 已下載下傳并安裝 小程式開發者工具。

頁面使用

page.axml

<mobile-code
 onSendCode="onSendCode"
 onCodeInput="onCodeInput"/>           

元件傳參說明

支付寶小程式快速示例支付寶小程式快速示例
支付寶小程式快速示例支付寶小程式快速示例

智能售貨櫃小程式快速示例

提供智能售貨櫃小程式模闆源碼,包含了會員注冊登陸、代扣授權、掃碼開門、支付結算、優惠券等功能。您也可以通過

使用說明

  • 本示例為純用戶端代碼,可直接在模拟器和在真機預覽 。
  • 部分頁面暫不支援調試,如遇此類不支援頁面,請在 web IDE > 模拟器 > 頁面路徑,切換頁面使用。
  • 更多使用詳情請參見 代碼模闆市場。

  • 已完成 開發者入駐 與 小程式建立。
  • 已下載下傳并安裝 小程式開發者工具(簡稱 IDE)。

使用步驟

  1. 打開 IDE 相關的内容目錄,關聯已有 APPID。
  2. 通過 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。

可實作手機驗證碼登入功能。

支付寶小程式快速示例支付寶小程式快速示例