mini color picker Download - mini color picker Source code download

mini color picker

AI Source Code

1.0.0

Download

Mini-color-picker

The applet color picker (color picker) component picks colors through the color palette and is used for user-defined scenes.

characteristic:

Analysis of existing solutions

We-color-picker needs to pay attention to component positioning, the operation is not smooth and the operation is not smooth, and the configuration is complicated. Its positioning will stretch out the original page, resulting in a poor experience. The sliding distance is differentiated by pixels (fixed), and the device resolution needs to be considered, which is not conducive to multi-end.
PapaerPen uses the original slider component to realize sliding selection, which is not limited to device resolution. However, it requires three operations, and the internal implementation of hue selection is cumbersome. It does not really affect the color value as three components (HSV/HSB).

solution

Use the official slider to select hue, and the movable-view to select saturation and brightness. Since it is an official basic component, the operation is smooth.
In the setting of the sliding area, after obtaining the actual node, the proportion is used to affect the color value change, without considering rpx conversion.
In terms of the operation process, it is limited to the mobile phone operating area, and Popover cannot be used. Use the bottom to pull up the pop-up window, which does not affect the original page and highlights the key points.
In the operation preview, since the pop-up window mask is inevitably unavailable for real-time preview, the color of the hue slider is used to realize the preview. At the same time, the security area issues of iphone-x are also considered.

Usage effect

screenshot

Sample

Preview the effect in developer tools => Code snippet ID: YOF4QUmO7NmW

Install and use

1. Get components

git

May be unstable, but contains latest feature updates

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

Copy the components/color-picker folder in the project to the component path

npm

Stablize

npm install mini-color-picker --save

To use the npm package, please refer to the official documentation of the WeChat applet

2. Introduce components

Add in the json file corresponding to the page using this component:

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

If using npm, click the menu bar in the developer tools: Tools --> Build npm; check the "Use npm module" option (the demo is the result after the build)

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

3. Use components

Reference/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 ;
  } ,
} )

Property list

property	type	default value	Required	illustrate
show	Boolean	false	yes	Whether to display
initColor	String	rgb(255,0,0)	yes	Initial color, rgb representation
mask	Boolean	true	no	Whether to display the background mask
maskClosable	Boolean	true	no	Can the background mask be turned off by clicking on it?
bindchangeColor	eventhandler		no	Callback after color selection, event.detail = {color}
bindclose	eventhandler		no	Event triggered after clicking on the background mask to turn off the color-picker

develop

Notice :

There is currently no two-way binding, that is, the color value is selected by the user after obtaining the initial value, and should not be changed by external input (then the meaning of color selection is lost)
You can preview the color value of the slider in real time during the touch process, and pass the color value to the page after stopping the touch to avoid blocking caused by frequent setData.
The data format used for external communication with components is rgb. In order to avoid the introduction of multiple data formats that may lead to code redundancy in actual scenarios, developers can convert on demand and reply to the following corresponding content on the public account "MakerGYT" to obtain the reference function code: