微信小程序开发配置指南

去伪存真
1,863 阅读5分钟

前言

本文是之前写的文章前端开发手册的姐妹篇文章，今天发现把这篇文档遗漏了, 导致在前端开发手册那篇文章里点击这篇文章的跳转链接会出现问题，现在补充一下。

规范

1. 小程序的开发模板选择 TS + Less -- 基础模板

微信原生小程序也在不断进行功能迭代，现在也支持Less样式预处理和TS类型约束了。

image.png

2. 导入已安装的vscode扩展

并非所有的vscode扩展都被微信开发者工具支持, 大部分vscode扩展还不被支持，支持的导入之后都会显示出来。比如说自动重命名配对的html/xml标签Auto Rename Tag, 给缩进添加颜色，方便辨别缩进的indent-rainbow等。

image.png

3.安装企微小程序模拟器插件+GitLens+Prettier

  • 企微小程序模拟器插件--小程序在企微中运行效果的模拟器
  • GitLens--Git源代码管理插件,比较好用的一个功能就是可以查看每一行代码的编辑修改者
  • Prettier--通用的代码格式化扩展

image.png

image.png

4. 微信小程序保存代码格式化配置

在项目根目录下创建.vscode\settings.json文件，将如下内容粘贴进去, 保存ts,json,less文件时就是自动格式化。wxml文件的格式化下面会讲。

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[wxss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[dotenv]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  }
}

5. wxml格式化配置

5.1 文件关联设置

HookyQR.beautify扩展并不支持wxml文件,但支持html文件格式化。 因此将wxml关联成html文件，保存代码时才能自动格式化。读者可能比较好奇为什么对于html文件不用Prettier进行格式化，因为格式化风格不如HookyQR.beautify看着美观(见仁见智的问题,也可以用Prettier)。

image.png

5.2 html格式化配置

这里以配置标签属性很多很长, 属性换行规则为例说明配置入口。

image.png

image.png

6.微信小程序的像素单位统一采用rpx

rpx可以适配不同屏幕尺寸，用在宽高，内外边距，位置移动方面，非常合适。但对字体不太适用，字体大小还是推荐用px, 否则在iPad设备上，字体会显得很大。

做完以下两项配置，就可以将蓝湖中的样式直接复制到微信小程序中，将px单位修改成rpx即可。

(1) 微信开发者工具机型要选择（375*667| Dpr:2);

image.png

(2) 蓝湖UI设计稿的宽度设置为750px;

image.png

7.蓝湖切图规范，选择低画质，2倍视觉稿图片

实践发现，通常情况下低画质，压缩之后的图片与高清图展示效果差别不是很大，肉眼并不能清晰分辨出差别。而微信小程序对打包之后的文件体积有要求，单个包大小不能超过2M, 虽说可以分包，但有诸多限制，比如说分包之间的资源,文件模板不能相互引用, 分包之间要想引用js，要进行分包异步化处理。所以一个主包能涵盖项目所有的文件最好，此种条件下，就要想方设法减小文件体积，而图片自然是个重点优化项。

image.png

image.png

image.png

8.微信小程序UI库用vant-weapp

选择它的理由：

  • 开发文档写的很nice, 加之使用者众多, 经受了各种场景考验，质量和稳定性均有保证
  • 我们项目中需要用到的组件，这个UI库都有，满足业务需求
  • 我们公司移动端的UI库用的也是Vant, 小程序用vant-weapp的话上手快

9. 设置开发编辑器的字体是18，主题颜色为wechat-light

这一条仅是建议，可按各人喜好选择。字体建议设置得大一点，看代码时间久了不伤视力。

image.png

image.png

10. 文件命名约定

  • 文件与文件夹同名。 这样做的好处是，在开发工具的标题栏，你可以一眼看出编辑的是哪个文件，如果每个页面下的主文件都命名为index.ts的话，看到标题栏一堆index.ts，你无法立刻辨别出编辑的是哪个业务文件。 image.png
  • 文件命名采用烤串命名风格。

这也是参考了vant-webapp的命名风格，貌似在微信小程序开发体系下，文件命名风格都是烤串风格。

image.png

11.编译模式设置(每次从正在开发的页面启动,而不是从应用首页启动)

每次修改文件重新编译之后，默认都从首页启动，通过手动点击进入到正在开发调试的页面。如果中间要经过好多个页面的中转，才能进入目标页面，就显得很费劲。这个设置虽然看着不起眼，却实实在在提高了开发效率。

image.png

12.对已添加到远程仓库的project.private.config.json设置忽略

project.private.config.json保存的是每个开发者对项目的个性化配置参数，不需要提交的版本库。如果不小心已经提交到版本库，设置忽略的方法是:

  1. 在本地仓库删除对文件project.private.config.json的追踪
git rm –cached project.private.config.json
  1. 在.gitignore中设置提交文件修改时对project.private.config.json文件进行忽略
  2. 将.gitignore忽略设置提交到本地和远程仓库。
  3. 通知团队成员git pull更新代码，此时就会发现project.private.config.json已被从版本库删除。
avatar
文章
阅读
粉丝