CSS3在微信小程序的使用 --var 换肤功能
需求
1:做的第三方小程序，所以要实现商户 换肤功能
想到了两种解决方案：
1）使用类名，根据不同的主题写一套样式
缺点：不利于颜色更新，工作量巨大，占用很大的空间，小程序本身就2Mb。耦合度太高，html和css混合了，耦合度太高。
2）使用Css3的 --var变量（认识很久，一直没有使用过）
这个变量和less scss里面的定义变量一样，css为了不冲突这些预编译的语法，使用的--var的用法。
通过不断的咨询，有人说IOS9不兼容var变量的方式，但是本身很老的机型，而且本人验证了IOS8可以完美兼容。我在官方推荐weUI找打大量的Css3使用例子。使用选择了第二种方式。
难点：
1）因为小程序没有全局修改tabbar的属性和方法，使用只有一个一个界面去修改，但是这很麻烦，显然不符合程序员偷懒的习惯。。。
解决办法：
所以我想起了VUE的路由拦截器，可惜的是，我通过百度，未能找到这种方法。但是官方没有，我们可以自己造呀。
https://segmentfault.com/a/1190000011044371?utm_source=tag-newest
2）js怎么去修改css，设置css变量
解决办法：
我们可以在每个页面的JS文件里面设置一个Style变量，然后绑定到页面上。具体看代码：
代码实现：
拦截器代码：intercept.js
/**
* tabbar页面,只有这些页面才能修改tabbar
*/
let tabbar_list = ['pages/home/home', 'pages/classify/classify', 'pages/cart1/cart1', 'pages/mine/mine']
function intercept(pageObj) {
/**
* 不要问为什么写外面，因为直接挂载到App上面的，所以写外面获取的app是空
*/
let app = getApp()
if (pageObj.onShow) {
var _onShow = pageObj.onShow;
}
//对onShow进行修饰
pageObj.onShow = function () {
let that = this
if (app.globalData.style) {
frameworkStyle.call(that)
let { myStyle } = cssStrle()
this.setData({
myStyle: myStyle
})
}
if (_onShow) {
let currentInstance = getPageInstance();
_onShow.call(currentInstance);
}
}
return pageObj;
}
function getPageInstance() { // 获取去往的页面
var pages = getCurrentPages(); // getCurrentPages小程序获取页面栈函数
return pages[pages.length - 1];
}
/**
* 修改小程序架构架构样式
*/
function frameworkStyle() {
let app = getApp()
//app.globalData 这个数据来自于接口
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: app.globalData.style.background_color,
})
if (tabbar_list.indexOf(this.route) != -1) {
wx.setTabBarStyle({
frontColor: app.globalData.style.font_color,
backgroundColor: app.globalData.style.background_color
})
}
}
/**
* 修改css全局样式
*/
function cssStrle() {
let app = getApp()
let myStyle = `
--background_color:${app.globalData.style.background_color};
--font_color:${app.globalData.style.font_color};
--frame_color:${app.globalData.style.frame_color};
`
return {
myStyle
}
}
module.exports = intercept
app.js
//引入
const intercept = require('./intercept.js')
//挂载到app上面
app({
intercept:intercept
})
页面使用
Page(app.intercept({
}))
wxss
background: var(--frame_color);
wxml
<view style="{{myStyle}}">
<!--要写的内容-->
</view>
