简单实现原生小程序界面灰色模式

导语

在遇到公祭日或其它特殊日子的时候，我们需要将我们的网站、小程序变成灰色（黑白）模式，那么以何种方式能够快速实现这个目标呢？

一、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”

    }

}