we-color-picker 微信小程序拾色器（顏色選擇器）組件

最近一直在搞小程序，由於剛需一個拾色器，搜了半天也沒見人做過，就自己動手擼了一個，還在不斷地改進優化中。。。

---

項目地址

https://github.com/KirisakiAr...

查看DEMO

安裝使用

git

git clone https://github.com/KirisakiAria/we-color-picker.git

npm

npm install we-color-picker --save

將項目中src目錄下的全部文件拷貝到/components/color-picker中，在使用該組件的頁面對應json文件中添加：

"usingComponents": {
    "color-picker":"/components/color-picker/color-picker"
}

具體如何引入組件請參考微信小程序官方文檔

截圖示例

仿照PS的色相立方體制作而成

WXML

<color-picker class="color-picker" colorData="{{colorData}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>

參數

colorData: {
    //基礎色相，即左側色盤右上頂點的顏色，由右側的色相條控制
    hueData: {
        colorStopRed: 255,
        colorStopGreen: 0,
        colorStopBlue: 0,
    },
    //選擇點的信息（左側色盤上的小圓點，即你選擇的顏色）
    pickerData: {
        x: 0, //選擇點x軸偏移量
        y: 480, //選擇點y軸偏移量
        red: 0, 
        green: 0,
        blue: 0, 
        hex: '#000000'
    },
    //色相控制條的位置
    barY: 0
},
rpxRatio: 1 //此值爲你的屏幕CSS像素寬度/750，單位rpx實際像素


//設置rpxRatio
wx.getSystemInfo({
    success(res) {
        _this.setData({
            rpxRatio: res.screenWidth / 750
        })
    }
})

事件

//選擇改色時觸發（在左側色盤觸摸或者切換右側色相條）
onChangeColor(e) {
    //e.detail.colorData與參數中的colorData一致
}

多個拾色器的情況

WXML

<color-picker data-id="0" class="color-picker" colorData="{{colorData0}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="1" class="color-picker" colorData="{{colorData1}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="2" class="color-picker" colorData="{{colorData2}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<!--More...-->

JS

//設置多個參數即可
colorData0: {
    //...
},
colorData1: {
    //...
},
colorData2: {
    //...
},
//More...

onChangeColor(e) {
    //這裏我使用了dataset來存儲標誌，用來判斷時哪個拾色器發生變化
    const index = e.target.dataset.id
    this.setData({
        [`colorData${index}`]: e.detail.colorData
    })
}

遇到問題?

Issue

wechat: thereshegoes

email: [email protected]

推廣

我做的另一個小程序，專門用來合成沙雕表情的《沙雕表情製作》，大家有興趣可以玩玩看。