豆豆小说阅读网,好看的玄幻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

怎么實現(xiàn)微信小程序?qū)崿F(xiàn)換膚功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么實現(xiàn)微信小程序?qū)崿F(xiàn)換膚功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供成都服務(wù)器托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。

第一步：結(jié)構(gòu)

備注：由于不能直接操作微信小程序的根節(jié)點page，要實現(xiàn)全屏背景色的修改，只能模仿一個高度寬度都是100%的div（view）。上面就是class為page的這個div（view）。

　　　id='{{SkinStyle}}'，設(shè)置id是為了根據(jù)當(dāng)前皮膚類型，讓皮膚的wxss樣式的權(quán)重大于正常wxss樣式的權(quán)重，這樣有時候就沒必要加上！important了。

　　　根節(jié)點page需要在wxss中設(shè)置width:100%;height:100%。然后設(shè)置class為page的div（view）寬高都是100%。這樣就相當(dāng)于有個能操作的根節(jié)點page了。

　　　{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}這句是判斷當(dāng)前的皮膚類型，如果是normal就是icon-sun，否則就是icon-moon。

第二步：樣式wxss

皮膚wxss：

#dark {
 background: #333;
}
#dark .header .h-skin{
 color: white;
}

正常wxss：

.page .header .h-skin {
 color: #060505;
 padding: 0 32rpx;
 font-size: 40rpx;
}

公用wxss：

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
}

備注：這分別是三個文件。皮膚是theme.wxss，正常是index.wxss，公用是com.wxss

　　　因為換膚是所有頁面都變化，所以我建議把皮膚的wxss文件 @import "../theme-bg/theme"; 加載到com.wxss文件中。然后每個頁面的wxss都@import這個公用的com.wxss文件。

第三步：js

首先：在app.js的文件中，Page里的globalData中設(shè)置：skin:"normal";即默認(rèn)為normal皮膚

然后：在切換皮膚按鈕的頁面，添加切換按鈕的點擊事件bgBtn：

var app=getApp();
Page({
 data:{
   SkinStyle:"normal"  //這里其實可以不要
 }, 
 bgBtn:function(){
  if (this.data.SkinStyle==="normal"){
   app.globalData.skin = "dark"; //設(shè)置app（）中皮膚的類型
   this.setData({
    SkinStyle: app.globalData.skin //設(shè)置SkinStyle的值
   })
   wx.setStorage({   //設(shè)置storage
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

最后：在每個頁面，包括切換皮膚的頁面的Page中的onLoad事件里，讀取storage并設(shè)置SkinStyle的值：

onLoad: function (options) { 
 var that=this;
 wx.getStorage({
 key: 'skins',
 success: function(res) {
  that.setData({
   SkinStyle: res.data
  })
 },
 })
}

上述就是小編為大家分享的怎么實現(xiàn)微信小程序?qū)崿F(xiàn)換膚功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：怎么實現(xiàn)微信小程序?qū)崿F(xiàn)換膚功能-創(chuàng)新互聯(lián)
鏈接地址：http://fisionsoft.com.cn/article/dpishs.html

新聞中心

其他資訊