前言
距离上次初了解小程序结束已经20天了，因为公司项目催的急，所以会再安排一个前端来和我一起做项目。
所以为了让他快速上手小程序，并对项目结构有所了解，我写了一个开发指南。后来一想，顺便再把项目的初始化模板再做出来。
在这个新开的项目里，有一些初次尝试的东西。如eslint、pug、BEM，尽量将项目规范、严谨、整洁（即便只有自己一个人在开发。。。）。
模板下载
wepy-cli 版本 1.7.0 及以上
# 推荐 wepy init qianzhaoy/simple-wepy project-name # or git clone https://github.com/qianzhaoy/simple-wepy.git
开发指南
Git分支
日常开发分支请在 origin/dev 分支下开发
编辑器
建议使用 ，将.wpy文件关联Vue，并利用好代码片段，快速生成页面初始模板，并开启ESLint代码风格检查。
目录结构
开发前请先了解所有目录结构
│ .editorconfig│ .eslintignore│ .eslintrc.js│ .gitignore│ .prettierrc│ .wepycache│ .wepyignore│ CONTRIBUTING.md│ min.config.json // minui 组件配置文件│ package.json│ project.config.json│ README.md│ wepy.config.js│└─src │ app.wpy │ ├─api // 接口地址 │ ├─components // wepy 静态组件 │ ├─tabbar │ ├─images // 图片 │ ├─mixins // page 的 mixins | validation.js │ ├─pages // 所有页面 | | ├─style │ │ app.less // 全局样式（引入了公共样式和所有组件样式） | | │ ├─common // 公共样式 以及 变量 | | │ ├─components // 静态组件样式 | | │ ├─home // 页面样式 │ └─util // 工具类 │ created.js // 页面全局功能，需在页面引入并调用，参考现有页面 ( 注意，component无法使用全局方法，建议用event或者$parent ) | fly.config.js // 请求拦截器配置 │ template.js │ tool.js // 工具 │ wx.umd.min.js // fly.js源码，对标Vue的axios │ └─wxs filter.wxs // 过滤器
created.js
在这个js内，封装全局的使用方法，比mixins更加灵活，但更麻烦。
- 内部增加了一个
onBack生命周期，可以用在navigateBack时来传递数据。但是同样必须要用js内部封装的navigateBack方法来回退页面。为了API使用一致性，同样增加了navigateTo、redirectTo方法。 - 为了方便RESTful使用场景和接口请求。增加了四个全局方法。
reqGet、reqPost、reqPut、reqDel - 还有自定义转发
onShareAppMessage
环境变量
新增全局变量 __isProd， __isProd ? '生产环境' : '开发环境'
开发规范
预编译
- html -> Pug
- css -> Less (建议使用BEM命名规范)
- js -> ES6
class Page
// script 模板
class Component
与Page一样，多了一个 props 属性并且没有 config， 把 props 放置顺序代替 config 即可。
class Mixins
参考Page
ESLint
本项目使用了 ESLint 来做代码规范校验，写代码时需要严格执行该规范。.eslintrc.js 文件为规范的配置文件。
组件
现在 wepy 不支持原生组件，所以使用wepy编译组件的时候的一些注意事项。
- 父组件传值时，使用
.sync同步组件数据时，父组件的数据必须放在data下一级，不能放在data下的对象内。 - wepy 组件为静态组件，故使用时若要循环，要放在
repeat标签内，若要用多个就要在components再加一个ID - 项目使用了第三方组件库（）,此组件库为原生组件，所以不适用以上注意点。
- 关于编译的问题，因为公共和组件样式是在
app.less内引入的，所以直接修改组件样式不会立即更新，需要再修改app.less保存，才行（如打个空格保存）。
表单验证
写了一个简单的表单验证方法放在了 mixins/vuelidation.js , 需要页面内引入并加入 mixins: [ vuelidation ] , 然后在 Class 内增加一个 自定义属性 vuelidation 来配置校验方法。例：
class Login extends wepy.page { vuelidation = { username: [ { type: 'required', msg: '请输入账号' }, { type: 'username' } ], password: [ { type: 'required', msg: '请输入密码' } ] } } 关于 type，可以在 mixins/vuelidation.js 内的 methods 对象里添加验证方法
最后
参考了一下react的高阶组件的想法，增加了一个created.js的全局继承类。实验一下。现在唯一感觉还可以的是增加了一个onBack生命周期。
还有在项目里规范了写法和class命名。重点推荐使用 BEM 的class命名规范，我觉得小程序非常适合BEM的使用场景，虽然一开始对这个规范不太感冒，觉得类名太长了，不过用了之后幸福感还是有明显提升的（不说别的，光光清一色的规范命名也能使强迫症心情舒畅）。配合less 和 Pug 非常实用和整洁。