用心公共小程序组件库

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

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

使用

• 使用命令行工具进行初始化
• 直接从 github 上 clone 下来

开发

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 行来关闭此功能。

目录结构

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

|--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

版本升级

由于版本发布需要用到np依赖，可以先阅读文档：np自动化发布工具文档

1. 先全局安装np包，如已安装，请跳过

npm install --global np

2. 更新构建目录

npm run build

3. 升级版本

np (版本号)

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

其他命令

• 清空 miniprogram_dist 目录：

npm run clean

• 清空 miniprogam_dev 目录：

npm run clean-dev

如何在小程序上使用用心公共小程序组件库

1.引入组件(如果已引入，请忽略)

在小程序根目录上执行：

npm install yonxin-test-plugin

2.在小程序构建npm：在微信开发者工具，菜单=>工具=>构建npm（如果已构建，请忽略）

3.在页面json文件引入组件（以yx-dialog为例）

"usingComponents": {
  "yx-dialog": "yonxin-test-plugin/yx-dialog/yx-dialog",
  ……
}

4.在页面js文件引入组件公共函数

import { Dialog } from 'yonxin-test-plugin/componentFunctions'

通过Dialog对象，可以使用组件内部的函数

5.在页面wxml使用组件

<yx-dialog id="XXXX" direction="XX">(插槽内是弹窗内容)</yx-dialog>

6.通过组件公共函数调用组件内部的函数

例如：弹出弹窗，参数传入selector字符串，选择具体的节点,建议使用id选择器，若此参数为空，读取上一次调用的selector 由于小程序基础库版本升级了，不建议使用

Dialog.show('#XXXX')

selector语法参考

selector类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

用心公共小程序组件介绍

1: yx-dialog公共弹窗组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:---- |:----: | | direction | 弹窗弹出的方向(例如bottom表示从页面下方到向上弹出，从中间弹出的时候，无法点击遮罩层收起弹窗，其他情况可以通过点击遮罩层收起弹窗) | String | bottom,top,left,right,center | bottom | | z-index | 弹窗的层级 | String或Number | - | 999 |

• Slots

| 名称 | 说明 | | :----: | :----: | | default | 弹窗的内容，根据各自项目的设计稿自行排版 |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | cancel | 点击遮罩层时触发的事件 | - |

• 组件函数

import { Dialog } from 'yonxin-test-plugin/componentFunctions'

| 函数名 | 说明 | 参数 | 返回值 | | :----: | :----: | :----: | :----: | | show | 弹出弹窗 | selector | - | | hide | 收起弹窗 | selector | - |

2: yx-handwriting公共签名版组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:---- |:----: | | background-color | 背景颜色，最终生成的签名图像也是这个背景颜色 | String | - | #fff | | anti-aliasing | 抗锯齿 | Boolean | - | false | | placeholder | 为空时占位符 | String | - | 例:张三 | | vertical | 是否竖向,为true时，placeholder文字方向为从上到下，否则从左到右 | Boolean | - | false | | placeholder-size | placeholder文字的大小，正整数，单位是像素 | String或Number | - | 80 |

• Slots

无

• 组件函数

import { Handwriting } from 'yonxin-test-plugin/componentFunctions'

| 函数名 | 说明 | 参数 | 返回值 | | :----: | :----: | :----: | :----: | | init | 初始化，组件要先初始化才可正常签名 | selector | - | | revoke | 撤销上一笔 |selector| - | | clear | 清除已绘制的图像 |selector| - | | canvasToImage | 把签名导出成图像 | selector,fileType(默认png，可选项有：png,jpg)|返回一个Promise，resolve一个图片临时路径：Handwriting.canvasToImage('#XXX', 'jpg').then(imagePath => {}) |

• Events

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 画一笔后触发 | { canRevoke(是否可以撤销) } |

3: yx-collapse公共折叠面板组件

• Collapse Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | value | 当前展开面板的 name | string[] | - | [] |

• Collapse Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 切换面板时触发 | { activeNames(当前展开的name数组) } |

