日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序 DarkMode適配指南

DarkMode 適配指南

微信從iOS客戶端 7.0.12、Android客戶端 7.0.13 開始正式支持 DarkMode，小程序也從基礎庫 v2.11.0、開發(fā)者工具 1.03.2004271 開始，為開發(fā)者提供小程序內的 DarkMode 適配能力。

開啟 DarkMode

在app.json中配置darkmode為true，即表示當前小程序已適配 DarkMode，所有基礎組件均會根據(jù)系統(tǒng)主題展示不同的默認樣式，navigation bar 和 tab bar 也會根據(jù)下面的配置自動切換。

相關配置

當app.json中配置darkmode為true時，小程序部分配置項可通過變量的形式配置，在變量配置文件中定義不同主題下的顏色或圖標，方法如下：

  1. 在app.json中配置themeLocation，指定變量配置文件theme.json路徑，例如：在根目錄下新增theme.json，需要配置"themeLocation":"theme.json"
  2. 在theme.json中定義相關變量；
  3. 在app.json中以@開頭引用變量。

支持通過變量配置的屬性：

  • 全局配置的 window 屬性與頁面配置下的屬性navigationBarBackgroundColornavigationBarTextStylebackgroundColorbackgroundTextStylebackgroundColorTopbackgroundColorBottom
  • 全局配置 window.tabBar 的屬性colorselectedColorbackgroundColorborderStylelisticonPathselectedIconPath

變量配置文件 theme.json

theme.json用于顏色主題相關的變量定義，需要先在themeLocation中配置theme.json的路徑，否則無法讀取變量配置。

配置文件須包含以下屬性：

屬性類型必填描述
lightobject是淺色模式下的變量定義
darkobject是深色模式下的變量定義

light和dark下均可以key: value的方式定義變量名和值，例如：

{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white"
  }
}

完成定義后，可在全局配置或頁面配置的相關屬性中以@開頭引用，例如：

// 全局配置
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle"
  }
}
// 頁面配置
{
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle"
}

配置完成后，小程序框架會自動根據(jù)系統(tǒng)主題，為小程序展示對應主題下的顏色。

配置示例

app.json（示例省略了主題相關以外的配置項）

{
    "window": {
        "navigationBarBackgroundColor": "@navBgColor",
        "navigationBarTextStyle": "@navTxtStyle",
        "backgroundColor": "@bgColor",
        "backgroundTextStyle": "@bgTxtStyle",
        "backgroundColorTop": "@bgColorTop",
        "backgroundColorBottom": "@bgColorBottom"
    },
    "tabBar": {
        "color": "@tabFontColor",
        "selectedColor": "@tabSelectedColor",
        "backgroundColor": "@tabBgColor",
        "borderStyle": "@tabBorderStyle",
        "list": [{
            "iconPath": "@iconPath1",
            "selectedIconPath": "@selectedIconPath1"
        }, {
            "iconPath": "@iconPath2",
            "selectedIconPath": "@selectedIconPath2"
        }]
    }
}

theme.json

{
    "light": {
        "navBgColor": "#f6f6f6",
        "navTxtStyle": "black",
        "bgColor": "#ffffff",
        "bgTxtStyle": "light",
        "bgColorTop": "#eeeeee",
        "bgColorBottom": "#efefef",
        "tabFontColor": "#000000",
        "tabSelectedColor": "#3cc51f",
        "tabBgColor": "#ffffff",
        "tabBorderStyle": "black",
        "iconPath1": "image/icon1_light.png",
        "selectedIconPath1": "image/selected_icon1_light.png",
        "iconPath2": "image/icon2_light.png",
        "selectedIconPath2": "image/selected_icon2_light.png",
    },
    "dark": {
        "navBgColor": "#191919",
        "navTxtStyle": "white",
        "bgColor": "#1f1f1f",
        "bgTxtStyle": "dark",
        "bgColorTop": "#191919",
        "bgColorBottom": "#1f1f1f",
        "tabFontColor": "#ffffff",
        "tabSelectedColor": "#51a937",
        "tabBgColor": "#191919",
        "tabBorderStyle": "white",
        "iconPath1": "image/icon1_dark.png",
        "selectedIconPath1": "image/selected_icon1_dark.png",
        "iconPath2": "image/icon2_dark.png",
        "selectedIconPath2": "image/selected_icon2_dark.png",
    }
}

獲取當前系統(tǒng)主題

如果app.json中聲明了"darkmode": true，wx.getSystemInfo或wx.getSystemInfoSync的返回結果中會包含theme屬性，值為light或dark。

如果app.json未聲明"darkmode": true，則無法獲取到theme屬性（即theme為undefined）。

監(jiān)聽主題切換事件

支持2種方式：

  1. 在App()中傳入onThemeChange回調方法，主題切換時會觸發(fā)此回調
  2. 通過wx.onThemeChange監(jiān)聽主題變化，wx.offThemeChange取消監(jiān)聽

WXSS 適配

WXSS中，支持通過媒體查詢 prefers-color-scheme 適配不同主題，與 Web 中適配方式一致，例如：


/* 一般情況下的樣式 begin */
.some-background {
    background: white;
}
.some-text {
    color: black;
}
/* 一般情況下的樣式 end */

@media (prefers-color-scheme: dark) {
    /* DarkMode 下的樣式 start */
    .some-background {
        background: #1b1b1b;
    }
    .some-text {
        color: #ffffff;
    }
    /* DarkMode 下的樣式 end */
}

開發(fā)者工具調試

微信開發(fā)者工具 1.03.2004271 版本開始已支持 DarkMode 調試，在模擬器頂部可以切換 深色/淺色 模式進行，如圖：

Bug & Tip

  1. tip: 需要注意的是，WXSS 中的媒體查詢不受app.json中的darkmode開關配置影響，只要微信客戶端（iOS 7.0.12、Android 7.0.13）支持 DarkMode，無論是否配置"darkmode": true，在系統(tǒng)切換到 DarkMode 時，媒體查詢都將生效。
  2. tip: 主題切換事件需要在配置"darkmode": true時，才會觸發(fā)。
  3. bug: iOS 7.0.12 在 light 模式中配置 tabBar 的borderStyle為white時可能會出現(xiàn)黑色背景的 bug，后續(xù)版本將會修復。

文章題目：創(chuàng)新互聯(lián)小程序教程：微信小程序 DarkMode適配指南
文章位置：http://www.5511xx.com/article/djshheo.html