0.0.10 • Published 10 months ago
mini-wan4-ui v0.0.10
miniprogram-custom-component
小程序自定义组件开发模板：
- 支持使用 less 语法编写 wxss 文件
- 使用 webpack 构建 js
- 支持自定义组件单元测试
- 支持 eslint
- 支持多入口构建
使用
- 使用命令行工具进行初始化
- 直接从 github 上 clone 下来
开发
- 安装依赖：
npm install- 执行命令：
npm run dev默认会在包根目录下生成 miniprogram_dev 目录，src 中的源代码会被构建并生成到 miniprogram_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：
npm run watchps: 如果 minirpogram_dev 目录下已存在小程序 demo，执行
npm run dev则不会再将 tools 下的 demo 拷贝到此目录下。而执行npm run watch则会监听 tools 目录下的 demo 变动并进行拷贝。
生成的 miniprogram_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。
进阶：
- 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
- 内置支持 webpack、less 语法、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
- 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
- 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。
发布
ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。
- 如果还没有 npm 帐号，可以到 npm 官网注册一个 npm 帐号。
- 在本地登录 npm 帐号，在本地执行：
npm adduser或者
npm login- 在已完成编写的 npm 包根目录下执行：
npm publish到此，npm 包就成功发布到 npm 平台了。
PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。
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目录结构
以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:
|--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使用方式
// 登录和上传到NPM
npm 登录 npm login 输入账号
npm 查看当前账号 npm who am i
// 组件编写
1.在src下面添加組件文件夹 例如：index示例自定义button组件
2.添加 js json wxml wxss 四个文件 wxss 支持less编写
参考 (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)[自定义组件]
公共样式在 common.wxss 编写
3.tools文件夹config.js文件 里面entry添加入口 例如：index/index
4.tools/demo/pages添加对应测试页面 或者直接在index里面添加对应 usingComponents 和 组件
5.如果添加对应测试页面 app.json 添加对应pages
// 组件测试
npm run dev 生成测试小程序内容 可以使用测试号打开 整个文件 miniprogram_dev
npm run watch 生成测试小程序内容并监听 类似 webpack 热更新
npm run build 生成上传到npm的内容 一定要更新版本号
npm run dist 预生成
npm run clean-dev 删除miniprogram_dev文件夹
npm run clean 删除miniprogram_dist文件夹
npm run test 测试
npm run lint 格式报错用这个
使用npm run watch 生成 miniprogram_dev文件夹 使用开发者工具打开 miniprogram_dev 并用测试号使用 测试功能
// 上传版本
package.json版本号添加 0.0.9 => 0.0.10
建议组件参考 (https://github.com/ElemeFE/element/tree/dev/packages)[element UI]
npm run build 编译成npm的格式
npm publish 上传到npm
// 組件使用
1.要使用的小程序终端 npm init
2.引入我们的组件库 npm i mini-wan4-ui -S
3.在开发者工具中 点击左上角工具 => 构建npm 会生成 miniprogram_npm 目录
4.在xxx.json中使用 xxx:'mini-wan4-ui/xxx' 例如：index.json中添加 "mine-button": "mini-wan4-ui/index"
5.xxx.wxml中使用 xxx 例如:<mine-button type="primary" bindmyevent="onMyEvent">I'm a button 点击我</mine-button>