微信小程序 调色板

注意:是在uniapp中直接使用的一个color-picker插件,改一下格式即可在微信小程序的原生代码中使用

复制代码
https://github.com/KirisakiAria/we-color-picker

这是插件的地址,使用的话先把这个插件下载下来,找到src,在项目创建一个文件夹,把src中的内容拷进去,然后调这个就可以了,具体的话看微信开发如何调用插件

复制代码
<template>
	<div id="colorP">
		<color-picker
		    class="color-picker"
		    :colorData="colorData"
		    :rpxRatio="rpxRatio"
		    @changecolor="onChangeColor"
		  />
	</div>
	<button @click="onChange">确定</button>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { setStorage } from '../../utils/storageUtil';
import { goback } from '../../utils/miniapp_utils';

const colorData = ref({
  // 基础色相相关数据
  hueData: {
    colorStopRed: 255,
    colorStopGreen: 0,
    colorStopBlue: 0
  },
  // 选择点相关数据
  pickerData: {
    x: 0,
    y: 480,
    red: 0,
    green: 0,
    blue: 0,
    hex: '#000000'
  },
  // 色相控制条位置数据
  barY: 0
});

const rpxRatio = ref(1);

onMounted(() => {
  wx.getSystemInfo({
	  success(res) {
		  rpxRatio.value = res.screenWidth / 750
	  }
  })
});

function onChangeColor(e) {
  colorData.value = e.detail.colorData;
}

function onChange(){
	const colorX = colorData.value.pickerData
	const color = {
		r:colorX.red,
		g:colorX.green,
		b:colorX.blue
	}
	console.log("颜色为:",color)
	// 将值保存到缓存中
	setStorage("background",color)
	//返回
	goback()
}

</script>
<style >
#colorP {
	display: flex;
	justify-content: center;
}
</style>

我这是uniapp vue3版本的,微信小程序版本的github上已经有了,照着写就可以

相关推荐
说私域18 小时前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
笨笨狗吞噬者18 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
sheji341619 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序
小小前端_我自坚强19 小时前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范
右子1 天前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
江城开朗的豌豆1 天前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 天前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆1 天前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
毕设源码-江学长1 天前
计算机毕业设计java共享茶室预约微信小程序 微信小程序中的共享茶室预订平台 茶室共享预约小程序的设计与开发
java·微信小程序·课程设计
说私域2 天前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源