微信小程序?qū)崿F(xiàn)皮膚功能（夜間模式）
老規(guī)矩，先上效果圖
個(gè)人對夜間模式這個(gè)功能情有獨(dú)鐘
晚上黑燈瞎火的看手機(jī)，屏幕亮度就算調(diào)到最低依然很是刺眼呀
所以我一直用某瀏覽器，因?yàn)橛幸归g模式
言歸正傳，依然是分析功能點(diǎn)
1.點(diǎn)擊按鈕，切換一套css（這個(gè)功能很簡單）
2.把皮膚設(shè)置保存到全局變量，在訪問其它頁面時(shí)也能有效果
3.把設(shè)置保存到本地，退出應(yīng)用再進(jìn)來時(shí)，依然加載上次設(shè)置的皮膚
先從切換開始吧，switch很少用，還是貼一下吧
<switch bindchange="switchChange" color ="#F39C89" class="switch"/>
Page({
data: {
skinStyle: ""
},
onLoad: function (options) {
},
switchChange:function(e){
var that =this
var style
//如果開啟
if(e.detail.value == true){
style="dark"
}else{
//否則
style.skin = ""
}
//保存信息
that.setData({
skinStyle: style
})
}
})
按鈕功能OK了，現(xiàn)在我們?nèi)憳邮?br />
像這種黑的風(fēng)格的皮膚，大背景色用#000
小背景用#333，文字用#999吧，我也懶得用取色器了
既然需要一套皮膚，那我們就去文件夾外面寫一個(gè)樣式文件
就新建一個(gè)skin目錄，下面寫一個(gè)dark.wxss吧
然后呢
我們把普通模式下的wxss復(fù)制一份，貼進(jìn)來
把和顏色有關(guān)的屬性留下來，其它刪除
像background呀，border，color等。。其它統(tǒng)統(tǒng)不要
最后發(fā)現(xiàn)就剩這么點(diǎn)了。。
/*夜間模式*/
/****個(gè)人信息頁面****/
.dark-box{
background: #000 !important;
}
/*用戶信息部分*/
.dark-box .user-box{
background: #333 !important;
color: #999;
}
/*列表部分*/
.dark-box .extra-box{
background: #333 !important;
}
.dark-box .extra-box .extra-item{
border-bottom: 1px solid #000 !important;
}
.dark-box .extra-box .item-head{
color: #999;
}
.dark-box .between-box{
background: #333 !important;
}
.dark-box .between-left{
background: #333 !important;
}
.dark-box .between-left .item-head{
color: #999;
}
/****個(gè)人信息頁面結(jié)束****/
大家發(fā)現(xiàn)，我這些樣式名稱都有dark-box
這個(gè)dark-box就是最外面，也是最大的盒子（除了默認(rèn)的page哈）
my-box是普通模式，dark-box就是夜間模式
<view class="my-box {{skinStyle}}-box">
當(dāng)然你也可以在寫一個(gè)皮膚樣式，黃、紅、藍(lán)。。。
現(xiàn)在這個(gè)寫法，我們只用控制變量 skinStyle的值就能改變皮膚樣式了
我們還能寫個(gè)blue-box的皮膚，然后設(shè)置變量為skinStyle為blue就行了
還有關(guān)鍵一步，在wxss文件中把這個(gè)皮膚文件引入要顯示的頁面
@import "../../skin/dark.wxss";
接下來第二步，這就簡單了。。
設(shè)置到全局變量嘛，先getApp(),然后傳過去就行了
var app=getApp()
Page({
data: {
skinStyle: ""
},
onLoad: function (options) {
},
switchChange:function(e){
var that =this
//設(shè)置全局變量
if(e.detail.value == true){
app.globalData.skin="dark"
}else{
app.globalData.skin = ""
}
that.setData({
skinStyle: app.globalData.skin
})
}
})
現(xiàn)在在訪問其它頁面的時(shí)候，dark皮膚也會傳進(jìn)去
我只寫了一個(gè)頁面哈，所以只有這個(gè)頁面會有變化
現(xiàn)在第三步了，保存到localstroge中
var app=getApp()
Page({
data: {
skinStyle: ""
},
onLoad: function (options) {
},
switchChange:function(e){
var that =this
//設(shè)置全局變量
if(e.detail.value == true){
app.globalData.skin="dark"
}else{
app.globalData.skin = ""
}
that.setData({
skinStyle: app.globalData.skin
})
//保存到本地
wx.setStorage({
key: "skin",
data: app.globalData.skin
})
}
})
完了嗎？并沒有。。
我們要在程序打開時(shí)就獲取皮膚設(shè)置
所以要在app.js去get與皮膚相關(guān)的信息
getSkin:function(){
var that =this
wx.getStorage({
key: 'skin',
success: function (res) {
that.globalData.skin=res.data
}
})
}
現(xiàn)在我們設(shè)置黑色皮膚，然后退出，進(jìn)去之后不是黑色
因?yàn)槲覀冊陧撁婕虞d時(shí)沒設(shè)置
onLoad: function (options) {
var that =this
that.setData({
skinStyle: app.globalData.skin
})
}
現(xiàn)在再來看看
皮膚沒問題了
結(jié)果按鈕的狀態(tài)是關(guān)閉，皮膚卻是開著
因?yàn)殚_關(guān)重置了
這個(gè)就交給大家自己解決啦，啟動時(shí)判斷一下就OK啦
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap創(chuàng)建可折疊組件的對應(yīng)方法，以實(shí)例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了淺談javascript屬性onresize的詳細(xì)使用方法，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈窗滾動與頁面滾動沖突的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
突然問起我以前的函數(shù)，我也會愣一下，心想，真爛！我總是喜歡把最好的東西分享給大家的，以前的大家忘掉吧。2010-03-03
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug，情形如下：通過異步請求獲取json數(shù)據(jù)，然后拼接成html代碼，最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7，瀏覽器就崩潰，更別提IE6了，也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7，其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中，浪費(fèi)了不少時(shí)間2013-05-05
微信小程序中我們創(chuàng)建頁面時(shí)會自動創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及常用配置項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-11-11
我們在進(jìn)行圖片保存的時(shí)候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JavaScript Module模式的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)
這篇文章主要介紹了JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12