微信小程式深淺主題模式

2022-07-01 22:21:15 字數 738 閱讀 6819

原文: 

1、開啟暗黑模式

//

2、配置主題檔案

//

theme.json配置檔案一共分為兩個屬性,light 和 dark,分別正常模式和暗黑模式。

//

theme.json,

"dark":

}

必須存在 light 和 dark 兩個屬性,裡層命名自定義,沒有嚴格要求。

在配置屬性以 @開頭拼接theme.json中自定義的名字寫入配置,示例如下

//,  

"darkmode

": true,

"themelocation

": "

theme.json

"}

配置完些,接著手機開啟暗黑模式(深色模式)後,小程式會根據你配置的顏色進行轉換。

4、wxss樣式適配暗黑模式

wxss中,支援通過**查詢prefers-color-scheme適配不同主題。

如下樣式會在正常模式下頁面背景為灰白色,暗黑模式下為黑色。

/*

正常模式下應用的樣式

*/page

/*暗黑模式下應用的樣式

*/@media (prefers-color-scheme: dark)

}

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...