小編給大家分享一下小程序如何實(shí)現(xiàn)皮膚的夜間模式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),冠縣企業(yè)網(wǎng)站建設(shè),冠縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,冠縣網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,冠縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

老規(guī)矩，先上效果圖

個(gè)人對(duì)夜間模式這個(gè)功能情有獨(dú)鐘

晚上黑燈瞎火的看手機(jī)，屏幕亮度就算調(diào)到最低依然很是刺眼呀

所以我一直用某瀏覽器，因?yàn)橛幸归g模式

言歸正傳，依然是分析功能點(diǎn)

1.點(diǎn)擊按鈕，切換一套css（這個(gè)功能很簡(jiǎn)單）

2.把皮膚設(shè)置保存到全局變量，在訪問(wèn)其它頁(yè)面時(shí)也能有效果

3.把設(shè)置保存到本地，退出應(yīng)用再進(jìn)來(lái)時(shí)，依然加載上次設(shè)置的皮膚

先從切換開(kāi)始吧，switch很少用，還是貼一下吧

Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {
 },
 switchChange:function(e){
 var that =this
 var style
 //如果開(kāi)啟
 if(e.detail.value == true){
  style="dark"
 }else{
  //否則
  style.skin = ""
 }
 //保存信息
 that.setData({
  skinStyle: style
 })
 }
})

按鈕功能OK了，現(xiàn)在我們?nèi)?xiě)樣式

像這種黑的風(fēng)格的皮膚，大背景色用#000

小背景用#333，文字用#999吧，我也懶得用取色器了

既然需要一套皮膚，那我們就去文件夾外面寫(xiě)一個(gè)樣式文件

就新建一個(gè)skin目錄，下面寫(xiě)一個(gè)dark.wxss吧

然后呢

我們把普通模式下的wxss復(fù)制一份，貼進(jìn)來(lái)

把和顏色有關(guān)的屬性留下來(lái)，其它刪除

像background呀，border，color等。。其它統(tǒng)統(tǒng)不要

最后發(fā)現(xiàn)就剩這么點(diǎn)了。。

/*夜間模式*/
/****個(gè)人信息頁(yè)面****/
.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è)人信息頁(yè)面結(jié)束****/

大家發(fā)現(xiàn)，我這些樣式名稱都有dark-box

這個(gè)dark-box就是最外面，也是最大的盒子（除了默認(rèn)的page哈）

my-box是普通模式，dark-box就是夜間模式

當(dāng)然你也可以在寫(xiě)一個(gè)皮膚樣式，黃、紅、藍(lán)。。。

現(xiàn)在這個(gè)寫(xiě)法，我們只用控制變量 skinStyle的值就能改變皮膚樣式了

我們還能寫(xiě)個(gè)blue-box的皮膚，然后設(shè)置變量為skinStyle為blue就行了

還有關(guān)鍵一步，在wxss文件中把這個(gè)皮膚文件引入要顯示的頁(yè)面

@import "../../skin/dark.wxss";

接下來(lái)第二步，這就簡(jiǎn)單了。。

設(shè)置到全局變量嘛，先getApp(),然后傳過(guò)去就行了

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)在在訪問(wèn)其它頁(yè)面的時(shí)候，dark皮膚也會(huì)傳進(jìn)去

我只寫(xiě)了一個(gè)頁(yè)面哈，所以只有這個(gè)頁(yè)面會(huì)有變化

現(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
 })
 }
})

完了嗎？并沒(méi)有。。

我們要在程序打開(kāi)時(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)在我們?cè)O(shè)置黑色皮膚，然后退出，進(jìn)去之后不是黑色
因?yàn)槲覀冊(cè)陧?yè)面加載時(shí)沒(méi)設(shè)置

 onLoad: function (options) {
  var that =this 
  that.setData({
  skinStyle: app.globalData.skin
  })
 }

現(xiàn)在再來(lái)看看

皮膚沒(méi)問(wèn)題了

結(jié)果按鈕的狀態(tài)是關(guān)閉，皮膚卻是開(kāi)著

因?yàn)殚_(kāi)關(guān)重置了

這個(gè)就交給大家自己解決啦，啟動(dòng)時(shí)判斷一下就OK啦

以上是“小程序如何實(shí)現(xiàn)皮膚的夜間模式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！