微信小程序工具 代碼編輯

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

文件格式

因 iOS 下僅支持 UTF8 編碼格式，最新版本的開發(fā)者工具會(huì)在上傳代碼時(shí)候?qū)Υa文件做一次編碼格式校驗(yàn)。

文件支持

工具目前提供了5種文件的編輯：wxml、wxss、js、json、wxs以及圖片文件的預(yù)覽。

文件操作

新建頁面有兩種方式

1. 在目錄樹上右鍵，選擇新建 Page，將自動(dòng)生成頁面所需要的 wxml、wxss、js、json
2. 在 app.json 的 pages 字段，添加需要新建的頁面的路徑，將會(huì)自動(dòng)生成該頁面所需要的文件

自動(dòng)保存

編輯代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前的代碼編輯狀態(tài)，直接關(guān)閉工具或者切換到別的項(xiàng)目，并不會(huì)丟失已經(jīng)編輯的文件狀態(tài)，但需要注意的是，只有用戶主動(dòng)保存文件，修改內(nèi)容才會(huì)真實(shí)的寫到硬盤上。

如果設(shè)置中開啟了 “修改文件時(shí)自動(dòng)保存”（設(shè)置-編輯設(shè)置-修改文件自動(dòng)保存），工具在修改文件時(shí)會(huì)自動(dòng)保存到硬盤中，無需手動(dòng)保存的效果。

設(shè)置中開啟 “編譯時(shí)自動(dòng)保存所有文件”（設(shè)置-編譯設(shè)置-編譯時(shí)自動(dòng)保存所有文件），在點(diǎn)擊編譯時(shí)自動(dòng)保存所有文件的效果。

實(shí)時(shí)預(yù)覽

如果設(shè)置中開啟了“文件保存時(shí)自動(dòng)編譯小程序”（位置在：設(shè)置 - 編輯 - 文件保存時(shí)自動(dòng)編譯小程序），那么當(dāng) js, json, wxml 或 wxss 文件修改時(shí)，可以通過模擬器實(shí)時(shí)預(yù)覽編輯的情況：

自動(dòng)補(bǔ)全

同大部分編輯器一樣，我們提供了完善的自動(dòng)補(bǔ)全

• js 文件編輯會(huì)幫助開發(fā)補(bǔ)全所有的 API 及相關(guān)的注釋解釋，并提供代碼模板支持
• wxml 文件編輯會(huì)幫助開發(fā)者直接寫出相關(guān)的標(biāo)簽和標(biāo)簽中的屬性
• json 文件編輯會(huì)幫助開發(fā)者補(bǔ)全相關(guān)的配置，并給出實(shí)時(shí)的提示

js 補(bǔ)全

代碼模板支持

 

json 補(bǔ)全

 

wxml 補(bǔ)全

TypeScript 支持

如果項(xiàng)目需要使用 TypeScript 語言開發(fā)，開發(fā)者工具在創(chuàng)建項(xiàng)目選擇快速啟動(dòng)模板時(shí)，提供了使用 TypeScript 語言的 QuickStart 項(xiàng)目，可以選擇創(chuàng)建此項(xiàng)目并進(jìn)行后續(xù)開發(fā)。

要構(gòu)建并使用 TypeScript 項(xiàng)目，可能需要安裝 npm。通過自定義預(yù)處理，可以實(shí)現(xiàn)在編譯前運(yùn)行 tsc 以將其編譯到 js 文件。

如需配置 TypeScript 編譯選項(xiàng)，請(qǐng)參考 tsconfig.json 的配置。

注：小程序僅支持運(yùn)行 JS 文件，因此所有的 TS 文件都默認(rèn)不會(huì)被打包上傳。

Git 狀態(tài)展示

如果所在的小程序工程目錄（project.config.json 所在目錄）存在 Git 倉庫，編輯器可以展示目前的 Git 狀態(tài)。

目錄樹

如圖所示，當(dāng)某些文件存在變動(dòng)時(shí)，目錄樹的文件右側(cè)將展示相應(yīng)的圖標(biāo)來表明這一狀態(tài)。當(dāng)某一處于收起狀態(tài)的目錄下存在有變動(dòng)的文件時(shí)，此目錄的右側(cè)亦會(huì)展示一個(gè)圓點(diǎn)圖標(biāo)表明此情況。

