一、新建項目

使用小程序開發者工具新建項目, 如本例的 miniprogram-templete 項目, 最好新建兩級同名目錄, 比如 /Users/kevin/miniprogram-templete/miniprogram-templete , 這是為了讓 WebStorm 的生成文件, git, readme, eslint 等小程序無關文件都可以放在上一層, 這樣, 使用開發者工具打開下一層目錄時, 就只留下相對比較純粹的小程序代碼

---

二、下載并配置 WebStorm

1. 添加 wxss 文件類型

preferences -> Editor -> File Types -> Recognized File Types 中 選中 Cascading Style Sheet -> Registered Patterns 中點 + 號新增 *.wxss 文件類型

2. 添加 wxml 文件類型

wxml 的高亮顯示

• 方式一
  preferences -> Editor -> File Types -> Recognized File Types 中 選中 XML -> Registered Patterns 中點 + 號新增 *.wxml 文件類型

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

在 keywords 中添加 wxml 語法的關鍵詞即可

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

下載 wecharCode.jar, 然后在 WebStorm 的 File -> import settings 中導入

---

三、項目基礎配置

1. 環境工具類配置

使用 WebStorm 在相應位置打開新建的項目(外層如 /Users/kevin/miniprogram-templete), 在 pages 同級目錄下新建 config/env 目錄, 該目錄下新建 env.js 文件

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

2. 日志工具類

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

3. 通用工具類

在 utils 文件夾下新建 utils.js , 是一個簡單工具類, 參考 miniprogram-template/utils.js

3. 圖片工具類

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

4. 微信 api 工具類

在 utils 文件夾下新建 wxutils.js, 是一個跟小程序 api 相關的工具類, 參考 miniprogram-template/wxutils.js

---

四、grace 的使用

1. 引入 grace

在 pages 同級目錄下新建 config/grace 目錄, 該目錄下新建 entry.js 文件, 將 GitHub 上 grace 用以引用的 index 的內容拷貝到 entry.js 中, 另外, 關于 grace 的使用參考請參考 grace 的 GitHub 主頁

2. grace 的 mixin

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

3. grace 主文件

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

---

五、網絡請求

1. 接口 mock

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

2. 網絡請求相關配置

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

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

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

---

六、less 的使用

由于小程序不支持 less, 所以此處的 less 還需要轉換為 wxss, 這里使用 WebStorm 的 File Watcher 實現

1. 安裝 less

如果你已經安裝過 less, 這一步可以跳過

# 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 的類型, 如果已添加, 可以跳過這一步

打開 preferences -> tool —> file watchers

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

輸出路徑這個地方修改一下, 將原來默認的 .css 改成 .wxss

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

3. 驗證

我們在編輯器中驗證下是否生效。添加一個less文件，我們會發現編輯器自動給我添加了一個相應的wxss文件。

編寫less文件，然后保存，再打開wxss文件，發現編譯成功，那我們大功告成了

---

七、全局樣式

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

---

八、Eslint 的使用

1. 新建針對本項目的 eslint 文件 .eslintrc.js

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

2. node 安裝 eslint

安裝完會顯示安裝位置如

? 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 沒有安裝 eslint 插件請先安裝, preferences -> plugins -> 搜索 eslint -> install

安裝好之后

找到 preferences -> ESLint Settings, 選中, 就會進入配置頁面

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

第二項配置 eslint 安裝位置, 即可執行文件位置如當前項目中 /usr/local/bin/eslint

第三項改成 .eslintrc.js, 即表示項目根目錄下的 .eslintrc.js 文件

然后點擊應用

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

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

以后使用 option + x 就可以直接進行 eslint 修復了

---

九、常用組件

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

---

十、刪除默認頁面, 新建頁面模板

刪除默認的 index 和 log 的 page 頁面(app.json 中也要刪去對應的頁面配置), 以及默認 util/util.js , 新建 page 頁面 index (包含 less 樣式表, 如完成第六步, 則會自動生成 wxss), Index.js 參考 miniprogram-template/index.js

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

---

十一、git 倉庫

1. Github 上新建項目

2. 新建 .gitignore 文件

在本地項目根目錄下新建 .gitignore 文件如下

.idea/* project.config.json .DS_Store

3. readme 文件

新建 readme 文件初始內容如下

## 小程序模板 使用 webstorm, grace, less，以及包含一些工具類的簡單模板，用于快速創建項目，直接clone即可使用

4. 推送到git倉庫

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

---

十二、完成

至此, 小程序開發簡單模板初始化新建完成, git 地址 miniprogram-template

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。