混合开发 - CSS变量
前提
在阅读本文前,你要先把你的网页应用嵌套在uniappx中的x-webview-u组件内浏览器应用, 并在你的应用中引入好tmuiJssdk.js,才能继续往下看。
CSS变量
你的网页在被载入后,会主动注入一个全局可用的var css变量.
使用:
css
background-color:var(--tmui-primary);
height:var(--status-bar-height);| 名称 | 说明 |
|---|---|
--status-bar-height | 状态栏高 |
--window-bottom | 距离底部的安全高(就是手机下面的操作条高) |
--window-top | 距离顶部的安全高(一般为0,如果是异形屏会有让开那个黑条的距离) |
--window-height | 可用屏幕的容器高 |
--window-width | 可用屏幕的容器宽 |
--screen-height | 屏幕的高 |
--screen-width | 屏幕的宽 |
--screen-pixelRatio | 屏幕的密度 |
--tmui-primary | tmui4x框架APP的主题色 |
--tmui-dark | tmui4x框架APP的当前暗黑dark|light,是直接注入到页面body属性上见下 |
**--tmui-dark**还会被注入到body属性上 <body tmui-dark="dark\light">上,你在编写应用时可以根据body上的这个属性来切换页面的暗黑样式
JS变量
为了方便计算,同时也把上述css变量注入到了一个全局是js 属性中。 可以全局中tmuiAppTheme['属性']使用。
如:
js
const height = tmuiAppTheme['--window-width'];