從零實現一個單詞對戰遊戲 (五) 實戰篇1: 小程序開發環境搭建

磨刀不誤砍柴工，純用微信小程序官方IDE做爲開發工具 …… 不香，本篇文章和同窗們一塊兒搭建小程序開發環境，包含eslint代碼自動格式化，git代碼管理，雲開發環境配置(開發環境 + 生產環境)，vscode插件推薦html

項目環境

小程序初始化，直接使用微信小程序IDE建立雲開發項目便可，不作贅述
本篇須要用到的軟件包含：NodeJS + npm包管理器，git - 代碼版本管理，vscode - 前端強大編輯器請自行安裝，具體安裝教程可網上找

配置eslint

代碼規範和錯誤檢查工具，配合開發工具，實現代碼自動格式化、修復格式前端

小程序中推薦使用eslint-config-wxapp配置項，本身調了挺久的適合小程序的代碼風格 ~ 固然，適合本身的纔是最好的，能夠自行寫rules覆蓋node

在項目根目錄執行以下命令，安裝配置文件和項目eslint服務

# 初始化npm文件，package.json，-y 表示所有選擇yes npm默認配置 (能夠本身執行npm init，就只帶 -y的含義了)
npm init -y

#安裝eslint配置和eslint，-D (--save-dev)表明所安裝的爲開發環境依賴， -S (--save)表明所安裝的爲代碼依賴
npm i eslint-config-wxapp eslint -D
複製代碼

配置eslint

在項目根目錄新建.eslintrc，在文件中寫入如下內容ios

{
  "extends": "eslint-config-wxapp",
  "rules": {
  }
}
// rules中能夠加入自定義配置去覆蓋默認配置
複製代碼

vscode安裝插件

在vscode插件商店中安裝ESLint，用於代碼自動格式化修復
在vscode的設置中設置以下配置實現自動修復

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
複製代碼

至此，實現了代碼校驗，具體能夠本身測試，相信大部分看這篇文章的新手很少，更多的廣度能夠根據關鍵字搜索學習 ~git

git配置

git的學習和github的使用，是每一個工程師必備的技能，學習資料不少，在這裏推薦：github

vscode插件安利

Bracket Pair Colorizer：彩色括號
GitLens：查看代碼是哪一個同窗寫的
LeetCode：刷算法題的正確方式
Regex Previewer：正則調試
Turbo Console Log：快速打印(console.log)變量
TODO Highlight + TODO-Tree：TODO管理、高亮

單詞每天鬥例子

雲開發環境配置

正式開發，服務端都推薦有兩個以上的環境，避免有用戶在生產環境使用的時候，須要開發調試，更符合開發流程算法

首先在雲開發申請兩個環境，小程序雲開發免費版支持兩個環境
全局環境配置

// 全局的app.js中加入

initEnv() {
    const envVersion = __wxConfig.envVersion
    // 實如今體驗版和正式版使用生產環境，開發階段使用開發環境
    // 雲數據庫 + 雲函數
    const env = envVersion === 'develop' ? 'dev' : 'prod' // ['develop', 'trial', 'release']
    wx.cloud.init({
      env,
      traceUser: true
    })
    this.store.env = env
},
onLaunch() {
    this.initEnv()
},
複製代碼

項目框架

寫好的項目的目錄結構以下，稍做解析，後面章節詳細分析數據庫

