uniapp 补光灯

后端开发第一次写小程序。想到最近各种补光灯APP，自己也来实现下uniapp 小程序版本。补光灯原理很简单，设置不同背景颜色，然后调高亮度。

首先全屏效果，在 pages.json 设置忽略导航栏

{
    "path" : "pages/light/light",
    "style" : 
    {
            "navigationBarTitleText" : "补光灯",
            "navigationStyle": "custom" // 去除对应页面的导航栏
    }
}

设置屏幕亮度 uniapp.dcloud.net.cn/api/system/…

uni.setScreenBrightness({
        value: // 1.0 为最大亮度
        success: function () {
           console.log('设置屏幕亮度到最大');
        }
});

设置背景颜色

<view class="container" :style="'background-color:' + lightColor + ';'"></view>

.container{
    display: block;
    width: 100vw; 
    height: 100vh
}

插件市场随便找一个颜色选择器

<view class="color-picker">
    <yq-color-picker ref="colorPicker" @confirm="confirm" />
    <button @click="open">打开选择器</button>
</view>

const colorPicker = ref(null);
function open(){
    colorPicker.value.open();
}

function confirm(color) {
    // console.log(color);
    lightColor.value = color;
}

最后欢迎来体验（