pc或者移動端實現換膚功能還是比較簡單的,大致就是需要換膚的css,還有正常的css;把當前**型別存入本地;然後通過js讀取並判斷當前應該載入哪套css。
1.需要換膚的wxss,正常的wxss。
2.每個頁面都引入換膚的wxss(因為換膚每個頁面都需要改變)。
4.每個頁面onload的時候,讀取storage裡的資料並設定當前**型別的值。
例子:
第一步:結構
<id='}',設定id是為了根據當前**型別,讓**的wxss樣式的權重大於正常wxss樣式的權重,這樣有時候就沒必要加上!important了。view
class
='page'
id='}'
>
<
view
class
='header'
>
<
view
class
='h-skin
iconfont }'
bindtap
='bgbtn'
>
view
>
view
>
view
>
根節點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...
微信小程式 分頁功能
這個時候就需要分批次請求後台的房型列表 以這個例子為列,先看一下效果,為了方便測試,我是兩條資料為一頁,如果請求的最後一頁沒有了資料,則顯示沒有更多資料 這個效果中,乙個房型就是一條資料,大概思路就是將你每次要請求多少條資料傳到後台介面,後台會返回你請求的這幾條資料,在使用者下拉一次時再去請求一次介...