小程序自定义签字板、颜色选择器组件

bao-wecom

小程序自定义签字板、颜色选择器的组件。

背景

在一次小程序项目中，需要开发一个用户签字的功能，所以就开发这个签字板的组件以及颜色选择器的组件。

案例demo

使用方法

1. 安装组件

npm install --save bao-wecom

2. 颜色选择器使用

在页面的 json 配置文件中添加 bao-wecom-color-picker 自定义组件的配置

{
  "usingComponents": {
    "bao-wecom-color-picker": "bao-wecom/colorPicker/index"
  }
}

WXML 文件中引用 bao-wecom-color-picker

<bao-wecom-color-picker></bao-wecom-color-picker>

bao-wecom-color-picker 的属性介绍如下：

字段名	类型	必填	描述
show	Boolean	是	控制颜色选择器是否显示
color	String	否	设置颜色选择器的颜色，默认为#ff0000 ,仅支持rgb、hex格式
commonColor	String	否	设置常用颜色值，默认为"#000000,#ffffff,#ff0000,#ffa500,#00ff00,#0000ff,#ff00ff,#00ffff,#ffff00,#70db93,#cccccc,#999999" ,仅支持hex格式，最多12个
comfirmText	String	否	设置确定按钮的文字，默认为确定
cancelText	String	否	设置取消按钮的文字，默认为取消
title	String	否	设置标题，默认为请选择

bao-wecom-color-picker 的事件介绍如下：

事件名	描述
confirm	点击确定时触发，返回值{hex: 16进制色值, rgb: rgb色值, hsv: hsv色值}
cancel	点击取消时触发

3. 签字板使用

在页面的 json 配置文件中添加 bao-wecom-signature 自定义组件的配置

{
  "usingComponents": {
    "bao-wecom-signature": "bao-wecom/signature/index"
  },
  "pageOrientation": "landscape",//横屏
  "navigationStyle": "custom" //自定义头
}

WXML 文件中引用 bao-wecom-signature

<bao-wecom-signature></bao-wecom-signature>

bao-wecom-signature 的属性介绍如下：

字段名	类型	必填	描述
title	String	否	签字版标题
color	String	否	设置笔画线条的颜色，默认为#1A1A1A ,hex格式
boardColor	String	否	设置画板的颜色，默认为#ffffff ,hex格式
backgroundColor	String	否	设置背景的颜色，默认为#ffa500 ,hex格式
size	Number	否	设置笔画线条的粗细，默认为8
fileType	String	否	设置导出图片的格式，默认为png
quality	Number	否	生成图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
buttonList	Array	否	设置显示的按钮，默认为[“cancel”, “setting”, “reset”, “preview”, “save”, “confirm”]，cancel：取消按钮，setting：设置按钮，reset：重写按钮，preview：预览按钮，save：保存按钮，confirm：确认按钮。

bao-wecom-color-picker 的事件介绍如下：

事件名	描述
confirm	点击确定时触发，返回值{ path: 图片本地路径, width: 宽度, height: 高度 }
cancel	点击取消时触发