Skip to content

混合开发 - 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-primarytmui4x框架APP的主题色
--tmui-darktmui4x框架APP的当前暗黑dark|light,是直接注入到页面body属性上见下

**--tmui-dark**还会被注入到body属性上 <body tmui-dark="dark\light">上,你在编写应用时可以根据body上的这个属性来切换页面的暗黑样式

JS变量

为了方便计算,同时也把上述css变量注入到了一个全局是js 属性中。 可以全局中tmuiAppTheme['属性']使用。

如:

js

const height = tmuiAppTheme['--window-width'];
最近更新