• CollapseItem Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | name | 唯一标识符，默认为索引值 | string | - | index | | title | 标题栏左侧内容 | string | - | - |

• CollapseItem Slot

| 名称 | 说明 | | :----: | :----: | | - | 面板内容 | | title | 自定义title，当prop中的title为空时，显示自定义title |

• CollapseItem Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 切换面板时触发 | { name, isUnfold(是否展开) } |

4: yx-rate公共评分组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | count | 图标总数 | number | - | 5 | | void-color | 未选中时的颜色 | string | - | #E5E5E5 | | color | 选中时的颜色 | string | - | #f95914 | | size | 图标大小（单位：像素） | number或string | - | 25 | | gutter | 图标间距（单位：像素） | number或string | - | 14 | | value | 当前分值 | number或string | - | 5 | | allow-half | 允许半星 | boolean | - | false | | min | 最低分 | number或string | - | 1 | | readonly | 是否只读，只读会显示具体分数 | boolean | - | false |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 当前分值变化时触发的事件 | 当前分值 |

5: yx-loading公共加载中组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | show | 是否显示 | boolean | - | false | | show-type | 显示类型 | string | loading或nothing | loading | | nothing-text | 数据加载完时显示的文案 | string | - | —— 没有更多了 —— | | loading-text | 数据正在加载时显示的文案 | string | - | 加载中... | | color | 文字颜色 | string | - | #ccc |

6: yx-list列表加载翻页组件 可以上拉加载、 下拉刷新

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | loading | 是否显示加载中 | boolean | - | false | | no-more | 是否没有更多内容了 | boolean | - | false | | page-no | 页码 | Number | - | 1 | | no-data | 是否有数据了 | boolean | - | false | | height | 列表高度(要加上单位px、rpx、vh) | string | - | 100vh | | refresher | 是否开启下拉刷新 | boolean | - | false | | refresherTriggered | 下拉刷新状态值 | boolean | - | false |

• Event

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | scrollToLower | 列表滚动到底部执行的函数 | Function | - | - | | scroll | 列表滚动时可以执行的函数 | Function | - | - | | refresher | 列表下刷刷新 | Function | - | - |

7: yx-cell 单元格组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | title-align | 标题左对齐或右对齐 | String | left/right | left | | title | 单元格标题 | String | - | 标题 | | size | 单元格上下边距 | small | - | - | | title-width | 标题宽度 | String | - | - | | value | 单元格的值 | string | - | - | | value-align | 单元格的值左对齐或右对齐 | string | - | - | | url | 跳转路径 | string | - | - | | arrow | 是否显示右边箭头 | Boolean | - | false | | border | 是否显示底部边框 | Boolean | - | false | | rightIcon | 自定义右边图标url | String | - | - | | padding | 是否显示左右两边边距 | Boolean | - | false | | color | 值的字体颜色 | String | - | #888 | | fontSize | 标题 和 值 的字体大小 | String / Number | - | 15 |

• Event

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | click | 点击单元格触发的函数 | Function | - | - |

8: yx-search公共搜索组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | shape | 形状 | string | square / round | square | | value | 当前输入的值 | string | | | | background | 搜索框背景色 | string | | #fff | | clearable | 是否启用清除控件 | boolean | | true | | placeholder | 输入框为空时占位符 | string | | 请输入搜索关键词 | | disabled | 是否禁用 | boolean | | false |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | search | 确定搜索时触发 | 当前输入值 |

9: yx-swipe-cell 滑动单元格组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | disabled | 是否禁用滑动 | boolean | | false | | name | 标识符，可以在 close 事件的参数中获取到 | string | number | | -- | | left-width | 左侧滑动区域宽度(固定单位为px) | number | | 0 | | right-width | 右侧滑动区域宽度 | number | | 0 | | async-close | 是否异步关闭 | boolean | | false |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | click | 点击时触发 | 关闭时的点击位置 (left right cell outside) | | close | 关闭时触发 | { position: 'left' | 'right' , instance , name: string } | | open | 打开时触发 | { position: 'left' | 'right' , name: string } | | start | 开始打开时触发 | { name: string } | | startend | 开始关闭或取消时触发 | { name: string } |

