微信公众平台-小程序代码审核咨询微信公众平台-监管相关咨询微信公众平台-名称审核咨询公众号帐号审核-高危open官网咨询客服小程序交易组件第三方代创建小程序咨询MP客服消息规则调整反馈入口公众号作者小程序注册公众号客服消息调整视频号直播官方客服微信公众平台微信公众平台客服公众号账号审核-低质公众号账号审核-诱导公众号申诉咨询微信公众平台-公众号业务咨询发货信息管理客服小程序订单中心页Path设置审核订单发货管理客服小程序客服咨询模板消息问题咨询小程序隐私保护咨询付费管理-客服咨询模板消息枚举值审核咨询公众号营销内容咨询微信公众平台-小程序类目审核咨询小程序备案-客服咨询小程序年费咨询服务商采购-客服咨询公众号

前言 在遇到公祭日或其它特殊日子的时候，我们需要将我们的网站、小程序变成灰色（黑白）模式，如果是在网页端比较简单，只需设置*、html最外层标签的样式设置filter: grayscale(100%)即可。但是在小程序中如果直接设置page的样式的话会导致小程序内使用flex失效，布局出现错位的情况。 如何解决错位问题？以及如何通过服务端动态控制灰色模式开关请看下文。 注：此方式无法控制非自定义导航栏颜色，如想要实现更完美的效果，请配合使用自定义导航栏。 原生小程序前端设置灰色模式： 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里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了。 实现方式： app.js 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 const app = getApp() Page({ data: { grayscale: app.globalData.class.grayscale } }) 服务端（node.js）接收到微信推送的get请求后返回数据 ctx.body = { class: { grayscale: “grayscale” } } PS：以上方案仅供参考，当前方案在微信开发者工具中因缓存问题无法实时控制，iOS端基本上是没什么大问题，如果其它更好的方案可自行处理。