导语
在遇到公祭日或其它特殊日子的时候，我们需要将我们的网站、小程序变成灰色（黑白）模式，那么以何种方式能够快速实现这个目标呢？
一、web/h5
网页端实现非常简单，只需要*、html最外层标签的样式设置filter: grayscale(100%)就OK啦。效果如下所示
二、小程序
在小程序内实现会稍稍麻烦一点，小程序端不可能像网页端那样直接在page设置filter: grayscale(100%)，这样做的后果是导致小程序内使用flex失效，布局出现错位的情况。
那么还有没有类似这种只需设置根元素css的方法达到呢？
当然必须有~
我们可以用伪类来实现，废话不多说直接上代码
在app.less中对page设置伪类来达到目标
page::before {
? content: "";
? width: 100vw;
? height: 100vh;
? position: fixed;
? inset: 0;
? backdrop-filter: grayscale(100%);
? pointer-events: none;
? z-index: 99999999999999;
}
我们来看下实现的效果
三、通过数据预拉取服务端动态控制灰色模式开关
原生小程序前端设置灰色模式：
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%);
}
切忌直接设置
page {
filter: grayscale(100%);
}
接下来讲我们利用小程序的数据预拉取来实现动态开关。
之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源浪费，而且数据预拉取会在用户每次访问小程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了。
实现方式：
app.js
App({
onLaunch: async function (options) {
// 此处用于服务端鉴权，可根据自身情况设置
App({
? onLaunch: async function (options) {
? ? // 此处用于服务端鉴权，可根据自身情况设置
? ? wx.setBackgroundFetchToken({
? ? ? token: ‘grayscale’
? ? })
? ? wx.onBackgroundFetchData((res) => {
? ? ? if(res.fetchedData && res.fetchedData.class) {
? ? ? ? wx.setStorageSync(‘class’, res.fetchedData.class);
? ? ? }
? ? })
? },
? globalData: {
? ? grayscale: wx.getStorageSync(“class”).grayscale || “”
? }
});
需要灰色模式的wxml
<view class="{{grayscale}}">
<view class=“content”></view>
…小程序代码
</view>
需要灰色模式的js
接收到微信推送的get请求后返回数据response
data = {
????class: {
????????grayscale: “grayscale”
????}
}