一、新建項(xiàng)目

使用小程序開(kāi)發(fā)者工具新建項(xiàng)目, 如本例的 miniprogram-templete 項(xiàng)目, 最好新建兩級(jí)同名目錄, 比如 /Users/kevin/miniprogram-templete/miniprogram-templete , 這是為了讓 WebStorm 的生成文件, git, readme, eslint 等小程序無(wú)關(guān)文件都可以放在上一層, 這樣, 使用開(kāi)發(fā)者工具打開(kāi)下一層目錄時(shí), 就只留下相對(duì)比較純粹的小程序代碼

---

二、下載并配置 WebStorm

1. 添加 wxss 文件類(lèi)型

preferences -> Editor -> File Types -> Recognized File Types 中 選中 Cascading Style Sheet -> Registered Patterns 中點(diǎn) + 號(hào)新增 *.wxss 文件類(lèi)型

2. 添加 wxml 文件類(lèi)型

wxml 的高亮顯示

• 方式一
  preferences -> Editor -> File Types -> Recognized File Types 中 選中 XML -> Registered Patterns 中點(diǎn) + 號(hào)新增 *.wxml 文件類(lèi)型

• 方式二
  如果不想使用 xml 或 html 的高亮方式(如 wxml 有些語(yǔ)法 html/xml 沒(méi)有，可能造成報(bào)錯(cuò), 拋紅等等不愉快的使用體驗(yàn)), 則可以自定義文件類(lèi)型, preferences -> editor -> file types -> 添加文件類(lèi)型
  

在 keywords 中添加 wxml 語(yǔ)法的關(guān)鍵詞即可

3. 微信小程序 js 代碼提示

下載 wecharCode.jar, 然后在 WebStorm 的 File -> import settings 中導(dǎo)入

---

三、項(xiàng)目基礎(chǔ)配置

1. 環(huán)境工具類(lèi)配置

使用 WebStorm 在相應(yīng)位置打開(kāi)新建的項(xiàng)目(外層如 /Users/kevin/miniprogram-templete), 在 pages 同級(jí)目錄下新建 config/env 目錄, 該目錄下新建 env.js 文件

export const envs = {product: 'product',test: 'test',dev: 'dev' };export const env = envs.dev;

2. 日志工具類(lèi)

在 utils 目錄下新建 logger.js 文件, 參考 miniprogram-template/logger.js

3. 通用工具類(lèi)

在 utils 文件夾下新建 utils.js , 是一個(gè)簡(jiǎn)單工具類(lèi), 參考 miniprogram-template/utils.js

3. 圖片工具類(lèi)

在 utils 文件夾下新建 images.js, 是一個(gè)圖片引用的類(lèi), 參考 miniprogram-template/images.js

4. 微信 api 工具類(lèi)

在 utils 文件夾下新建 wxutils.js, 是一個(gè)跟小程序 api 相關(guān)的工具類(lèi), 參考 miniprogram-template/wxutils.js

---

四、grace 的使用

1. 引入 grace

在 pages 同級(jí)目錄下新建 config/grace 目錄, 該目錄下新建 entry.js 文件, 將 GitHub 上 grace 用以引用的 index 的內(nèi)容拷貝到 entry.js 中, 另外, 關(guān)于 grace 的使用參考請(qǐng)參考 grace 的 GitHub 主頁(yè)

2. grace 的 mixin

在 config/grace 下新建 mixin 目錄，并新建 mixin 文件 pagemixin.js , 此處用于小程序 page 的生命周期增強(qiáng)(本例的增強(qiáng)僅為簡(jiǎn)單日志打印), 參考 miniprogram-template/pagemixin.js

3. grace 主文件

在 config/grace 下新建 grace.js, 參考 miniprogram-template/grace.js

---

五、網(wǎng)絡(luò)請(qǐng)求

1. 接口 mock

在 config/request 下新建 mock 目錄并新建 mock.js 文件, 參考 miniprogram-template/mock.js

2. 網(wǎng)絡(luò)請(qǐng)求相關(guān)配置

在 config 下新建 request 目錄，并新建 errhandler.js , 參考 miniprogram-template/errhandler.js

在 config/request 目錄下新建 httpConfig.js , 此處的地址和超時(shí)時(shí)間, 參考 miniprogram-template/httpConfig.js

在 config/request 目錄下新建 api.js , 此處的請(qǐng)求地址請(qǐng)按需修改, 參考 miniprogram-template/api.js

---

六、less 的使用

由于小程序不支持 less, 所以此處的 less 還需要轉(zhuǎn)換為 wxss, 這里使用 WebStorm 的 File Watcher 實(shí)現(xiàn)

1. 安裝 less

如果你已經(jīng)安裝過(guò) less, 這一步可以跳過(guò)

# sudo npm install less -g /Users/hongtiancai/.nvm/versions/node/v8.9.4/bin/lessc -> /Users/hongtiancai/.nvm/versions/node/v8.9.4/lib/node_modules/less/bin/lessc #

2. File Watcher

先在 preferences —> editor —> File Types —> Cascading Style Sheet 中添加 *.wxss 的類(lèi)型, 如果已添加, 可以跳過(guò)這一步

打開(kāi) preferences -> tool —> file watchers

添加 less 的 watcher, 修改程序的路徑, 程序路徑 program 是前面安裝的 less 路徑如 /Users/kevin/.nvm/versions/node/v8.9.4/lib/node_modules/less/bin/lessc