10: yx-radio公共单选框组件

• RadioGroup Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | value | 单选框组的值(对应radio的name) | string | - | - | | disabled | 是否禁用(整个单选框组) | boolean | - | false |

• RadioGroup Slot

| 名称 | 说明 | | :----: | :----: | | - | 放置yx-radio标签的默认插槽 |

• RadioGroup Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 切换选项时触发 | 选中项的name |

• Radio Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | name | 该选项的唯一标识 | string | - | - | | shape | 形状 | string | square / round | round | | checked-color | 选中状态颜色 | string | - | #f95914 | | size | 图标大小，单位为rpx | string / number | - | 50 | | border-width | 图标边框的宽度, 单位为rpx | string / number | - | 2 | | border-color | 图标边框的颜色 | string | - | #ddd | | disabled | 是否禁用（该选项） | boolean | - | false | | checked-shape | 选中状态的形状 | string | fill / tick | tick | | checked-size | 选中图标大小,单位为rpx | string / number | - | 20 | | label-position | 通过slot传入的文本位置 | string | left / right | right | | default-color | 未选中状态icon的颜色 | string | - | none | | align-items | icon与文字的垂直对齐方式 | string | 同align-items的取值可选值 | center |

• Radio Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | checked | 该选项被选中时触发 | name |

11: yx-checkbox公共多选框组件

• CheckboxGroup Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | value | 多选框组的值(由checkbox的name组成的数组) | arrray | - | - | | disabled | 是否禁用(整个多选框组) | boolean | - | false |

• CheckboxGroup Slot

| 名称 | 说明 | | :----: | :----: | | - | 放置yx-checkbox标签的默认插槽 |

• CheckboxGroup Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 多选框组的值发生变化时触发 | 选中项的name数组 |

• Checkbox Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | name | 该选项的唯一标识 | string | - | - | | shape | 形状 | string | square / round | round | | checked-color | 选中状态颜色 | string | - | #f95914 | | size | 图标大小，单位为rpx | string / number | - | 50 | | border-width | 图标边框的宽度, 单位为rpx | string / number | - | 2 | | border-color | 图标边框的颜色 | string | - | #ddd | | disabled | 是否禁用（该选项） | boolean | - | false | | checked-shape | 选中状态的形状 | string | fill / tick | tick | | checked-size | 选中图标大小,单位为rpx | string / number | - | 20 | | label-position | 通过slot传入的文本位置 | string | left / right | right | | default-color | 未选中状态icon的颜色 | string | - | none |

• Checkbox Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | checked | 该选项被选中时触发 | { name, checked } |

12: yx-notice-bar公共通知栏组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | text | 通知文本内容 | string | - | - | | color | 通知文本颜色 | string | - | #ed6a0c | | background | 滚动条背景 | string | - | #fffbe8 | | speed | 滚动速率 (px/s) | string / number | - | 60 | | show-icon | 是否显示图标 | boolean | - | false |

13: yx-stepper公共步进器组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | name | 在表单内提交时的标识符 | string | - | - | | value | 输入值 | string / number | - | 最小值 | | min | 最小值 | string / number | - | 1 | | max | 最大值 | string / number | - | 1024 | | step | 步长 | string / number | - | 1 | | integer | 是否只允许输入整数 | boolean | - | false | | disabled | 是否禁用 | boolean | - | false | | disable-input | 是否禁用输入框 | boolean | - | false | | async-change | 是否开启异步变更，开启后需要手动控制输入值 | boolean | - | false | | input-width | 输入框宽度，默认单位为 rpx | string / number | - | 64 | | button-size | 按钮大小，默认单位为 rpx，输入框高度会和按钮大小保持一 | string / number | - | 56 |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | change | 当绑定值变化时触发的事件 | 当前输入的值 |

