微信小程式實現皮膚的夜間模式

這篇文章主要為大家介紹了關於利用微信小程式實現皮膚功能，也就是實現夜間模式的相關資料，文中透過範例程式碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

老規矩，先上效果圖

#個人對夜間模式這個功能情有獨鍾

晚上黑燈瞎火的看手機，螢幕亮度就算調到最低依然很是刺眼呀

所以我一直用某瀏覽器，因為有夜間模式

言歸正傳，依然是分析功能點

      1.點選按鈕，切換一組css（這個功能很簡單）

##      2.將皮膚設定儲存到全域變量，在訪問其它頁面時也能有效果

      3.把設定儲存到本地，退出應用再進來時，依然載入上次設定的皮膚

先從切換開始吧，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了，現在我們去寫樣式

像這種黑的風格的皮膚，大背景色用#000

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

既然需要一套皮膚，那我們就去資料夾外面寫一個樣式檔

就新建一個skin目錄，下面寫一個dark.wxss吧

然後呢

我們把普通模式下的wxss複製一份，貼進來

把和顏色有關的屬性留下來，其它刪除

像background呀，border，color等。 。其它統統不要

最後發現就剩這麼點了。 。

/*夜间模式*/
/****个人信息页面****/
.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;
}
/****个人信息页面结束****/

大家發現，我這些樣式名稱都有dark-box

這個dark-box就是最外面，也是最大的盒子（除了預設的page哈）

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

<view class="my-box {{skinStyle}}-box">

當然你也可以在寫一個皮膚樣式，黃、紅、藍。 。 。

現在這個寫法，我們只用控制變數skinStyle的值就能改變皮膚樣式了

我們還能寫個blue-box的皮膚，然後設定變數為skinStyle為blue就行了

還有關鍵一步，在wxss檔案中把這個皮膚檔案引入要顯示的頁面

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

#接下來第二步，這就簡單了。 。

設定到全域變數嘛，先getApp(),然後傳過去就行了

#

var app=getApp()
Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {
 },
 switchChange:function(e){
 var that =this
 //设置全局变量
 if(e.detail.value == true){
  app.globalData.skin="dark"
 }else{
  app.globalData.skin = ""
 }
 that.setData({
  skinStyle: app.globalData.skin
 })
 }
})

##現在在存取其它頁面的時候，dark皮膚也會傳進去

我只寫了一個頁面哈，所以只有這個頁面會有變化

現在第三步了，保存到localstroge中

var app=getApp()
Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {

 },
 switchChange:function(e){
 var that =this

 //设置全局变量
 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
 })
 }
})

完了嗎？並沒有。 。

我們要在程式開啟時就取得皮膚設定

所以要在app.js去get與皮膚相關的資訊

#

 getSkin:function(){
 var that =this
 wx.getStorage({
  key: 'skin',
  success: function (res) {
  that.globalData.skin=res.data
  }
 })
 }

現在我們設定黑色皮膚，然後退出，進去之後不是黑色

因為我們在頁面載入時沒有設定

##

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

現在再來看看

皮膚沒問題了

結果按鈕的狀態是關閉，但皮膚開著

因為開關重置了

這個就交給大家自己解決啦，啟動時判斷一下就OK啦

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

微信小程式中vidao實作影片播放與彈幕功能的介紹

微信小程式開發圓形選單(仿建行圓形選單)

以上是微信小程式實現皮膚的夜間模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！