小程序基本开发规范

梳理

命名

1.文件夹|文件 命名：小驼峰形式shareInfo

2.图片命名：下划线连接avatar_none.png

3.特殊命名：公用模板目录下，每个模板中的wxss,类名固定加头：${模板名)-tem-pub，例如：.templateA-tem-pub-body {}

原因：引用该模板界面的wxss会影响模板本身的wxss

4.icon命名：使用的icon名必须是直接从iconfont网站对应的Font class直接生成的，如果要重新命名，务必去iconfont网站给对应icon重命名,然后重新生成新类名，严禁在小程序中直接改动

生成新类名步骤:（举个栗子）
1. 进入到生成的css链接，例如//at.alicdn.com/t/font_2470801_dp0o8hbj02.css,复制所有的类名部分，覆盖掉原先的所有类名部分
2. Unicode代码重新生成，复制代码，覆盖掉之前的@font-face {}部分
注意：如果直接在小程序修改icon类名，导致之后直接被覆盖的，出了bug自己处理

布局

推荐flex布局，尽量使用component/row 来布局，样式类为className, styleStr,而不是class, style,

扩展

已引入weui,组件在对应页面的json中引用如下，举个栗子：

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

路径引入

跨文件夹的情况下,统一使用绝对路径：（不要出现相对路径）
例：
/assets/styles/reset.wxss, /utils/utils.js, /components/iconfont/iconfont,...

文件初始化Snippet

唤起开头：iw，详细见.vscode/wx.code-snippets

目录结构

├── assets
│   ├── images（公共图片）
│   |   └── personal
│   |       ├── avatar_none.png
│   |       └── ...
│   └── styles （公用样式目录）
│       ├── color.css （颜色样式）
│       └── ...
|
├── behavior (自定义behavior)
│   ├── article（文件夹按照模块分）
│   |   ├── article.js
│   |   └── ...
│   └── ...
|
├── components (公共组件目录)
│   ├── shareInfo (分享组件)
│   |   ├── shareInfo.js
│   |   ├── shareInfo.json
│   |   ├── shareInfo.wxml
│   |   ├── shareInfo.wxss
│   |   └── template.wxml（共享同文件夹下的wxss）
│   └── ...
|
├── pages（主包目录）
│   ├── index
│   |   ├── index.js
│   |   ├── index.json
│   |   ├── index.wxml
│   |   ├── index.wxss
│   |   ├── template.wxml （index的模板文件，共享同文件夹下的wxss）
|   |   └── components（index组件目录，结构同公共组件目录）
│   └── ...
|
├── subpackages（分包目录）
│   │── packageA （结构同主包目录）
│   │── evaluationDetail （评测）
│   │── description （说明：维护页，隐私协议等）
|   └── ...
|
├── templates （公用模板目录）
│   │── templateA
|   |   ├── templateA.wxml
│   |   └── templateA.wxss
|   └── ...   
|
├── utils（公共模块，工具类）
│   ├── app.js（接口请求方法）
│   ├── constant.js（常量声明）
│   ├── http.js（接口请求配置）
│   ├── innerJumpData.js（小程序内部跳转BMS对照表）
│   ├── local.js（微信本地数据保存）
│   ├── navigation.js（微信跳转方法）
│   ├── util.js（公用方法）
│   └── valid.js（正则配置）
|
├── .gitignore
├── app.js
├── app.json
├── app.wxss （assets/style中的css需要引入到该文件）
├── project.config.json