支付寶小程式開發——小程式開發者工具的使用

來源:酷知科普網 2.46W

這裡主要介紹支付寶小程式開發系列教程之小程式開發者工具的下載安裝與使用。
網際網路行業從來都是模仿與被模仿,由於微信小程式推出在先,所以支付寶小程式開發者工具在很大程度上借鑑了微信開發者工具不少的地方。無論是介面還是程式碼結構方面,都是比較類似的,所以開發過微信小程式的,轉向支付寶小程式的開發,能很快的上手的。

操作方法

(01)開發管理頁面,點選去下載,下載小程式開發者工具

支付寶小程式開發——小程式開發者工具的使用

(02)選擇作業系統與版本

支付寶小程式開發——小程式開發者工具的使用 第2張

(03)下載安裝完成後,開啟小程式開發者工具,進入主介面點選“建立小程式”按鈕

支付寶小程式開發——小程式開發者工具的使用 第3張

(04)如圖,開發者工具給我們提供了不少的小程式模板,我們可以先選擇“todo App示例”(類似微信開發者工具中小程式demo),然後點選下一步

支付寶小程式開發——小程式開發者工具的使用 第4張

(05)熟悉小程式demo,所以其他先預設就可以了,直接點“完成”按鈕

支付寶小程式開發——小程式開發者工具的使用 第5張

(06)建立完成,進入小程式開發介面——可以看到,工具介面甚至程式碼結構都很類似。當然對於開發者來說,這挺好的,省去了好多學習成本了。

支付寶小程式開發——小程式開發者工具的使用 第6張

(07)頁面結構方面:除了命名略有不同之外,差別最大的也就是生命週期和部分元件了。

支付寶小程式開發——小程式開發者工具的使用 第7張

(08)關於偵錯程式:支付寶小程式開發者工具的偵錯程式預設關閉,入口在底部做左側,需點選按鈕開啟,如圖

支付寶小程式開發——小程式開發者工具的使用 第8張
支付寶小程式開發——小程式開發者工具的使用 第9張

(09)瞭解了這些,就可以很愉快的進入支付寶小程式開發了。如果學習能力比較強,去大致的瞭解下支付寶小程式開發文件就可以了,可以直接進入開發。如果沒有做過微信小程式或學習能力較差的同學,建議還是認認真真的把小程式開發文件看一遍。

支付寶小程式開發——小程式開發者工具的使用 第10張

(10)關於預覽:支付寶小程式開發者工具的預覽跟微信開發者工具還有些不同,可以按下面步驟操作。

支付寶小程式開發——小程式開發者工具的使用 第11張

支付寶小程式預覽

(01)點選開發工具模擬器頂部的“預覽”之後,彈出彈窗選擇專案(預設即可)

支付寶小程式開發——小程式開發者工具的使用 第12張

(02)初次新增,模擬器中就會彈出支付寶授權登入,授權登入之後就獲取到了自己支付寶的賬號和頭像,如圖

支付寶小程式開發——小程式開發者工具的使用 第13張

(03)再次點選預覽,點選“確認推送”,就能展示預覽二維碼了

支付寶小程式開發——小程式開發者工具的使用 第14張

(04)使用手機支付寶掃描二維碼,就能在手機支付寶上預覽小程了

支付寶小程式開發——小程式開發者工具的使用 第15張

特別提示

如果學習能力比較強,去大致的瞭解下支付寶小程式開發文件就可以了,可以直接進入開發。如果沒有做過微信小程式或學習能力較差的同學,建議還是認認真真的把小程式開發文件看一遍。

支付寶小程式開發者工具模擬器需要訪問本地服務,如果出現編譯緩慢,出現連線伺服器失敗的錯誤,很有可能是本機網路環境問題,可以去檢查下網路連線和防火牆

熱門標籤