建站
咨詢
售后
建站咨詢
新聞中心
編輯區(qū)可以對(duì)當(dāng)前項(xiàng)目進(jìn)行代碼編寫(xiě)和文件的添加、刪除以及重命名等基本操作。
文件格式
因 iOS 下僅支持 UTF8 編碼格式，最新版本的開(kāi)發(fā)者工具會(huì)在上傳代碼時(shí)候?qū)Υa文件做一次編碼格式校驗(yàn)。
文件支持
工具目前提供了5種文件的編輯：wxml、wxss、js、json、wxs以及圖片文件的預(yù)覽。
文件操作
新建頁(yè)面有兩種方式
- 在目錄樹(shù)上右鍵，選擇新建 Page，將自動(dòng)生成頁(yè)面所需要的 wxml、wxss、js、json
- 在 app.json 的 pages 字段，添加需要新建的頁(yè)面的路徑，將會(huì)自動(dòng)生成該頁(yè)面所需要的文件
自動(dòng)保存
編輯代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前的代碼編輯狀態(tài)，直接關(guān)閉工具或者切換到別的項(xiàng)目，并不會(huì)丟失已經(jīng)編輯的文件狀態(tài)，但需要注意的是，只有用戶主動(dòng)保存文件，修改內(nèi)容才會(huì)真實(shí)的寫(xiě)到硬盤(pán)上。
如果設(shè)置中開(kāi)啟了 “修改文件時(shí)自動(dòng)保存”（設(shè)置-編輯設(shè)置-修改文件自動(dòng)保存），工具在修改文件時(shí)會(huì)自動(dòng)保存到硬盤(pán)中，無(wú)需手動(dòng)保存的效果。
設(shè)置中開(kāi)啟 “編譯時(shí)自動(dòng)保存所有文件”（設(shè)置-編譯設(shè)置-編譯時(shí)自動(dòng)保存所有文件），在點(diǎn)擊編譯時(shí)自動(dòng)保存所有文件的效果。
實(shí)時(shí)預(yù)覽
如果設(shè)置中開(kāi)啟了“文件保存時(shí)自動(dòng)編譯小程序”（位置在：設(shè)置 - 編輯 - 文件保存時(shí)自動(dòng)編譯小程序），那么當(dāng) js, json, wxml 或 wxss 文件修改時(shí)，可以通過(guò)模擬器實(shí)時(shí)預(yù)覽編輯的情況：
自動(dòng)補(bǔ)全
同大部分編輯器一樣，我們提供了完善的自動(dòng)補(bǔ)全
- js 文件編輯會(huì)幫助開(kāi)發(fā)補(bǔ)全所有的 API 及相關(guān)的注釋解釋?zhuān)⑻峁┐a模板支持
- wxml 文件編輯會(huì)幫助開(kāi)發(fā)者直接寫(xiě)出相關(guān)的標(biāo)簽和標(biāo)簽中的屬性
- json 文件編輯會(huì)幫助開(kāi)發(fā)者補(bǔ)全相關(guān)的配置，并給出實(shí)時(shí)的提示
js 補(bǔ)全
代碼模板支持
json 補(bǔ)全
wxml 補(bǔ)全
TypeScript 支持
如果項(xiàng)目需要使用 TypeScript 語(yǔ)言開(kāi)發(fā)，開(kāi)發(fā)者工具在創(chuàng)建項(xiàng)目選擇快速啟動(dòng)模板時(shí)，提供了使用 TypeScript 語(yǔ)言的 QuickStart 項(xiàng)目，可以選擇創(chuàng)建此項(xiàng)目并進(jìn)行后續(xù)開(kāi)發(fā)。
要構(gòu)建并使用 TypeScript 項(xiàng)目，可能需要安裝 npm。通過(guò)自定義預(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 倉(cāng)庫(kù)，編輯器可以展示目前的 Git 狀態(tài)。
目錄樹(shù)
如圖所示，當(dāng)某些文件存在變動(dòng)時(shí)，目錄樹(shù)的文件右側(cè)將展示相應(yīng)的圖標(biāo)來(lái)表明這一狀態(tài)。當(dāng)某一處于收起狀態(tài)的目錄下存在有變動(dòng)的文件時(shí)，此目錄的右側(cè)亦會(huì)展示一個(gè)圓點(diǎn)圖標(biāo)表明此情況。
文件圖標(biāo)狀態(tài)的含義如下：
| 圖標(biāo) | 含義 |
|---|---|
| U | 文件未追蹤（Untracked） |
| A | 新文件（Added, Staged） |
| M | 文件有修改（Modified） |
| +M | 文件有修改（Modified, Staged） |
| C | 文件有沖突（Conflict） |
| D | 文件被刪除（Deleted） |
文件夾目錄圖標(biāo)狀態(tài)的含義如下：
| 圖標(biāo) | 含義 |
|---|---|
| 小紅點(diǎn) | 目錄下至少存在一個(gè)刪除狀態(tài)的文件 |
| 小橙點(diǎn) | 目錄下至少存在一個(gè)沖突狀態(tài)的文件 |
| 小藍(lán)點(diǎn) | 目錄下至少存在一個(gè)未追蹤狀態(tài)的文件 |
| 小綠點(diǎn) | 目錄下至少存在一個(gè)修改狀態(tài)的文件 |
如果某一文件存在修改（Modified），可以右鍵點(diǎn)擊此文件，并選擇 “與上一版本比較”，則可以查看當(dāng)前工作區(qū)文件與 HEAD 版本的比較。
文件編輯
存在 Git 倉(cāng)庫(kù)時(shí)，狀態(tài)欄會(huì)展示此 Git 倉(cāng)庫(kù)目前的分支信息。例如，下圖表明目前 Git 倉(cāng)庫(kù)處于 v2 分支。
同時(shí)，編輯文件內(nèi)容時(shí)，將會(huì)在所編輯代碼左側(cè)實(shí)時(shí)顯示相對(duì)于上一版本內(nèi)容的比較。
樣式說(shuō)明如下：
文件夾目錄圖標(biāo)狀態(tài)的含義如下：
| 樣式 | 含義 |
|---|---|
| 藍(lán)色線條 | 此處的代碼有變動(dòng) |
| 綠色線條 | 此處的代碼是新增的 |
| 紅色三角箭頭 | 此處有代碼被刪除 |
Windows 風(fēng)格回車(chē)設(shè)置
如需忽略 Windows 風(fēng)格的回車(chē)符，可以前往 “設(shè)置” - “編輯”，并勾選 “Git 比較文件內(nèi)容時(shí)，忽略 Windows 風(fēng)格回車(chē)符”。
勾選后，在編輯文件進(jìn)行內(nèi)容比較時(shí)，所有 Windows 風(fēng)格的回車(chē)符將被當(dāng)作 Unix 風(fēng)格的回車(chē)符對(duì)待。
項(xiàng)目配置文件
可以在項(xiàng)目根目錄使用 project.config.json 文件對(duì)項(xiàng)目進(jìn)行配置。
| 字段名 | 類(lèi)型 | 說(shuō)明 |
|---|---|---|
| miniprogramRoot | Path String | 指定小程序源碼的目錄(需為相對(duì)路徑) |
| qcloudRoot | Path String | 指定騰訊云項(xiàng)目的目錄(需為相對(duì)路徑) |
| pluginRoot | Path String | 指定插件項(xiàng)目的目錄(需為相對(duì)路徑) |
| compileType | String | 編譯類(lèi)型 |
| setting | Object | 項(xiàng)目設(shè)置 |
| libVersion | String | 基礎(chǔ)庫(kù)版本 |
| appid | String | 項(xiàng)目的 appid，只在新建項(xiàng)目時(shí)讀取 |
| projectname | String | 項(xiàng)目名字，只在新建項(xiàng)目時(shí)讀取 |
| packOptions | Object | 打包配置選項(xiàng) |
| debugOptions | Object | 調(diào)試配置選項(xiàng) |
| scripts | Object | 自定義預(yù)處理 |
compileType 有效值
| 名字 | 說(shuō)明 |
|---|---|
| miniprogram | 當(dāng)前為普通小程序項(xiàng)目 |
| plugin | 當(dāng)前為小程序插件項(xiàng)目 |
setting 中可以指定以下設(shè)置
| 字段名 | 類(lèi)型 | 說(shuō)明 |
|---|---|---|
| es6 | Boolean | 是否啟用 es6 轉(zhuǎn) es5 |
| postcss | Boolean | 上傳代碼時(shí)樣式是否自動(dòng)補(bǔ)全 |
| minified | Boolean | 上傳代碼時(shí)是否自動(dòng)壓縮 |
| urlCheck | Boolean | 是否檢查安全域名和 TLS 版本 |
| uglifyFileName | Boolean | 是否進(jìn)行代碼保護(hù) |
scripts 中指定自定義預(yù)處理的命令
| 名字 | 說(shuō)明 |
|---|---|
| beforeCompile | 編譯前預(yù)處理命令 |
| beforePreview | 預(yù)覽前預(yù)處理命令 |
| beforeUpload | 上傳前預(yù)處理命令 |
packOptions
packOptions 用以配置項(xiàng)目在打包過(guò)程中的選項(xiàng)。打包是預(yù)覽、上傳時(shí)對(duì)項(xiàng)目進(jìn)行的必須步驟。
目前可以指定 packOptions.ignore 字段，用以配置打包時(shí)對(duì)符合指定規(guī)則的文件或文件夾進(jìn)行忽略，以跳過(guò)打包的過(guò)程，這些文件或文件夾將不會(huì)出現(xiàn)在預(yù)覽或上傳的結(jié)果內(nèi)。
packOptions.ignore 為一對(duì)象數(shù)組，對(duì)象元素類(lèi)型如下：
| 字段名 | 類(lèi)型 | 說(shuō)明 |
|---|---|---|
| value | string | 路徑1或取值 |
| type | string | 類(lèi)型 |
其中，type 可以取的值為 folder、file、suffix、prefix、regexp2、glob2，分別對(duì)應(yīng)文件夾、文件、后綴、前綴、正則表達(dá)式、Glob 規(guī)則。所有規(guī)則值都會(huì)自動(dòng)忽略大小寫(xiě)。
注 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è)置的更改可能需要重新打開(kāi)項(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)閉并重新打開(kāi)項(xiàng)目才能看到效果。
項(xiàng)目配置示例：
{
"miniprogramRoot": "./src",
"qcloudRoot": "./svr",
"setting": {
"postcss": true,
"es6": true,
"minified": true,
"urlCheck": false
},
"packOptions": {
"ignore": []
},
"debugOptions": {}
}快捷鍵
見(jiàn)工具菜單欄
新聞名稱(chēng)：創(chuàng)新互聯(lián)小程序教程：微信小程序工具代碼編輯
本文來(lái)源：http://fisionsoft.com.cn/article/djcgedi.html
