微信小程序?qū)崿F(xiàn)皮膚功能（夜間模式）

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

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)專業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

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

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

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

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

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

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

      3.把設(shè)置保存到本地，退出應(yīng)用再進來時，依然加載上次設(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){
  
 }else{
  //否則
  style.skin = ""
 }
 //保存信息
 that.setData({
  skinStyle: style
 })
 }
})

按鈕功能OK了，現(xiàn)在我們?nèi)憳邮?/p>

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

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

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

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

然后呢

我們把普通模式下的wxss復(fù)制一份，貼進來

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

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

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

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

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

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

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

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

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

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

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

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

@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)在在訪問其它頁面的時候，dark皮膚也會傳進去

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

現(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è)置

所以要在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è)置黑色皮膚，然后退出，進去之后不是黑色
因為我們在頁面加載時沒設(shè)置

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

現(xiàn)在再來看看

皮膚沒問題了

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

因為開關(guān)重置了

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

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

分享題目：微信小程序?qū)崿F(xiàn)皮膚功能（夜間模式）
網(wǎng)址分享：http://www.muchs.cn/article28/ghoejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站收錄、企業(yè)網(wǎng)站制作、建站公司、手機網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)