提交 f064bd7d 编写于 作者: D DCloud_LXH

chore: darkmode.md、vue3-pinia.md

上级 f4ea4d23
......@@ -132,4 +132,4 @@
* [国际化专题](/tutorial/i18n.md)
* [国际化开发指南](/tutorial/i18n.md)
* [海外开发者使用指南](/tutorial/internationalization.md)
<!--* [暗黑主题](/tutorial/darkmode.md)-->
* [暗黑主题](/tutorial/darkmode.md)
## DarkMode 适配指南 @darkmode
# DarkMode 适配指南 @darkmode
> HBuilder X 3.6.9+ 支持
> 暗黑模式(Dark Mode),也被称为夜间模式或深色模式,是一种高对比度,或者反色模式的显示模式。是一种有利于在黑暗环境下观看手机的高对比度的模式,与传统的白底黑字相反,在夜间长时间观看手机不至于太难受,会给你一种更舒适的感觉,可能会对视力有所保护。
### 开启 DarkMode @open-darkmode
## 开启 DarkMode @open-darkmode
> 在 `manifest.json` 配置,应用的部分配置可通过变量的形式配置,在变量配置文件中定义不同主题下的颜色或图标,各平台配置如下:
#### app-plus
### app-plus
`manifest.json -> app-plus` 中配置:
......@@ -16,16 +16,47 @@
2. 配置 `themeLocation`,指定变量配置文件 `theme.json` 路径,例如:在根目录下新增 `theme.json`,需要配置 `"themeLocation":"theme.json"`
3.`theme.json` 中定义相关变量
4.`pages.json` 中以@开头引用变量
5. 需要云端打包生效
6. 整体配置
5. 整体配置
```json
"app-plus" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
"app-plus" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
6. 需要云端打包生效
#### iOS 安全区域适配
- 开启安全区域占位
> 在 manifest.json 文件的"plus" 节点下添加 "safearea" 适配 iOS 的安全区域,"background" 对应正常模式下安全区域外的背景颜色,"backgroundDark"对应暗黑模式下安全区域外的背景颜色
```json
"plus" : {
"safearea": { //iOS平台的安全区域
"background": "#ffffff",
"backgroundDark": "#2f0508", // HX 3.1.19+支持
"bottom": {
"offset": "auto"
}
}
}
```
- 关闭安全区域占位
> 将 "offset" 置为 “none” 关闭安全区域的占位,注:关闭安全区域占位在刘海屏页面内容可能会被 “homeBar” 挡住,需要自行适配,具体请参考文档 [iOS 刘海屏适配](https://ask.dcloud.net.cn/article/35564)
```json
"safearea": {
"bottom": {
"offset": "none"
}
}
```
#### h5
**注意:iOS 13+、Android 10+设备上才支持**
### h5
`manifest.json -> h5` 中配置:
......@@ -33,15 +64,15 @@
2. 配置 `themeLocation`,指定变量配置文件 `theme.json` 路径,例如:在根目录下新增 `theme.json`,需要配置 `"themeLocation":"theme.json"`
3.`theme.json` 中定义相关变量
4.`pages.json` 中以@开头引用变量
5. 整体配置
5. 整体配置
```json
"h5" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
"h5" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
#### mp-weixin
### mp-weixin
`manifest.json -> mp-weixin` 中配置:
......@@ -49,13 +80,13 @@
2. 配置 `themeLocation`,指定变量配置文件 `theme.json` 路径,例如:在根目录下新增 `theme.json`,需要配置 `"themeLocation":"theme.json"`
3.`theme.json` 中定义相关变量
4.`pages.json` 中以@开头引用变量
5. 整体配置
5. 整体配置
```json
"mp-weixin" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
"mp-weixin" : {
"darkmode" : true,
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
}
```
支持通过变量配置的属性如下所示:
......@@ -77,8 +108,7 @@
- iconPath
- selectedIconPath
### 变量配置文件 theme.json@themejson
## 变量配置文件 theme.json@themejson
`theme.json` 用于颜色主题相关的变量定义,需要先在 `themeLocation` 中配置 `theme.json` 的路径,否则无法读取变量配置。包含以下属性:
......@@ -124,7 +154,7 @@
配置完成后,调用相应 api 框架会自动所设属性,展示对应主题下的颜色。
### 配置示例@themeconfig
## 配置示例@themeconfig
pages.json(示例省略了主题相关以外的配置项)
......@@ -196,20 +226,20 @@ theme.json
}
```
### 获取当前主题@get-theme
## 获取当前主题@get-theme
如果 `manifest.json` 对应平台配置中声明了`"darkmode": true``uni.getSystemInfo``uni.getSystemInfoSync` 的返回结果中会包含 `theme` 属性,值为 `light``dark`
如果 `manifest.json` 对应平台配置未声明`"darkmode": true`,则无法获取到 `theme` 属性(即 theme 为 undefined)。
### 监听主题切换事件@on-theme-change
## 监听主题切换事件@on-theme-change
支持两种方式:
1.`App.vue` 中写上 `onThemeChange` 生命周期,主题切换时会触发
2. 通过 `uni.onThemeChange` 监听主题变化,`uni.offThemeChange` 取消监听
### 页面 css 适配@perfers-color-scheme
## 页面 css 适配@perfers-color-scheme
> [css 支持情况](https://caniuse.com/?search=prefers-color-scheme)
......
......@@ -6,6 +6,8 @@
> 使用 `HBuilder X` 不需要手动安装,直接使用即可。使用 `CLI` 需要手动安装,执行 `yarn add pinia` 或 `npm install pinia`。
> Vue 2 项目暂不支持
### Pinia 是什么?
Pinia(发音为 `/piːnjʌ/`,如英语中的 `peenya`) 是 Vue 的存储库,它允许您跨组件、页面共享状态。在服务器端以及小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册