小程序样式如何变黑白

原生小程序前端设置灰色模式：

wxml

<view class="grayscale"> <view class="content"></view> ...小程序代码</view>

wxss

.grayscale .content,.grayscale text,.grayscale button { -moz-filter: grayscale(100%) -ms-filter: grayscale(100%) -o-filter: grayscale(100%) filter: grayscale(100%)}

第三方UI组绝并件/库（如：vant）

.grayscale .van-goods-action,.grayscale .van-submit-bar,.grayscale .van-swipe-cell { -moz-filter: grayscale(100%) -ms-filter: grayscale(100%) -o-filter: grayscale(100%) filter: grayscale(100%)}

切忌直接设置

page { filter: grayscale(100%)}

小结：简单来说，就是把样式控制明确到具体的标签。 接下来讲我们利用小程序的数据预拉取来实现动态开关。

之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源液瞎浪费，而且数据预拉取会在用户每次访问小闹宏空程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了

$(function(){

    $("#btn1").click(function(){

     庆敬   var 誉蠢慎Cp=$("#p")

 档旦       Cp.css{"color","red"}

    })

})

1、首先我们新建一行旁埋个小程序，目录如下图所示。

2、接着我们给页面声明个背景色，方便查看效果。

3、然后在页面中定义一个button，如下图所示。

4、可以看到档蚂左侧的button效果如下图所示。

5、然后我们直接在button中重启拍新填写要修改的默认样式即可覆盖，如下图所示。

6、可以看到页面的button样式被修改掉了。

---