支付寶小程序之基礎教程-環境搭建(起步)

初心-楊瑞超個人博客誠邀您加入qq羣(IT-程序猿-技術交流羣):757345416

概述

支付寶小程序是手機應用嵌入支付寶客戶端的一種方法,有以下特點:

  • 基於 Web 技術,學習成本低
  • 一套代碼,同時支持 iOS 和 Android,接近原生體驗
  • 提供豐富的組件和 API(比如獲取用戶信息、本地存儲、支付功能等)
  • 下面就是一個簡單的示例,演示如何快速開發一個小程序。

小程序應用

登錄開放平臺,進入開發者中心頻道,點擊右側小程序菜單,可在我的小程序列表頁看到對應的小程序應用。在IDE上傳版本時需要在關聯應用選中該應用:
在這裏插入圖片描述

下載

首先,請下載小程序開發者工具(IDE)。它是一個輔助開發支付寶小程序的本地應用工具,包含本地調試、代碼編輯、真機預覽、發佈等功能,覆蓋了應用開發的完整流程。

下載完成之後,打開它,即可使用。部分功能如真機預覽和版本上傳等需要登錄才能使用,在這種情況下開發者可打開手機上的支付寶應用,掃碼確定即可登錄。

注意:如果登錄沒有反應,可嘗試完全退出手機上的支付寶應用再重新打開。

打開IDE,點擊新建項目,在支付寶下選擇"小程序",創建項目:
在這裏插入圖片描述

小程序支持多端(支付寶、釘釘、mPaaS)研發和發佈,點此查看詳情

代碼編輯

打開項目,會默認進入代碼編輯模式。從左到右,依次是文件樹、代碼編輯器和模擬器。
在這裏插入圖片描述

代碼編輯器可以對當前項目進行代碼編寫和文件的添加、刪除以及重命名等基本操作。

實時預覽

在代碼編輯器修改任何代碼都會重新編譯,然後自動刷新應用。

自動補全

工具針對 my 接口和 axml 提供了大量的自動補全提示,以幫助開發者提高效率。

本地調試

模擬器

這裏可真實模擬在支付寶應用裏的表現,並針對絕大部分的 api 提供了模擬功能。

調試器

點擊左下角調試器圖標,可喚起調試器窗口。
在這裏插入圖片描述

小程序調試器提供了 axml 和 acss 的支持,支持組件層級、屬性回寫等功能;同時也包含了 Chrome 調試工具中的網絡請求、DOM 元素檢查、源碼 Debug 等。

真機預覽

真機預覽功能可以讓開發者在手機上預覽當前代碼在真機上運行的效果。
真機預覽功能需要掃碼登錄並且選擇關聯應用才能使用。
在這裏插入圖片描述

上傳與發佈

開發者掃碼登錄並選擇關聯應用後可上傳版本到開放平臺:
在這裏插入圖片描述
上傳完畢後,需要登錄到開放平臺提交審覈,審覈完畢後,小程序即可進行灰度和發佈操作。詳細步驟請點擊這裏進行查看。

本教程參考於支付寶-開放平臺-小程序。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章