小程序開發(fā)工具

登錄頁

使用手機(jī)驗(yàn)證或 Lark 掃碼可登錄小程序開發(fā)工具。

新建項(xiàng)目

當(dāng)滿足：

• 已擁有一個(gè)字節(jié)跳動(dòng)小程序的 AppID；
• 所登錄的賬號是該 AppID 所對應(yīng)小程序的開發(fā)者。

可以選擇窗口中央的「創(chuàng)建一個(gè)頭條小程序」，或點(diǎn)擊右下角的「新建」按鈕，新建工程。

• 選擇項(xiàng)目類型：小程序或小游戲（一旦選擇無法更改）。
• 選擇一個(gè)空目錄，作為工程目錄。當(dāng)選擇空目錄時(shí)，可以選擇是否在該目錄下生成一個(gè)簡單的項(xiàng)目。
• appId 需要在公眾平臺(tái)管理后臺(tái)獲取。

主界面

圖中所示分別為：工具欄、模擬器、編輯器、調(diào)試器四大部分。

窗口菜單欄

• 小程序：可以查看開發(fā)者工具版本號
• 項(xiàng)目：支持打開「開發(fā)者工具」本身的調(diào)試器
• 編輯：可以查看編輯相關(guān)的操作和快捷鍵

工具欄

• 編譯：編譯當(dāng)前的小程序項(xiàng)目
• 刷新頁面：刷新當(dāng)前頁面
• 清除緩存：可以清除文件緩存、數(shù)據(jù)緩存、登錄狀態(tài)和授權(quán)數(shù)據(jù)
• 上傳：填入 app 版本號及更新日志，上傳小程序應(yīng)用內(nèi)容到服務(wù)器
• 預(yù)覽：生成二維碼，預(yù)覽已上傳版本
• 詳情：展示當(dāng)前小程序的 appid、user_id、本地目錄、文件系統(tǒng)、基礎(chǔ)版本與編譯版本，并可以設(shè)置校驗(yàn) TLS 版本以及 HTTPS 證書

點(diǎn)擊「模擬器」、「編輯器」、「調(diào)試器」三個(gè)按鈕可以隱藏/顯示相應(yīng)的模塊，界面中至少有一個(gè)模塊被顯示。

模擬器

模擬器模擬頭條小程序在客戶端真實(shí)的邏輯表現(xiàn)，對于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。開發(fā)者可以選擇不同的設(shè)備，調(diào)試小程序在不同尺寸機(jī)型上的適配問題。

編輯器

編輯器模塊內(nèi)可以對當(dāng)前項(xiàng)目進(jìn)行代碼編寫和文件的添加、刪除以及重命名等基本操作。

• 文件格式：因 iOS 下僅支持 UTF8 編碼格式，最新版本的開發(fā)者工具會(huì)在上傳代碼時(shí)候?qū)Υa文件做一次編碼格式校驗(yàn)。
• 文件支持：工具目前提供了 5 種文件的編輯：ttml、ttss、js、json、tts 以及圖片文件的預(yù)覽。
• 文件操作：可以通過在目錄樹上右鍵，選擇新建 Page，將自動(dòng)生成頁面所需要的 ttml、ttss、js、json，及在 app.json 的 pages 字段，添加需要新建的頁面的路徑，將會(huì)自動(dòng)生成該頁面所需要的文件，兩種方式新建頁面。
• 目錄樹：可以查看當(dāng)前項(xiàng)目的目錄結(jié)構(gòu)。

調(diào)試器

調(diào)試工具分為 6 大功能模塊：Bxml、Console、Sources、Network、Application、Performance

自定義編譯條件

編譯條件會(huì)讀取 project.config.json 中的 condition 字段下的相關(guān)配置，方便導(dǎo)入編譯條件。

點(diǎn)擊工具欄的普通編譯處，在下拉列表中，點(diǎn)擊添加編譯模式，會(huì)彈出填寫編譯條件窗口，添加自己的定制化的編譯條件。

在彈出的窗口中，添加模式名稱，啟動(dòng)頁面，啟動(dòng)參數(shù)以及進(jìn)入場景幾個(gè)字段，點(diǎn)擊確認(rèn)，生成新的編譯條件。

Bxml panel

Bxml panel 用于幫助開發(fā)者開發(fā) ttml 轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的 ttss 屬性，同時(shí)可以通過修改對應(yīng) ttss 屬性，在模擬器中實(shí)時(shí)看到修改的情況（僅為實(shí)時(shí)預(yù)覽，無法保存到文件）。通過調(diào)試模塊左上角的選擇器，還可以快速定位頁面中組件對應(yīng)的 ttml 代碼。

Console panel

開發(fā)者可以在此調(diào)試代碼。

Sources panel

Sources panel 用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，小程序框架會(huì)對腳本文件進(jìn)行編譯的工作，所以在 Sources panel 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在 define 函數(shù)中，并且對于 Page 代碼，在尾部會(huì)有 require 的主動(dòng)調(diào)用。

Network panel

Network Panel 用于觀察和顯示 request 和 socket 的請求情況。

Application panel

可以查看 Storage 存儲(chǔ)情況。