14: yx-navbar公共导航栏组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | header | 绑定数据的对象 | Object | - | - | | homeCapsule | 是否显示返回上一级导航栏和首页导航栏 | boolean | true/false | false | | headerbg | 顶部背景颜色 | string | - | #fff | | title | 标题 | string | - | - | | fontColor | 标题文字颜色 | string | - | #000 | | fontSize | 标题文字大小 | string | - | 16px | | hiddenBlock | 是否隐藏导航栏高度 | boolean | true/false | false | | capsulebg | 导航栏胶囊背景颜色 | string | - | rgba(0,0,0,0.2) | | capsuleborder | 导航栏胶囊边框样式 | string | - | 1px solid rgba(0,0,0,0.1) | | slot | 是否显示标题和图标 | boolean | true/false | false |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | backClick | 点击返回上一层图标时触发的事件 | 上一个页面或者首页 | | homeClick | 点击返回首页图标时触发的事件 | 首页 |

15: yx-progressbar公共环形进度条组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | progressBar | 绑定数据的对象 | Object | - | - | | num | 当前进度 | string | 0-100 | 0 | | direction | 方向, cw顺时针, cww逆时针 | string | cw/cww | cw | | size | 圆的大小 | string | - | 400rpx | | duration | 动画持续时间 | number | - | 450 | | progressColor | 进度条的颜色 | string | - | rgb(41,132,237) | | progressBackgroundColor | 进度条占位颜色 | string | - | #eaeaea | | backgroundColor | 中间的背景色 | string | - | #ffffff | | startDot | 进度条开始圆点 | boolean | true/false | false | | endDot | 进度条结束圆点 | boolean | true/false | false |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | sum | 点击添加一个随机数能看到进度条的实时效果 | 数字 |

16: yx-switch公共环形进度条组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | switchList | 绑定数据的对象 | Object | - | - | | isChecked1 | 是否选中 | boolean | true/false | true | | checkedColor | switch的颜色，同css的color | string | - | yellow | | switchType | 开关选择器的样式 | string | switch/checkbox | checkbox |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | changeSwitch1 | 选中或者取消取反 | true/false |

17: yx-uploader公共图片上传组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | uploaderList | 图片数组 | - | - | [] | | uploaderNum | 已上传图片 | number | - | 0 | | maxImgNum | 最多上传图片张数 | number | - | 0 | | desc | 描述 | string | - | - | | title | 标题 | string | - | - |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | getUploaderList | 获取上传图片 | - | | showImg | 展示图片事件 | - | | clearImg | 删除图片事件 | - |

18: yx-tabs公共选项卡组件

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | tabs | 参数数组 | - | - | [] | | value | 标题名字 | string | - | - | | isActive | 是否选中 | boolean | - | false | | content | 徽标 | number | - | - |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | handleTabsItemChange | 传数组给子组件 | - | | handleItemTap | 传索引给父组件 | - |

19: yx-upload-image图片加水印组件

说明：从相册中选择图片，添加水印，返回生成水印后的图片

• Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----: | :----: | :----: |:----: |:----: | | media-type | 文件类型 | string[] | image,video,mix | ['image'] | | source-type | 图片和视频选择的来源 | string[] | album,camera | ['album', 'camera'] | | count | 最多选取多少张图片（最大值：9） | string / number | - | 1 | | watermark-image | 水印图片url | string | - | - | | watermark-text | 水印文案 | string | - | - | | watermark-margin-horizontal | 水印的水平方向边距 | string / number | - | - | | watermark-margin-vertical | 水印的垂直方向边距 | string / number | - | - | | textSize | 水印文案的字体大小(像素) | string / number | - | 14 | | compress | 是否开启压缩 | boolean | - | false | | max-size | 高度或宽度的最大值(单位像素，开启compress后生效) | string / number | - | 400 | | quality | 压缩质量(0-1) | string / number | - | 0.8 | | file-type | 目标文件类型 | string | jpg，png | jpg |

• Event

| 函数名 | 说明 | 返回值 | | :----: | :----: | :----: | | success | 处理成功回调 | { detail({ tempFilePath, size }[]) } |