新手入門丨教你10分鐘攻略開發者工具

語言: CN / TW / HK

開發者工具是面向小程式開發者推出的桌面端整合開發環境(Integrated Development Environment,IDE)。IDE 支援小程式開發、除錯、預覽、上傳等基本功能,並且整合開發者服務(包含智慧客服等),支援在 Windows、Mac 平臺上執行,旨在幫助開發者更高效地開發小程式。

為了進一步提升小程式的開發效率,我們聊了十幾個開發者才整理出來了 【開發者工具】新手入門必備指南,希望可以幫助大家輕鬆入門,快速上手!

💻 編輯開發實踐

為了大家更好地在開發者工具裡完成小程式程式碼的開發,我們提供了編輯器的程式碼提示功能等優化大家的開發體驗。

程式碼提示使用

元件提示補全

單標籤自動閉合,如直接打<view>(注意需要打 < 和 >)

069513f0-9180-446b-938a-a6026e05ce60.gif

標籤屬性補全,打對應的標籤名字,如直接打 image,再按 tab,便可(注意不需要打 <)

瞭解到有些開發者反饋某些情況下有過多冗餘內容,後續這裡提示的屬性內容也會做迭代優化

t2.gif

接著你便可以按 tab 鍵去編輯元件的屬性。

API 提示補全

API 提示補全,可以先打 tt.,然後打 requ,就能聯想出 request

t3.gif

假如你想要關聯出完整的模板,例如網路請求,你可以直接打 request

t4.gif

還有其他功能可以探索,詳細可以檢視 VSCode 外掛使用,我們也支援直接在 VSCode 外掛使用對應功能~

編輯外掛使用

為了方便開發,我們內建了 OpenVSX 開源的外掛市場。

  • 主題外掛配置

你可以使用外掛配置你想要的主題,如圖我們使用了開源的 Material Theme

p5.gif

  • 程式碼拼寫檢查(Code Spell Checker)

https://open-vsx.org/extension/streetsidesoftware/code-spell-checker

p6.gif

  • Prettier 程式碼格式化外掛

https://open-vsx.org/extension/esbenp/prettier-vscode

p7.gif

更多外掛可以嘗試使用,大家假如有別的推薦,可以在評論區評論~

常見快捷鍵 / 操作使用

目前開發者工具內建了一些常用的快捷鍵供大家使用,暫時沒有提供修改繫結的方式,後續也會提供設定介面供大家自由繫結。

Command + P(Windows: Ctrl + P)

快速起編輯器的命令面板,可以快速切換檔案

  • 在命令面板輸入 >開啟工作區設定,可以開啟編輯器相關的設定
  • 在命令面板輸入 >格式化文件,可以使用配置的格式化工具快速格式化文件
  • 在命令面板輸入 >主題,可以快速切換主題

Command + Shift + P(Windows: Ctrl + Shift + P)

可以快速喚起預覽視窗,生成預覽二維碼

Command + B(Windows: Ctrl + B)

可以快速觸發全量的重複編譯(在「詳情面板|中「工程配置」中的「儲存檔案自動編譯)開啟的情況下,一般情況下你只要 Command + S 儲存檔案即可)

Command + R(Windows: Ctrl + R)

可以快速觸發模擬器重新整理

p9.gif

快速建立元件以及頁面

p9.gif

還有更多的內部功能供大家探索~

⌨ 偵錯程式面板使用實踐

斷點除錯

Sources 面板用於顯示當前專案的指令碼檔案。小程式框架會對指令碼檔案進行編譯的處理,所以開發者在 Sources 面板中看到的檔案是經過處理之後的指令碼檔案。實際上開發者的程式碼都會被包裹在 define 函式中,並且對於 Page 程式碼,在尾部會有 require 的主動呼叫。

在 Source 面板中可以設定斷點,對小程式進行斷點除錯。注意,當代碼執行到斷點的時候,整個小程式進入停止狀態,此時模擬器會出現白屏或者無法操作的情況。

p10.gif

AppData 除錯

AppData 面板用於顯示當前小程式專案執行時,最上層頁面中 Data 具體資料(在 Page 定義時的 data 物件)。Data 資料除錯可以在此處修改資料,並及時地反饋到頁面 TTML 上。

開發者 3.3.5 版本起,支援對雙端的真機除錯也使用 AppData 面板進行 Data 資料除錯。

p11.gif

Storage 除錯

Storage 面板用於顯示當前專案使用 tt.setStorage 或者 tt.setStorageSync 後的資料儲存情況。

可以直接在 Storage 面板上對資料進行新增、刪除(按 delete 鍵或通過右鍵選單)、修改等行為。

修改後的資料將直接影響 tt.getStorage 或者 tt.getStorageSync 的回撥執行結果。

p12.gif

Mock 面板

Mock 面板用於攔截小程式 API 並提前返回使用者自定義的資料。

  • 目前支援模擬 tt.requesttt.downloadFilett.checkSessiontt.getLocation四個 API
  • 資料模板的語法可參考:https://github.com/nuysoft/Mock/wiki/Syntax-Specification

p13.gif

Audits 面板

Audit 會對審計到的頁面進行評分,給出待優化項資訊,幫助開發者開發效能更好的小程式

  • 點選 aduits 面板開始除錯
  • 點選模擬器中想要除錯的頁面,功能等;
  • 結束除錯,除錯面板會對除錯過程中的除錯項進行評估並給出得分,未通過的專案也會有對應的建議和定位。

p14.gif

📱 模擬器面板使用實踐

自定義裝置

模擬器可以模擬小程式在抖音客戶端的表現。開發者可以選擇不同的裝置,也可以選擇自定義裝置,拖動模擬器來除錯小程式在不同尺寸機型上的適配問題。

切換模擬器位置

模擬器預設位於主介面左側。開發者可以點選模擬器工具欄中的“模擬器切換箭頭”圖示來切換模擬器的佈局,比如切換到主頁面右側。同時開發者還可以點選開發者工具的左上角“模擬器”按鈕來隱藏或者顯示模擬器。

獨立模擬器模式

點選模擬器右上角“獨立視窗”圖示觸發獨立視窗顯示。

模擬器頂部 工具欄 各項功能

模擬器內建部分工具,點選模擬器頂部右上角的“工具”圖示可開啟工具欄,從左到右工具欄為:

  • 主頁:小程式跳轉到首頁
  • 返回:小程式返回到上一頁
  • Webview:開啟小程式 webview 頁面偵錯程式
  • 截圖:模擬觸發客戶端截圖
  • 記憶體警告:模擬觸發客戶端記憶體警告
  • 定位:模擬更改客戶端當前經緯度定位

❓ 問題諮詢

開發者工具還在持續迭代優化,假如你遇到了某些問題或者有某些建議,也可以及時找到官方同學反饋。

  • 點選頂部「選單」中的「幫助」,點選「反饋」,可以快速反饋你的意見或者建議~

  • 點選頂部「選單」中的「幫助」,點選「開發者社群」,可以從抖音開放平臺留下你的社群問答,官方也有相關同學能夠及時地處理
  • 點選「工具欄」中的「智慧客服」,在工作時段也有相關同學來跟你實時溝通

✨分享心聲

本次我們選擇了部分開發者朋友們在新手期積累的實踐經驗,假如你覺得有更好的最佳實踐也歡迎在評論區回覆我們哦!相信有你的建議,我們一定能讓大家的開發更高效更便捷!

都看到這裡啦👇 沒使用過的朋友還不點選下載體驗?

開發者工具正式版下載