什么是 Wechat-Colorpicker
Wechat-Colorpicker 是一个基于微信小程序的颜色选择器组件，是一个高度定制化的组件，可以满足小程序开发者对颜色选择器的各种需求。
安装 Wechat-Colorpicker
通过 npm 安装 Wechat-Colorpicker：
npm install wechat-colorpicker
使用 Wechat-Colorpicker
在需要使用 Wechat-Colorpicker 的页面的 json 文件中引入组件：
{
"usingComponents": {
"colorpicker": "wechat-colorpicker"
}
}在需要使用 Wechat-Colorpicker 的页面中加入组件：
<colorpicker bindchange="bindChange"></colorpicker>
在该页面的 js 文件中定义 bindChange 方法：
Page({
bindChange: function(e) {
console.log(e.detail.color);
}
})在 Wechat-Colorpicker 中，用户选择颜色后，会触发一个名为 bindChange 的事件，在该事件的监听器中可以得到用户选择的颜色值。
Wechat-Colorpicker 的定制化
Wechat-Colorpicker 具有高度的定制化能力，可以满足小程序开发者对颜色选择器的各种需求。下面列出一些常用的定制化能力：
改变颜色选择器的尺寸
通过给 colorpicker 组件加上 size 属性可以改变颜色选择器的尺寸：
<colorpicker size="80" bindchange="bindChange"></colorpicker>
改变颜色选择器的预设颜色
通过给 colorpicker 组件加上 preset-colors 属性可以改变颜色选择器的预设颜色：
<colorpicker preset-colors="{{['#FF0000', '#00FF00', '#0000FF']}}" bindchange="bindChange"></colorpicker>改变颜色选择器的默认颜色
通过给 colorpicker 组件加上 default-color 属性可以改变颜色选择器的默认颜色：
<colorpicker default-color="#FF0000" bindchange="bindChange"></colorpicker>
Wechat-Colorpicker 示例代码
下面是一个使用 Wechat-Colorpicker 的示例代码：
-- -------------------- ---- -------
------------ --------- ---------------------------- ---------- ------------- ----------------------- --------------------------------------
--------
------
----------- ----------- -
----------------------------
-
--
---------总结
Wechat-Colorpicker 是一个高度定制化的微信小程序颜色选择器组件，可以满足小程序开发者对颜色选择器的各种需求。在使用 Wechat-Colorpicker 时，开发者可以通过改变组件的尺寸、预设颜色和默认颜色来实现个性化的颜色选择功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8681e8991b448e5fe4