从零实现一个单词对战游戏 (五) 实战篇1: 小程序开发环境搭建

麦喵单词卡丨麦一
2,427 阅读4分钟

磨刀不误砍柴工，纯用微信小程序官方IDE作为开发工具 …… 不香，本篇文章和同学们一起搭建小程序开发环境，包含eslint代码自动格式化，git代码管理，云开发环境配置(开发环境 + 生产环境)，vscode插件推荐

项目环境

配置eslint

代码规范和错误检查工具，配合开发工具，实现代码自动格式化、修复格式

小程序中推荐使用eslint-config-wxapp配置项，自己调了挺久的适合小程序的代码风格 ~ 当然，适合自己的才是最好的，可以自行写rules覆盖

  1. 在项目根目录执行如下命令，安装配置文件和项目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
  1. 配置eslint

在项目根目录新建.eslintrc，在文件中写入以下内容

{
  "extends": "eslint-config-wxapp",
  "rules": {
  }
}
// rules中可以加入自定义配置去覆盖默认配置

  1. vscode安装插件
  • 在vscode插件商店中安装ESLint，用于代码自动格式化修复
  • 在vscode的设置中设置如下配置实现自动修复
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

eslint配置

至此，实现了代码校验，具体可以自己测试，相信大部分看这篇文章的新手不多，更多的广度可以根据关键字搜索学习 ~

git配置

git的学习和github的使用，是每个工程师必备的技能，学习资料很多，在这里推荐：

vscode插件安利

单词天天斗例子

云开发环境配置

正式开发，服务端都推荐有两个以上的环境，避免有用户在生产环境使用的时候，需要开发调试，更符合开发流程

  1. 首先在云开发申请两个环境，小程序云开发免费版支持两个环境
  2. 全局环境配置
// 全局的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、基本架构搭建、环境区分之类的设计好了，然后再开始愉快的编码
  • 本篇的实际案例比较水，后面章节会对具体目录里的代码做解析，但需要知道的是，以后要找目录结构可以到本章节寻找 ~

本书是一个实战系列的分享，还达不到掘金小册的要求，会持续更新、修正，感谢同学们来一起学习 ~

项目开源

由于本项目参加了大学的比赛，所以暂时不做开源，比赛结束在微信公众号：Join-FE进行开源（代码 + 设计图），关注不要错过哦 ~

公众号

同系列文章，可以到老包同学的掘金主页食用

avatar
文章
阅读
粉丝