mini color picker

Mini-color-picker

小程式拾色器（顏色選擇器）元件,透過調色盤取色，用於使用者自訂場景。

特性:

現有方案分析

• we-color-picker 要注意組件定位，操作不跟手不流暢,配置複雜。其定位會撐開原有頁面，體驗不佳。滑動距離以像素區分(固定)，需考慮設備分辨率，不利於多端。
• PapaerPen 利用原廠slider元件實現滑動選取，不限於裝置解析度。但需分三次操作,且在色相的選定上內部實現繁瑣.並不是真正作為三個分量(HSV/HSB)去影響色值

解決方案

• 利用官方提供的slider實現選擇色相，movable-view選擇飽和度和明度，由於是官方基礎組件，操作順暢。
• 在滑動區域的設定上，取得實際節點後使用佔比來影響色值變化，無需考慮rpx轉換。
• 在操作流程上，限於手機操作區域，不能使用Popover，使用底部拉起彈跳窗，不影響原廠頁面，重點突出。
• 在操作預覽上，由於彈窗遮罩不可避免無法即時預覽，因此採用色相滑桿的顏色來實現預覽。同時考慮了iphone-x的安全區域問題。

使用效果

截圖

範例

在開發者工具中預覽效果=>程式碼片段ID: YOF4QUmO7NmW

安裝使用

1. 取得組件

git

可能不穩定，但包含最新功能更新

git clone https://github.com/MakerGYT/mini-color-picker.git

將專案中components/color-picker資料夾拷貝到元件路徑下

npm

穩定

npm install mini-color-picker --save

使用npm套件請參考微信小程式官方文檔

2. 引入組件

在使用該元件的頁面對應json檔案中新增：

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

如使用npm, 點選開發者工具中的選單列：工具--> 建構npm; 勾選「使用npm 模組」選項(demo為建構後的結果)

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

3. 使用組件

參考/pages

 <!-- index.wxml -->
< view style =" background:{{rgb}};width:100px;height:24px; " bindtap =" toPick " > </ view >
< color-picker bindchangeColor =" pickColor " initColor =" {{rgb}} " show =" {{pick}} " /> 

 Page ( {
  data : {
    rgb : 'rgb(0,154,97)' , //初始值
    pick : false
  } ,
  // 显示取色器
  toPick : function ( ) {
    this . setData ( {
      pick : true
    } )
  } ,
  //取色结果回调
  pickColor ( e ) {
    let rgb = e . detail . color ;
  } ,
} ) 

屬性列表

屬性	類型	預設值	必填	說明
show	Boolean	false	是	是否顯示
initColor	String	rgb(255,0,0)	是	初始色,rgb表示
mask	Boolean	true	否	是否顯示背景蒙層
maskClosable	Boolean	true	否	點選背景蒙層是否可以關閉
bindchangeColor	eventhandler		否	取色後的回呼,event.detail = {color}
bindclose	eventhandler		否	點選背景蒙層關閉掉color-picker後觸發的事件

開發

注意:

1. 目前沒有雙向綁定，即獲取初始值後色值由用戶選取得到，不應該由外部傳入改變（那樣也就失去了取色的意義）
2. 在觸控​​過程中可透過對滑桿的色彩即時預覽色值，而在停止觸控後將色值傳入頁面，是為了避免頻繁setData造成阻塞．
3. 外部與元件通訊的資料格式是rgb,為了避免引入多種資料格式而導致實際場景程式碼冗餘，開發者可自行按需轉換，在公眾號碼"MakerGYT"回覆以下對應內容取得參考函數程式碼:

• rgb2hex
• rgb2hsv
• rgb2cmyk
• hex2rgb
• hsv2rgb

案例

License

MIT © MakerGYT