xiaoe_mp_npm-kazi v0.0.7-t1206

miniprogram-custom-component

注意事项（一定按照格式来开发）：

1. 每次新增业务模块，就在src下建一个文件夹，首字母大写，后面单词以驼峰命名跟着
2. 要在tools下config.js最后，copy数组加入你新增这个文件夹名字，这样才会对你新加的进行打包
3. 每个业务模块下，建一个README.md文件，里面写好这个组件的开发或维护者、以及组件的使用注意事项等（参考ConfirmOrder里的readme.md）
4. 接口api参照src---common---api文件夹，confirmOrder.js，每个组件单独创建一个api的js，以组件名小写来命名
5. src---common文件，存放公共css、方法、图片资源、请求等
6. 原生小程序只支持css，不天然支持less，如果要使用less，开发工具vscode、微信开发者工具，这两个的配置不一样，可以参照网上的配置，然后在业务组件的文件夹下创建一个index.less，打包会自动编译成css文件的
7. 引入图片，过大的图片记得压缩或者使用网络地址
8. 由于引入了vant-ui，所以再用微信开发者工具打开miniprogram_dev运行时，记得点击左上方工具---npm构建，不然会报找不到文件
9. 由于这次同时开发这个项目人过多，采取这种方式拉分支，主分支：dev，每个人拉自己的开发分支，命名：dev-自己英文名，最多每两天将自己分支代码合到dev分支
10. 如果组件的组件目录下还需要分更小的组件，就在自己组件的目录下创建components，写在这下面，组件间的嵌套至多3层

小程序自定义组件开发模板：

• 支持使用 less 语法编写 wxss 文件
• 使用 webpack 构建 js
• 支持自定义组件单元测试
• 支持 eslint
• 支持多入口构建

开发

1. 安装依赖：

npm install

2. 执行命令：

npm run dev

默认会在包根目录下生成 miniprogram_dev 目录，src 中的源代码会被构建并生成到 miniprogram_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

npm run watch

ps: 如果 minirpogram_dev 目录下已存在小程序 demo，执行npm run dev则不会再将 tools 下的 demo 拷贝到此目录下。而执行npm run watch则会监听 tools 目录下的 demo 变动并进行拷贝。

3. 生成的 miniprogram_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

4. 进阶：

• 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
• 内置支持 webpack、less 语法、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
• 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
• 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

使用less

• 官方框架也配置了使用less的配置，但是这里我用的是另外的一种方案
• vscode使用less
• vscode中下载Easy Less插件，并在setting文件中配置

// 对EasyLess的配置，此段配置去掉则默认生成一个css文件
  "less.compile": {
    "compress": false, //是否压缩
    "sourceMap": false, //是否生成map文件
    "out": true, // 是否输出文件，false为不输出
    "outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
  },

• 然后在对应的目录下新建一个***.less 文件,保存后就自动生成了wxss文件

  

目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js

PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

测试

• 执行测试用例：

npm run test

• 执行测试用例并进入 node inspect 调试：

npm run test-debug

• 检测覆盖率：

npm run coverage

测试用例放在 test 目录下，使用 miniprogram-simulate 工具集进行测试，点击此处查看使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

其他命令

• 清空 miniprogram_dist 目录：

npm run clean

• 清空 miniprogam_dev 目录：

npm run clean-dev