├── README.md
├── cloudfunctions # 雲開發_雲函數目錄
|  ├── model_auto_sign_trigger # 自動簽到定時觸發器, 實現了3個本身的帳號自動簽到刷排行榜
|  |  ├── config.json
|  |  ├── index.js
|  |  └── package.json
|  ├── model_book_changeBook # 改變單詞書
|  |  ├── config.json
|  |  ├── index.js
|  |  ├── package-lock.json
|  |  └── package.json
|  ├── model_userWords_clear # 清除用戶生詞
|  |  ├── config.json
|  |  ├── index.js
|  |  └── package.json
|  ├── model_userWords_get # 獲取用戶生詞
|  |  ├── config.json
|  |  ├── index.js
|  |  └── package.json
|  └── model_user_getInfo # 獲取用戶信息
|     ├── config.json
|     ├── index.js
|     ├── package-lock.json
|     └── package.json
├── db # 數據整理的腳本
|  ├── old(1.0的腳本和單詞)
|  |  ├── data
|  |  ├── db
|  |  ├── user.json
|  |  ├── userWord.json
|  |  ├── v1OldDataBaseBack
|  |  ├── words.json
|  |  └── words2dbFile.js
|  ├── pk_book_v1.json
|  ├── pk_book_v2.json
|  ├── pk_book_v2_add.json
|  ├── pk_user.json
|  ├── pk_userWord.json
|  ├── script
|  |  ├── data
|  |  ├── db
|  |  └── words2dbFile.js
|  ├── userWord_transform.js
|  └── user_transform.js
├── design # 設計稿文件
|  ├── MILanProVF-Medium.ttf
|  ├── home-bg.jpg
|  ├── static
|  |  ├── bg1.png
|  |  ├── bg10.png
|  |  ├── bg11.png
|  |  ├── bg2.png
|  |  ├── bg3.png
|  |  ├── bg4.png
|  |  ├── bg5.png
|  |  ├── bg6.png
|  |  ├── bg7.png
|  |  ├── bg8.png
|  |  └── bg9.png
|  └── words-pk-re.sketch # 設計稿
├── docs # 項目文檔
|  └── ...
├── miniprogram # 小程序前端目錄
|  ├── app.js
|  ├── app.json
|  ├── app.wxss
|  ├── audios # 選詞正確錯誤的發音
|  |  ├── correct.mp3
|  |  └── wrong.mp3
|  ├── components # 全局組件
|  |  ├── header
|  |  ├── loading
|  |  └── message
|  ├── images
|  |  ├── book-BEC.png
|  |  ├── book-CET4.png
|  |  ├── book-CET4Full.png
|  |  ├── book-CET6.png
|  |  ├── book-CET6Full.png
|  |  ├── book-IELTS.png
|  |  ├── book-high.png
|  |  ├── book-kaoYan.png
|  |  ├── book-kaoYanFull.png
|  |  ├── book-middle.png
|  |  ├── book-primary.png
|  |  ├── book-random.png
|  |  ├── combat-back.png
|  |  ├── combat-bgm-close.png
|  |  ├── combat-bgm-open.png
|  |  ├── combat-default-avatar.png
|  |  ├── combat-finish-fail.png
|  |  ├── combat-finish-win.png
|  |  ├── combat-g.png
|  |  ├── combat-pk-getGrade.png
|  |  ├── combat-pk.png
|  |  ├── combat-random-in.png
|  |  ├── combat-random-out.png
|  |  ├── combat-tip.png
|  |  ├── combat-video-ad.png
|  |  ├── combat-x.png
|  |  ├── home-bg.jpg
|  |  ├── home-book.png
|  |  ├── home-btn-ai.png
|  |  ├── home-btn-hot.png
|  |  ├── home-btn-pk.png
|  |  ├── home-btn-random.png
|  |  ├── home-grade.png
|  |  ├── home-issue.png
|  |  ├── home-pikaqiu.png
|  |  ├── home-pvp.png
|  |  ├── home-rank.png
|  |  ├── home-setting.png
|  |  ├── home-sign.png
|  |  ├── home-sun.png
|  |  ├── home-tip.png
|  |  ├── home-userwords.png
|  |  ├── home-win.png
|  |  ├── home-zan.png
|  |  ├── loading.png
|  |  ├── message-close.png
|  |  ├── message-logo.png
|  |  ├── ranking-N1.png
|  |  ├── ranking-N2.png
|  |  ├── ranking-N3.png
|  |  ├── ranking-grade.png
|  |  ├── setting-right.png
|  |  ├── share-default-bg.png
|  |  ├── share-pk-bg.png
|  |  ├── word-countdown.png
|  |  ├── word-delete.png
|  |  ├── word-play.png
|  |  ├── word-share.png
|  |  ├── word-tip.png
|  |  └── word-video-ad.png
|  ├── miniprogram_npm # 小程序npm目錄
|  |  └── wxapp-animate
|  ├── model # 全部的數據庫操做，這樣抽離出來，代碼能優美不少 ~
|  |  ├── base.js # 基類
|  |  ├── book.js # 一個數據集合對應一個文件 ↓
|  |  ├── index.js
|  |  ├── room.js
|  |  ├── sign.js
|  |  ├── user.js
|  |  ├── userWord.js
|  |  └── word.js
|  ├── package-lock.json
|  ├── package.json
|  ├── pages # 頁面
|  |  ├── combat # 每個頁面下有一個組件目錄，做爲此頁面的業務組件
|  |  ├── home
|  |  ├── ranking
|  |  ├── setting
|  |  ├── sign
|  |  ├── userWords
|  |  └── wordChallenge
|  ├── sitemap.json
|  └── utils
|     ├── Tool.js # 全局工具類，放了加載、全局store等，後面章節作解析
|     ├── ad.js
|     ├── log.js
|     ├── router.js # 全局路由
|     ├── setting.js # 全局設置
|     └── util.js # 全局工具函數
├── package-lock.json
├── package.json
└── project.config.json
複製代碼

寫在最後

作一個前端項目前，推薦先把eslint、git、基本架構搭建、環境區分之類的設計好了，而後再開始愉快的編碼
本篇的實際案例比較水，後面章節會對具體目錄裏的代碼作解析，但須要知道的是，之後要找目錄結構能夠到本章節尋找 ~

本書是一個實戰系列的分享，還達不到掘金小冊的要求，會持續更新、修正，感謝同窗們來一塊兒學習 ~npm

項目開源

因爲本項目參加了大學的比賽，因此暫時不作開源，比賽結束在微信公衆號：Join-FE進行開源（代碼 + 設計圖），關注不要錯過哦 ~json

同系列文章，能夠到老包同窗的掘金主頁食用