|
3 p6 W+ V$ w+ }! b( D8 y6 `
前言在遇到公祭日或其它特殊日子的时候，我们需要将我们的网站、小程序变成灰色（黑白）模式，如果是在网页端比较简单，只需设置*、html最外层标签的样式设置filter: grayscale(100%)即可。 8 Z; j& m# E |! T1 y6 j+ `; U
但是在小程序中如果直接设置page的样式的话会导致小程序内使用flex失效，布局出现错位的情况如何解决错位问题？以及如何通过服务端动态控制灰色模式开关请看下文注：此方式无法控制非自定义导航栏颜色，如想要实现更完美的效果，请配合使用自定义导航栏。 & `' k) `& j1 o& e3 m) V" ?( ^ }% ~
原生小程序前端设置灰色模式：wxml! @2 B5 r+ X$ x
0 g+ _, ?) U* J* e, }& v9 O ...小程序代码5 ^) E5 M5 A a' Q
wxss.grayscale 7 e6 e: z; E) n: R* v
.content,
7 |" w- a* j- u( L! L3 z; D/ y .grayscaletext,
. V3 X! C( Y$ {% A .grayscalebutton {2 q! K* ` [2 \$ b" @& ~
-moz-filter: grayscale(100%);
/ {" \3 C7 `! f; R# x -ms-filter: grayscale(
2 r& S/ L, L4 F6 } 100%);) U; t+ b) o( b6 G& a, l4 L: F- z
-o-filter: grayscale(100%);- y% E* U: E; _+ Y8 f9 z; C; \) ^
filter: grayscale(100%);
7 ?( B7 Q5 J: |5 x t }第三方UI组件/库（如：vant）.grayscale.van-goods-action
& {; t; W& ]* I1 Z6 g" }- U ,& a; B# @& u/ s$ ^+ I8 T
.grayscale.van-submit-bar,, B. D2 e" \3 }. G
.grayscale.van-swipe-cell {. d8 D- ?/ F* f; e7 { T- N
-moz-filter: grayscale(100%);
2 s5 e9 O. E6 C/ N9 V, U& v -ms-filter 7 v, o# ?% S( ~( n" E
: grayscale(100%);& K9 r# h$ M, O3 u& L2 Y% x0 ]
-o-filter: grayscale(100%);9 R' G: Q8 D; h7 j, H
filter: grayscale(100%);% J% M u/ F5 g, F
}切忌直接设置page {
' p! {; j; v6 D/ x8 W; c4 ` filter: grayscale % y2 L$ |; O; d: H! f; z
(100%);
! b v3 ]$ x9 C0 a" q& q }小结：简单来说，就是把样式控制明确到具体的标签服务端动态控制接下来讲我们利用小程序的数据预拉取来实现动态开关之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源浪费，而且数据预拉取会在用户每次访问小程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了。
! t7 Y+ _8 A8 o+ A( V 实现方式：app.jsApp({6 G0 f8 j& c4 J3 F- ~- m
onLaunch: async function (options) {
6 d) P3 A: Y2 R2 p, u w // 此处用于服务端鉴权，可根据自身情况设置/ N/ d7 p9 a: Z: u, G% g- W) }/ x
wx.setBackgroundFetchToken * v2 o* ^5 o6 J- ]
({
' r, @+ A7 i, V5 s6 Q# x H! `3 H token: grayscale: ^; f8 D1 ]) Q, u$ J5 e' ^ ~
}). h/ \+ o' \" ^. [% A+ q! n {
wx.onBackgroundFetchData((res) => {5 G, y" w6 y) m/ u6 Q( G! E: ]3 Z2 Y
if(res.fetchedData && res.fetchedData.class) {. u. ~" A( B* b. b$ s2 l# \- o
wx. 3 @2 |# C: S# d; e5 H' z' p
setStorageSync(class, res.fetchedData.class);
9 {3 u5 O1 L$ \ U! y* G% ? }
# R8 e0 _9 S# |# u })% o! c! y. n: r; s6 F/ i9 y9 G9 A
}, k9 k. e" M/ J4 H6 p
globalData: {. E; i# M5 |- r/ f* z% d/ q
grayscale: wx.getStorageSync 2 d: h& G! R' \7 C ]$ O
("class").grayscale || ""
: `# {* }$ N% F" `0 O+ X9 t7 y$ N }
" r. D4 b3 u1 \( ^/ A$ Y' N })需要灰色模式的wxml0 e+ _ f1 h. _. x1 D
1 _4 h; x$ W( m9 H" m ...小程序代码5 X! @' ?/ n+ B2 _6 m
5 `0 \# ^5 d2 i9 |% Q4 [ 需要灰色模式的jsconst app = getApp()! u5 @. e. G* n- K5 w
Page({. n0 o6 F: g0 c' }( g5 j6 c$ y3 |
data: {
9 g2 g; y1 O1 i3 V3 M5 s4 f grayscale: app.globalData.class.grayscale
O; g& k& A9 r3 z5 ? }
. d; V+ e$ z. z$ H& M3 X })服务端（node.js）接收到微信推送的get请求后返回数据
$ Y4 U( M* _1 z+ K& { ctx.body = {6 T# Z: V/ G( v
class: {
: A$ H: u9 E" i4 k0 Q2 u$ S, Z grayscale: "grayscale"
7 [" N+ }& z# a9 P9 t5 T }- P) a3 h" Y, C" [1 U& ]
}PS：以上方案仅供参考，当前方案在微信开发者工具中因缓存问题无法实时控制，iOS端基本上是没什么大问题，如果其它更好的方案可自行处理。 % }- n: Y2 _. o, g' ^7 I
# r7 i8 q- \" q$ }3 i
" V% l( c) Y3 z: o
O2 ~ F( w; c' O" L! O
/ H5 h' m6 r7 V* `$ |- C
| 
