微信小程式之換膚的功能

2022-07-03 19:30:12 字數 1770 閱讀 8798

pc或者移動端實現換膚功能還是比較簡單的,大致就是需要換膚的css,還有正常的css;把當前**型別存入本地;然後通過js讀取並判斷當前應該載入哪套css。

1.需要換膚的wxss,正常的wxss。

2.每個頁面都引入換膚的wxss(因為換膚每個頁面都需要改變)。

4.每個頁面onload的時候,讀取storage裡的資料並設定當前**型別的值。

例子:

第一步:結構

<

view

class

='page'

id='}'

>

<

view

class

='header'

>

<

view

class

='h-skin

iconfont }'

bindtap

='bgbtn'

>

view

>

view

>

view

>

id='}',設定id是為了根據當前**型別,讓**的wxss樣式的權重大於正常wxss樣式的權重,這樣有時候就沒必要加上!important了。

根節點page需要在wxss中設定width:100%;height:100%。然後設定class為page的div(view)寬高都是100%。這樣就相當於有個能操作的根節點page了。

}這句是判斷當前的**型別,如果是normal就是icon-sun,否則就是icon-moon。

第二步:樣式wxss

**wxss:

#dark #dark .header .h-skin
正常wxss:

.page .header .h-skin
公用wxss:

page .page
備註:這分別是三個檔案。**是theme.wxss,正常是index.wxss,公用是com.wxss

因為換膚是所有頁面都變化,所以我建議把**的wxss檔案 @import "../theme-bg/theme";  載入到com.wxss檔案中。然後每個頁面的wxss都@import這個公用的com.wxss檔案。

第三步:js

然後:在切換**按鈕的頁面,新增切換按鈕的點選事件bgbtn: 

page(,

bgbtn:

function

()) wx.setstorage()

}else

) wx.setstorage()

}

}})

最後:在每個頁面,包括切換**的頁面的page中的onload事件裡,讀取storage並設定skinstyle的值:

onload: function

(options) )

},})

}

這樣每次啟動都能自動設定上一次設定的** 了

最終效果圖:

微信小程式功能介紹

援引官方對產品的定義 框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。基礎元件分為以下八大類 檢視容器 基礎內容 表單操作反饋 導航多 地圖畫布 將本地資源上傳到開發者伺服器 一種在單個tcp連線上進行全雙工通訊的協議,能夠輕鬆構建低延遲的客戶端。從本地相簿選擇或使用相...

微信小程式授權功能

思路 1.首先獲取授權,看看到底有沒有這個授權,如果有,那麼就不再進行再次請求,如果沒有,那麼再次請求或者其他的業務邏輯。2.檢視授權資訊介面 wx.getsetting object object 後面我們具體分析這個介面如何使用 3.通過來調取授權 業務 獲取使用者授權資訊 getshouqua...

微信小程式 分頁功能

這個時候就需要分批次請求後台的房型列表 以這個例子為列,先看一下效果,為了方便測試,我是兩條資料為一頁,如果請求的最後一頁沒有了資料,則顯示沒有更多資料 這個效果中,乙個房型就是一條資料,大概思路就是將你每次要請求多少條資料傳到後台介面,後台會返回你請求的這幾條資料,在使用者下拉一次時再去請求一次介...