注意：是在uniapp中直接使用的一个color-picker插件，改一下格式即可在微信小程序的原生代码中使用
https://github.com/KirisakiAria/we-color-picker这是插件的地址，使用的话先把这个插件下载下来，找到src，在项目创建一个文件夹，把src中的内容拷进去，然后调这个就可以了，具体的话看微信开发如何调用插件
<template><div id="colorP"><color-pickerclass="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.pickerDataconst 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上已经有了，照着写就可以