微信小程序工具 代碼編輯

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

文件格式

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

文件支持

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

文件操作

新建頁面有兩種方式

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

自動保存

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

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

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

實時預(yù)覽

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

自動補全

同大部分編輯器一樣，我們提供了完善的自動補全

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

js 補全

代碼模板支持

 

json 補全

 

wxml 補全

TypeScript 支持

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

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

如需配置 TypeScript 編譯選項，請參考 tsconfig.json 的配置。

注：小程序僅支持運行 JS 文件，因此所有的 TS 文件都默認不會被打包上傳。

Git 狀態(tài)展示

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

目錄樹

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

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

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

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

文件編輯

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

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

樣式說明如下：

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

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

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

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

項目配置文件

可以在項目根目錄使用 project.config.json 文件對項目進行配置。

compileType 有效值

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

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

packOptions

packOptions 用以配置項目在打包過程中的選項。打包是預(yù)覽、上傳時對項目進行的必須步驟。

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

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

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

注 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è)置的更改可能需要重新打開項目才能生效。

debugOptions

debugOptions 用以配置在對項目代碼進行調(diào)試時的選項。

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

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

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

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

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

項目配置示例：

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

快捷鍵

見工具菜單欄