CSS3在微信小程序的使用 --var 換膚功能
需求
1:做的第三方小程序俯萎，所以要實(shí)現(xiàn)商戶 換膚功能
想到了兩種解決方案：
1）使用類名皮璧，根據(jù)不同的主題寫一套樣式
缺點(diǎn)：不利于顏色更新版述，工作量巨大簇爆，占用很大的空間，小程序本身就2Mb视译。耦合度太高，html和css混合了归敬，耦合度太高酷含。
2）使用Css3的 --var變量（認(rèn)識很久，一直沒有使用過）
這個變量和less scss里面的定義變量一樣汪茧，css為了不沖突這些預(yù)編譯的語法椅亚，使用的--var的用法。
通過不斷的咨詢舱污，有人說IOS9不兼容var變量的方式呀舔，但是本身很老的機(jī)型，而且本人驗(yàn)證了IOS8可以完美兼容扩灯。我在官方推薦weUI找打大量的Css3使用例子媚赖。使用選擇了第二種方式。
難點(diǎn)：
1）因?yàn)樾〕绦驔]有全局修改tabbar的屬性和方法珠插，使用只有一個一個界面去修改惧磺，但是這很麻煩，顯然不符合程序員偷懶的習(xí)慣捻撑。磨隘。。
解決辦法：
所以我想起了VUE的路由攔截器顾患，可惜的是番捂，我通過百度，未能找到這種方法江解。但是官方?jīng)]有设预，我們可以自己造呀。
https://segmentfault.com/a/1190000011044371?utm_source=tag-newest
2）js怎么去修改css犁河，設(shè)置css變量
解決辦法：
我們可以在每個頁面的JS文件里面設(shè)置一個Style變量絮缅，然后綁定到頁面上鲁沥。具體看代碼：
代碼實(shí)現(xiàn)：
攔截器代碼：intercept.js
/**
* tabbar頁面,只有這些頁面才能修改tabbar
*/
let tabbar_list = ['pages/home/home', 'pages/classify/classify', 'pages/cart1/cart1', 'pages/mine/mine']
function intercept(pageObj) {
/**
* 不要問為什么寫外面，因?yàn)橹苯訏燧d到App上面的耕魄，所以寫外面獲取的app是空
*/
let app = getApp()
if (pageObj.onShow) {
var _onShow = pageObj.onShow;
}
//對onShow進(jìn)行修飾
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小程序獲取頁面棧函數(shù)
return pages[pages.length - 1];
}
/**
* 修改小程序架構(gòu)架構(gòu)樣式
*/
function frameworkStyle() {
let app = getApp()
//app.globalData 這個數(shù)據(jù)來自于接口
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}}">
<!--要寫的內(nèi)容-->
</view>
