├── README.md
├── main.js
├── App.vue
├── pages.json
├── uni.scss
├── manifest.json
└── pages
    └── index
        └── index.vue


/README.md:
--------------------------------------------------------------------------------
1 | # uni_colorPicker
2 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function() {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function() {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function() {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	page {
17 | 		height: 100%;
18 | 	}
19 | </style>
20 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "颜色选择器"
 7 | 			}
 8 | 		}
 9 | 	],
10 | 	"globalStyle": {
11 | 		"navigationBarTextStyle": "black",
12 | 		"navigationBarTitleText": "颜色选择器",
13 | 		"navigationBarBackgroundColor": "#F8F8F8",
14 | 		"backgroundColor": "#F8F8F8"
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 这里是uni-app内置的常用样式变量
 3 |  *
 4 |  * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 5 |  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 6 |  *
 7 |  */
 8 | 
 9 | /**
10 |  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
11 |  *
12 |  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
13 |  */
14 | 
15 | /* 颜色变量 */
16 | 
17 | /* 行为相关颜色 */
18 | $uni-color-primary: #007aff;
19 | $uni-color-success: #4cd964;
20 | $uni-color-warning: #f0ad4e;
21 | $uni-color-error: #dd524d;
22 | 
23 | /* 文字基本颜色 */
24 | $uni-text-color:#333;//基本色
25 | $uni-text-color-inverse:#fff;//反色
26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
27 | $uni-text-color-placeholder: #808080;
28 | $uni-text-color-disable:#c0c0c0;
29 | 
30 | /* 背景颜色 */
31 | $uni-bg-color:#ffffff;
32 | $uni-bg-color-grey:#f8f8f8;
33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
35 | 
36 | /* 边框颜色 */
37 | $uni-border-color:#c8c7cc;
38 | 
39 | /* 尺寸变量 */
40 | 
41 | /* 文字尺寸 */
42 | $uni-font-size-sm:24upx;
43 | $uni-font-size-base:28upx;
44 | $uni-font-size-lg:32upx;
45 | 
46 | /* 图片尺寸 */
47 | $uni-img-size-sm:40upx;
48 | $uni-img-size-base:52upx;
49 | $uni-img-size-lg:80upx;
50 | 
51 | /* Border Radius */
52 | $uni-border-radius-sm: 4upx;
53 | $uni-border-radius-base: 6upx;
54 | $uni-border-radius-lg: 12upx;
55 | $uni-border-radius-circle: 50%;
56 | 
57 | /* 水平间距 */
58 | $uni-spacing-row-sm: 10px;
59 | $uni-spacing-row-base: 20upx;
60 | $uni-spacing-row-lg: 30upx;
61 | 
62 | /* 垂直间距 */
63 | $uni-spacing-col-sm: 8upx;
64 | $uni-spacing-col-base: 16upx;
65 | $uni-spacing-col-lg: 24upx;
66 | 
67 | /* 透明度 */
68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
69 | 
70 | /* 文章场景相关 */
71 | $uni-color-title: #2C405A; // 文章标题颜色
72 | $uni-font-size-title:40upx;
73 | $uni-color-subtitle: #555555; // 二级标题颜色
74 | $uni-font-size-subtitle:36upx;
75 | $uni-color-paragraph: #3F536E; // 文章段落颜色
76 | $uni-font-size-paragraph:30upx;


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "颜色选择器",
 3 |     "appid" : "",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     /* 5+App特有相关 */
 9 |     "app-plus" : {
10 |         "usingComponents" : true,
11 |         "nvueCompiler" : "uni-app",
12 |         "compilerVersion" : 3,
13 |         "splashscreen" : {
14 |             "alwaysShowBeforeRender" : true,
15 |             "waiting" : true,
16 |             "autoclose" : true,
17 |             "delay" : 0
18 |         },
19 |         /* 模块配置 */
20 |         "modules" : {},
21 |         /* 应用发布信息 */
22 |         "distribute" : {
23 |             /* android打包配置 */
24 |             "android" : {
25 |                 "permissions" : [
26 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
27 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
30 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
31 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
32 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
33 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
34 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
35 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
36 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
37 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
38 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
39 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
42 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
43 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
45 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
46 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
47 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
48 |                 ]
49 |             },
50 |             /* ios打包配置 */
51 |             "ios" : {},
52 |             /* SDK配置 */
53 |             "sdkConfigs" : {}
54 |         }
55 |     },
56 |     /* 快应用特有相关 */
57 |     "quickapp" : {},
58 |     /* 小程序特有相关 */
59 |     "mp-weixin" : {
60 |         "appid" : "",
61 |         "setting" : {
62 |             "urlCheck" : false
63 |         },
64 |         "usingComponents" : true
65 |     },
66 |     "mp-alipay" : {
67 |         "usingComponents" : true
68 |     },
69 |     "mp-baidu" : {
70 |         "usingComponents" : true
71 |     },
72 |     "mp-toutiao" : {
73 |         "usingComponents" : true
74 |     }
75 | }
76 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<view class="color-picker">
  4 | 			<view class="color-name">{{ colorName }}</view>
  5 | 			<view class="show-view" :style="{ background: colorName }"></view>
  6 | 			<view class="hue-view" @touchstart="pickHue" @touchmove="pickHue">
  7 | 				<text class="anchor" :style="{ left: hueView.anchorLeft + 'px' }"></text>
  8 | 			</view>
  9 | 			<view class="color-view" @touchstart="pickColor" @touchmove="pickColor" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }">
 10 | 				<text class="anchor" :style="{ top: colorView.anchorTop + 'px', left: colorView.anchorLeft + 'px' }"></text>
 11 | 			</view>
 12 | 		</view>
 13 | 	</view>
 14 | </template>
 15 | 
 16 | <script>
 17 | 	export default {
 18 | 		data() {
 19 | 			return {
 20 | 				title: '关于样式',
 21 | 				hueView: {},
 22 | 				colorView: {},
 23 | 				colorName: '',
 24 | 				hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
 25 | 				anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
 26 | 				anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
 27 | 			};
 28 | 		},
 29 | 		mounted() {
 30 | 			Promise.all([this.getHueViewOffset(), this.getColorViewOffset()]).then(() => {
 31 | 				this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
 32 | 			})
 33 | 		},
 34 | 		methods: {
 35 | 			getHueViewOffset() { // 获取色相选择区域尺寸
 36 | 				const hue = 0.5 // 色相选择器初始位置 [0, 1]
 37 | 				return new Promise(resolve => uni.createSelectorQuery().in(this).select('.hue-view').boundingClientRect(data => {
 38 | 						this.hueView = {
 39 | 							...data, 
 40 | 							anchorLeft: data.width * this.hueLeft, 
 41 | 							H: this.hueLeft * 360,
 42 | 						}
 43 | 						resolve()
 44 | 					}).exec()
 45 | 				)
 46 | 			},
 47 | 			getColorViewOffset() { // 获取颜色选择区域尺寸
 48 | 				return new Promise(resolve => uni.createSelectorQuery().in(this).select('.color-view').boundingClientRect(data => {
 49 | 						this.colorView = {
 50 | 							...data, 
 51 | 							anchorTop: data.height * this.anchorTop, 
 52 | 							anchorLeft: data.width * this.anchorLeft, 
 53 | 							S: this.anchorLeft, 
 54 | 							L: (1 - this.anchorLeft * 0.5) - this.anchorTop / (this.anchorLeft + 1)
 55 | 						}
 56 | 						resolve()
 57 | 					}).exec()
 58 | 				)
 59 | 			},
 60 | 			getColorString() { // 获取 RGB 颜色字符串
 61 | 				const arr = hslToRgb(this.hueView.anchorLeft / this.hueView.width, this.colorView.S, this.colorView.L)
 62 | 				const r = arr[0].toString(16).length === 1 ? `0${arr[0].toString(16)}` : arr[0].toString(16)
 63 | 				const g = arr[1].toString(16).length === 1 ? `0${arr[1].toString(16)}` : arr[1].toString(16)
 64 | 				const b = arr[2].toString(16).length === 1 ? `0${arr[2].toString(16)}` : arr[2].toString(16)
 65 | 				return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`
 66 | 			},
 67 | 			pickColor(e) { // 选择颜色
 68 | 				const top = e.touches[0].pageY - this.colorView.top
 69 | 				const left = e.touches[0].pageX - this.colorView.left
 70 | 				if (top < 0) {
 71 | 					this.colorView.anchorTop = 0
 72 | 				} else if (top > this.colorView.height) {
 73 | 					this.colorView.anchorTop = this.colorView.height
 74 | 				} else {
 75 | 					this.colorView.anchorTop = e.touches[0].pageY - this.colorView.top
 76 | 				}
 77 | 				if (left < 0) {
 78 | 					this.colorView.anchorLeft = 0
 79 | 				} else if (left > this.colorView.width) {
 80 | 					this.colorView.anchorLeft = this.colorView.width
 81 | 				} else {
 82 | 					this.colorView.anchorLeft = e.touches[0].pageX - this.colorView.left
 83 | 				}
 84 | 				this.colorView.S = this.colorView.anchorLeft / this.colorView.width
 85 | 				this.colorView.L = this.floor((1 - this.colorView.S * 0.5) - this.colorView.anchorTop / this.colorView.height / (this.colorView.S + 1))
 86 | 				this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
 87 | 			},
 88 | 			pickHue(e) { // 选择色相
 89 | 				if (e.touches[0].pageX >= this.hueView.left && e.touches[0].pageX <= this.hueView.right) {
 90 | 					this.hueView.anchorLeft = e.touches[0].pageX - this.hueView.left
 91 | 					this.hueView.H = this.hueView.anchorLeft / this.hueView.width * 360
 92 | 					this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
 93 | 				}
 94 | 			},
 95 | 			floor(num) {
 96 | 				return num < 0.09 ? 0 : num
 97 | 			}
 98 | 		} 
 99 | 	}
100 | function hslToRgb(h, s, l) {  // HSL 转 RGB 方法
101 | 	var r, g, b;
102 | 	if(s == 0) {
103 | 		r = g = b = l; // achromatic
104 | 	} else {
105 | 		var hue2rgb = function hue2rgb(p, q, t) {
106 | 			if(t < 0) t += 1;
107 | 			if(t > 1) t -= 1;
108 | 			if(t < 1/6) return p + (q - p) * 6 * t;
109 | 			if(t < 1/2) return q;
110 | 			if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
111 | 			return p;
112 | 		}
113 | 		var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
114 | 		var p = 2 * l - q;
115 | 		r = hue2rgb(p, q, h + 1/3);
116 | 		g = hue2rgb(p, q, h);
117 | 		b = hue2rgb(p, q, h - 1/3);
118 | 	}
119 | 	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
120 | }
121 | </script>
122 | 
123 | <style lang="scss" scoped>
124 | 	.content {
125 | 		height: 100%;
126 | 		display: flex;
127 | 		align-items: center;
128 | 		flex-direction: column;
129 | 		justify-content: center;
130 | 		.color-picker {
131 | 			display: flex;
132 | 			align-items: center;
133 | 			flex-direction: column;
134 | 			justify-content: center;
135 | 			.color-name {
136 | 				margin: 23rpx;
137 | 				font-size: 45rpx;
138 | 				font-weight: bold;
139 | 				letter-spacing: 8rpx;
140 | 			}
141 | 			.show-view {
142 | 				height: 56rpx;
143 | 				width: 567rpx;
144 | 			}
145 | 			.hue-view {
146 | 				width: 567rpx;
147 | 				height: 56rpx;
148 | 				margin: 12rpx 0;
149 | 				position: relative;
150 | 				background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
151 | 				.anchor {
152 | 					width: 12rpx;
153 | 					height: 100%;
154 | 					position: absolute;
155 | 					background: #FFFFFF;
156 | 					transform: translate(-50%);
157 | 					box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
158 | 				}
159 | 			}
160 | 			.color-view {
161 | 				width: 567rpx;
162 | 				height: 345rpx;
163 | 				position: relative;
164 | 				&::before,
165 | 				&::after {
166 | 					content: '';
167 | 					top: 0;
168 | 					left: 0;
169 | 					width: 100%;
170 | 					height: 100%;
171 | 					position: absolute;
172 | 				}
173 | 				&::before {
174 | 					background: linear-gradient(to right, white, transparent);
175 | 				}
176 | 				&::after {
177 | 					background: linear-gradient(to top, black, transparent);
178 | 				}
179 | 				.anchor {
180 | 					z-index: 1;
181 | 					width: 24rpx;
182 | 					height: 24rpx;
183 | 					border-radius: 50%;
184 | 					position: absolute;
185 | 					border: 4rpx solid #FFFFFF;
186 | 					background: rgba(0, 0, 0, .3);
187 | 					transform: translate(-50%, -50%);
188 | 				}
189 | 			}
190 | 		}
191 | 	}
192 | </style>
193 | 


--------------------------------------------------------------------------------