文件圖標(biāo)狀態(tài)的含義如下：

文件夾目錄圖標(biāo)狀態(tài)的含義如下：

如果某一文件存在修改（Modified），可以右鍵點(diǎn)擊此文件，并選擇 “與上一版本比較”，則可以查看當(dāng)前工作區(qū)文件與 HEAD 版本的比較。

文件編輯

存在 Git 倉庫時(shí)，狀態(tài)欄會(huì)展示此 Git 倉庫目前的分支信息。例如，下圖表明目前 Git 倉庫處于 v2 分支。

同時(shí)，編輯文件內(nèi)容時(shí)，將會(huì)在所編輯代碼左側(cè)實(shí)時(shí)顯示相對(duì)于上一版本內(nèi)容的比較。

樣式說明如下：

文件夾目錄圖標(biāo)狀態(tài)的含義如下：

Windows 風(fēng)格回車設(shè)置

如需忽略 Windows 風(fēng)格的回車符，可以前往 “設(shè)置” - “編輯”，并勾選 “Git 比較文件內(nèi)容時(shí)，忽略 Windows 風(fēng)格回車符”。

勾選后，在編輯文件進(jìn)行內(nèi)容比較時(shí)，所有 Windows 風(fēng)格的回車符將被當(dāng)作 Unix 風(fēng)格的回車符對(duì)待。

項(xiàng)目配置文件

可以在項(xiàng)目根目錄使用 project.config.json 文件對(duì)項(xiàng)目進(jìn)行配置。

compileType 有效值

setting 中可以指定以下設(shè)置

scripts 中指定自定義預(yù)處理的命令

packOptions

packOptions 用以配置項(xiàng)目在打包過程中的選項(xiàng)。打包是預(yù)覽、上傳時(shí)對(duì)項(xiàng)目進(jìn)行的必須步驟。

目前可以指定 packOptions.ignore 字段，用以配置打包時(shí)對(duì)符合指定規(guī)則的文件或文件夾進(jìn)行忽略，以跳過打包的過程，這些文件或文件夾將不會(huì)出現(xiàn)在預(yù)覽或上傳的結(jié)果內(nèi)。

packOptions.ignore 為一對(duì)象數(shù)組，對(duì)象元素類型如下：

其中，type 可以取的值為 folder、file、suffix、prefix、regexp2、glob2，分別對(duì)應(yīng)文件夾、文件、后綴、前綴、正則表達(dá)式、Glob 規(guī)則。所有規(guī)則值都會(huì)自動(dòng)忽略大小寫。

注 1: value 字段的值若表示文件或文件夾路徑，以小程序目錄 (miniprogramRoot) 為根目錄。

注 2: regexp、glob 僅 1.02.1809260 及以上版本工具支持。

示例配置如下。

{
  "packOptions": {
    "ignore": [{
      "type": "file",
      "value": "test/test.js"
    }, {
      "type": "folder",
      "value": "test"
    }, {
      "type": "suffix",
      "value": ".webp"
    }, {
      "type": "prefix",
      "value": "test-"
    }, {
      "type": "glob",
      "value": "test/**/*.js"
    }, {
      "type": "regexp",
      "value": "\\.jsx$"
    }]
  }
}

注: 這部分設(shè)置的更改可能需要重新打開項(xiàng)目才能生效。

debugOptions

debugOptions 用以配置在對(duì)項(xiàng)目代碼進(jìn)行調(diào)試時(shí)的選項(xiàng)。

目前可以指定 debugOptions.hidedInDevtools 字段，用以配置調(diào)試時(shí)于調(diào)試器 Sources 面板隱藏源代碼的文件。

hidedInDevtools 的配置規(guī)則和 packOptions.ignore 是一致的。

當(dāng)某個(gè) js 文件符合此規(guī)則時(shí)，調(diào)試器 Sources 面板中此文件源代碼正文內(nèi)容將被隱藏，顯示為：

// xxx.js has been hided by project.config.json

注：配置此規(guī)則后，可能需要關(guān)閉并重新打開項(xiàng)目才能看到效果。

項(xiàng)目配置示例：

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  },
  "packOptions": {
    "ignore": []
  },
  "debugOptions": {}
}

快捷鍵

見工具菜單欄