您好,登錄后才能下訂單哦!
小編給大家分享一下小程序如何實(shí)現(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啦
以上是“小程序如何實(shí)現(xiàn)皮膚的夜間模式”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。