輸出路徑這個(gè)地方修改一下, 將原來(lái)默認(rèn)的 .css 改成 .wxss

argument 也改成$FileName$ $FileNameWithoutExtension$.wxss

3. 驗(yàn)證

我們?cè)诰庉嬈髦序?yàn)證下是否生效。添加一個(gè)less文件，我們會(huì)發(fā)現(xiàn)編輯器自動(dòng)給我添加了一個(gè)相應(yīng)的wxss文件。

編寫(xiě)less文件，然后保存，再打開(kāi)wxss文件，發(fā)現(xiàn)編譯成功，那我們大功告成了

---

七、全局樣式

在 pages 同級(jí)目錄下 style 目錄, 該目錄作為全局 css 的存放位置, 并新建global.less(使用 less 的前提是你得先完成第六步), 此時(shí)會(huì)自動(dòng)生成 global.wxss, 我們?cè)?global.less 中放一些諸如主色調(diào), 通用樣式等配置, 參考 miniprogram-template/global.less

---

八、Eslint 的使用

1. 新建針對(duì)本項(xiàng)目的 eslint 文件 .eslintrc.js

與之相對(duì)的, 我們還可以新建針對(duì)所有項(xiàng)目的全局 eslint 文件, 如果團(tuán)隊(duì)有固定且統(tǒng)一的 eslint 要求, 則團(tuán)隊(duì)成員可以在全局使用這相同的一份 eslint, 本示例僅針對(duì)當(dāng)前項(xiàng)目, 所以本文件新建在根目錄(外層目錄)下, 參考 miniprogram-template/.eslintrc.js

2. node 安裝 eslint

安裝完會(huì)顯示安裝位置如

? kevin sudo npm install eslint -g Password: /usr/local/bin/eslint -> /usr/local/lib/node_modules/eslint/bin/eslint.js + eslint@6.0.1 added 121 packages from 75 contributors in 157.481s ? kevin

3. WebStorm 安裝 eslint 插件

如果你的 WebStorm 沒(méi)有安裝 eslint 插件請(qǐng)先安裝, preferences -> plugins -> 搜索 eslint -> install

安裝好之后

找到 preferences -> ESLint Settings, 選中, 就會(huì)進(jìn)入配置頁(yè)面

勾選 Enable -> 第一項(xiàng)配置自己安裝 nodejs 目錄如 /usr/local/bin/node

第二項(xiàng)配置 eslint 安裝位置, 即可執(zhí)行文件位置如當(dāng)前項(xiàng)目中 /usr/local/bin/eslint

第三項(xiàng)改成 .eslintrc.js, 即表示項(xiàng)目根目錄下的 .eslintrc.js 文件

然后點(diǎn)擊應(yīng)用

安裝好 eslint 插件后, 就可以在菜單欄下的 code -> ESlint Fix 按照 eslint 的格式代碼, 也可以設(shè)置快捷鍵如下

點(diǎn)擊 keyMap -> 搜索 eslint -> 選中 code 下面的 eslint -> 右鍵 Add Keyboard ShortCut 摁住 option + X 鍵

以后使用 option + x 就可以直接進(jìn)行 eslint 修復(fù)了

---

九、常用組件

在 pages 同級(jí)目錄下新建 comps 目錄, 該目錄作為全局組件的存放位置, 現(xiàn)在往 comps 目錄下放入一些常用組件如 Img, 組件詳情不再贅述, 可以移步模板代碼處參考 miniprogram-template

---

十、刪除默認(rèn)頁(yè)面, 新建頁(yè)面模板

刪除默認(rèn)的 index 和 log 的 page 頁(yè)面(app.json 中也要?jiǎng)h去對(duì)應(yīng)的頁(yè)面配置), 以及默認(rèn) util/util.js , 新建 page 頁(yè)面 index (包含 less 樣式表, 如完成第六步, 則會(huì)自動(dòng)生成 wxss), Index.js 參考 miniprogram-template/index.js

這里有個(gè)地方要注意，比如 page 頁(yè)面的生命周期函數(shù)如果寫(xiě)成 onload: () => {} , 即箭頭函數(shù), 可能會(huì)造成函數(shù)中使用 this 時(shí) eslint 拋 no-invalid-this 的錯(cuò)誤, 所以 onload() {}

---

十一、git 倉(cāng)庫(kù)

1. Github 上新建項(xiàng)目

2. 新建 .gitignore 文件

在本地項(xiàng)目根目錄下新建 .gitignore 文件如下

.idea/* project.config.json .DS_Store

3. readme 文件

新建 readme 文件初始內(nèi)容如下

## 小程序模板 使用 webstorm, grace, less，以及包含一些工具類(lèi)的簡(jiǎn)單模板，用于快速創(chuàng)建項(xiàng)目，直接clone即可使用

4. 推送到git倉(cāng)庫(kù)

git init git add . git commit -m "init" git remote add origin git@github.com:codinghck/miniprogram-template.git // 如果遇到fatal: remote origin already exists.問(wèn)題， // 則git remote rm origin后重試 git push -u origin master

---

十二、完成

至此, 小程序開(kāi)發(fā)簡(jiǎn)單模板初始化新建完成, git 地址 miniprogram-template

總結(jié)

以上是生活随笔為你收集整理的新建简单小程序快速开发模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。