Yonxin-test-plugin NPM

用心公共小程序组件库

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

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

使用

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

开发

安装依赖：

npm install

执行命令：

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 变动并进行拷贝。

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

如果有额外的构建需求，可自行修改 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

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

函数名	说明	返回值
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(是否可以撤销) }

函数名	说明	返回值
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(是否展开) }

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

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

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

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

函数名	说明	返回值
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

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

参数	说明	类型	可选值	默认值
scrollToLower	列表滚动到底部执行的函数	Function	-	-
scroll	列表滚动时可以执行的函数	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 - -

参数	说明	类型	可选值	默认值
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 确定搜索时触发当前输入值

函数名	说明	返回值
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 }

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

RadioGroup Props
参数说明类型可选值默认值
value 单选框组的值(对应radio的name) string - -
disabled 是否禁用(整个单选框组) boolean - false
RadioGroup Slot
名称说明
- 放置yx-radio标签的默认插槽
RadioGroup Event
函数名说明返回值
change 切换选项时触发选中项的name

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

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

函数名	说明	返回值
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

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

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

CheckboxGroup Props
参数说明类型可选值默认值
value 多选框组的值(由checkbox的name组成的数组) arrray - -
disabled 是否禁用(整个多选框组) boolean - false
CheckboxGroup Slot
名称说明
- 放置yx-checkbox标签的默认插槽
CheckboxGroup Event
函数名说明返回值
change 多选框组的值发生变化时触发选中项的name数组

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

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

函数名	说明	返回值
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 }

函数名	说明	返回值
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 当绑定值变化时触发的事件当前输入的值

函数名	说明	返回值
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 点击返回首页图标时触发的事件首页

函数名	说明	返回值
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 点击添加一个随机数能看到进度条的实时效果数字

函数名	说明	返回值
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

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

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

Props
参数说明类型可选值默认值
uploaderList 图片数组 - - []
uploaderNum 已上传图片 number - 0
maxImgNum 最多上传图片张数 number - 0
desc 描述 string - -
title 标题 string - -
Event
函数名说明返回值
getUploaderList 获取上传图片 -
showImg 展示图片事件 -
clearImg 删除图片事件 -

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

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

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

Props
参数说明类型可选值默认值
tabs 参数数组 - - []
value 标题名字 string - -
isActive 是否选中 boolean - false
content 徽标 number - -
Event
函数名说明返回值
handleTabsItemChange 传数组给子组件 -
handleItemTap 传索引给父组件 -

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

函数名	说明	返回值
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

参数	说明	类型	可选值	默认值
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 }[]) }

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

@everything-registry/sub-chunk-3208

1.0.23

3 months ago

1.0.22

8 months ago

用心公共小程序组件库

使用

开发

目录结构

测试

版本升级

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

2. 更新构建目录

3. 升级版本

其他命令

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

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

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

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

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

5.在页面wxml使用组件

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

selector语法参考

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

用心公共小程序组件介绍

1: yx-dialog公共弹窗组件

Props

Slots

Event

组件函数

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

Props

Slots

组件函数

Events

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

Collapse Props

Collapse Event

CollapseItem Props

CollapseItem Slot

CollapseItem Event

4: yx-rate公共评分组件

Props

Event

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

Props

6: yx-list列表加载翻页组件

Props

Event

7: yx-cell 单元格组件

Props

Event

8: yx-search公共搜索组件

Props

Event

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

Props

Event

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

RadioGroup Props

RadioGroup Slot

RadioGroup Event

Radio Props

Radio Event

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

CheckboxGroup Props

CheckboxGroup Slot

CheckboxGroup Event

Checkbox Props

Checkbox Event

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

Props

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

Props

Event

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

Props

Event

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

Props

Event

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

Props

Event

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