uniapp如何渲染html模板,uni-app页⾯样式
页⾯样式与布局
尺⼨单位
uni-app ⽀持的通⽤ css 单位包括 px、rpxpx 即屏幕像素
rpx 即响应式px，⼀种根据屏幕宽度⾃适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显⽰效果会等⽐放⼤。
vue页⾯⽀持普通H5单位，但在nvue⾥不⽀持：rem 默认根字体⼤⼩为 屏幕宽度/20(⼩程序、字节跳动⼩程序、App、H5)
vh viewpoint height，视窗⾼度，1vh等于视窗⾼度的1%
vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%
nvue还不⽀持百分⽐单位。
App端，在 pages.json ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px。注意此时不⽀
持 rpx
nvue中，uni-app 模式(nvue 不同编译模式介绍)可以使⽤ px 、rpx，表现与 vue 中⼀致。weex 模式⽬前遵循weex的单位，它的单位⽐较特殊：px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页⾯中的 rpx 理念相同。(⼀定要注意 weex 模式的 px，和 vue ⾥的px 逻辑不⼀样。)
wx：与设备屏幕宽度⽆关的长度单位，与 vue 页⾯中的 px 理念相同
下⾯对 rpx 详细说明：
设计师在提供设计图时，⼀般只提供⼀个分辨率的图。
严格按设计图标注的 px 做开发，在不同宽度的⼿机上界⾯很容易变形。
⽽且主要是宽度变形。⾼度⼀般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。
⼩程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 端都⽀持了 rpx。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进⾏⾃适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页⾯元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换⾔之，页⾯元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app ⾥⾯的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app ⾥⾯的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app ⾥⾯的宽度应该设为：750 * 200 / 375，结果为：400rpx。
Tips注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越⼤。如不想根据屏幕宽度缩放，则应该使⽤ px 单位。
如果开发者在字体或⾼度中也使⽤了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变⼤、⾼度会变⼤。如果你需要固定⾼度，则应该使⽤ px 。
rpx不⽀持动态横竖屏切换计算，使⽤rpx建议锁定屏幕⽅向
设计师可以⽤ iPhone6 作为视觉稿的标准。
App端，在 pages.json ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px，不⽀持 rpx。
早期 uni-app 提供了 upx ，⽬前已经推荐统⼀改为 rpx 了，详见
样式导⼊
使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤；表⽰语句结束。
⽰例代码：
@import "../../common/uni.css";
.
uni-card {
box-shadow: none;
}
内联样式
框架组件上⽀持使⽤ style、class 属性来控制组件的样式。style：静态的样式统⼀写到 class 中。style 接收动态的样式，在运⾏时会进⾏解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。
选择器
⽬前⽀持的选择器有：选择器样例样例描述.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有⽂档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插⼊内容，仅⼩程序和App⽣效
::beforeview::before在 view 组件前边插⼊内容，仅⼩程序和App⽣效
注意：在 uni-app 中不能使⽤ * 选择器。
page 相当于 body 节点，例如：
page {
background-color:#ccc;
}
全局样式与局部样式
定义在 App.vue 中的样式为全局样式，作⽤于每⼀个页⾯。在 pages ⽬录下 的 vue ⽂件中定义的样式为局部样式，只作⽤在对应的页⾯，并会覆盖 App.vue 中相同的选择器。
前端页面模板注意：App.vue 中通过 @import 语句可以导⼊外联样式，⼀样作⽤于每⼀个页⾯。
nvue页⾯暂不⽀持全局样式
CSS变量
uni-app 提供内置 CSS 变量CSS变量描述App⼩程序H5--status-bar-height系统状态栏⾼度系统状态栏⾼度、nvue注意见下25px0
--window-top内容区域距离顶部的距离00NavigationBar 的⾼度
--window-bottom内容区域距离底部的距离00TabBar 的⾼度
注意：var(--status-bar-height) 此变量在⼩程序环境为固定 25px，在 App ⾥为⼿机实际状态栏⾼度。
当设置 "navigationStyle":"custom" 取消原⽣导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使⽤⼀个⾼度为 var(--status-bar-height) 的 view 放在页⾯顶部，避免页⾯内容出现在状态栏。
由于在H5端，不存在原⽣导航栏和tabbar，也是前端div模拟。如果设置了⼀个固定位置的居底view，
在⼩程序和App端是在tabbar上⽅，但在H5端会与tabbar重叠。此时可使⽤--window-bottom，不管在哪个端，都是固定在tabbar上⽅。
⽬前 nvue 在App端，还不⽀持 --status-bar-height变量，替代⽅案是在页⾯onLoad时通过
代码块
快速书写css变量的⽅法是：在css中敲hei，在候选助⼿中即可看到3个css变量。(HBuilderX 1.9.6以上⽀持)
⽰例1 - 普通页⾯使⽤css变量：
状态栏下的⽂字
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.toTop {
bottom: calc(var(--window-bottom) + 10px)
}
⽰例2 - nvue页⾯获取状态栏⾼度
export default {
data() {
return {
iStatusBarHeight:0
}
},
onLoad() {
this.iStatusBarHeight = SystemInfoSync().statusBarHeight
}
}
固定值
uni-app 中以下组件的⾼度是固定的，不可修改：组件描述AppH5NavigationBar导航栏44px44px
TabBar底部选项卡HBuilderX 2.3.4之前为56px，2.3.4起和H5调为⼀致，统⼀为 50px。但可以⾃主更改⾼度)50px
各⼩程序平台，包括同⼩程序平台的iOS和Android的⾼度也不⼀样。
Flex布局
为⽀持跨平台，框架建议使⽤Flex布局，关于Flex布局可以参考外部⽂档A Complete Guide to Flexbox、阮⼀峰的flex教程等。
背景图⽚
uni-app ⽀持使⽤在 css ⾥设置背景图⽚，使⽤⽅式与普通 web 项⽬⼤体相同，但需要注意以下⼏点：⽀持 base64 格式图⽚。
⽀持⽹络路径图⽚。
⼩程序不⽀持在css中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。App端在v3模式以前，也有相同限制。v3编译模式起⽀持直接使⽤本地背景图和字体。
使⽤本地路径背景图⽚需注意：为⽅便开发者，在背景图⽚⼩于 40kb 时，uni-app 编译到不⽀持本地背景图的平台时，会⾃动将其转化为base64 格式；图⽚⼤于等于 40kb，会有性能问题，不建议使⽤太⼤的背景图，如开发者必须使⽤，则需⾃⼰将其转换为 base64 格式使⽤，或将其挪到服务器上，从⽹络地址引⽤。本地背景图⽚的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。 .test2 {
background-image: url('~@/static/logo.png');
}
注意⼩程序不⽀持相对路径(真机不⽀持，开发⼯具⽀持)
字体图标
uni-app ⽀持使⽤字体图标，使⽤⽅式与普通 web 项⽬相同，需要注意以下⼏点：⽀持 base64 格式字体图标。
⽀持⽹络路径字体图标。
⼩程序不⽀持在css中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。App端在v3模式以前，也有相同限制。v3编译模式起⽀持直接使⽤本地背景图和字体。
⽹络路径必须加协议头 https。
从 www.iconfont 上下载的字体⽂件，都是同名字体(字体名都叫iconfont，安装字体⽂件时可以看到)，在nvue内使⽤时需要注意，此字体名重复可能会显⽰不正常，可以使⽤⼯具修改。
使⽤本地路径图标字体需注意：为⽅便开发者，在字体⽂件⼩于 40kb 时，uni-app 会⾃动将其转化为 base64 格式；字体⽂件⼤于等于40kb，仍转换为 base64 ⽅式使⽤的话可能有性能问题，如开发者必须使⽤，则需⾃⼰将其转换为 base64 格式使⽤，或将其挪到服务器上，从⽹络地址引⽤；字体⽂件的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。 @font-face {
font-family: test1-icon;
src: url('~@/f');
}
nvue中不可直接使⽤css的⽅式引⼊字体⽂件，需要使⽤以下⽅式在js内引⼊。nvue内不⽀持本地路径引⼊字体，请使⽤⽹络链接或者base64形式。src字段的url的括号内⼀定要使⽤单引号。var domModule = quireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "fontFamilyName",
'src': "url('...')"
})
⽰例：
@font-face {
font-family: 'iconfont';
src: url('at.alicdn/t/font_f') format('truetype');
}
.test {
font-family: iconfont;
margin-left: 20rpx;
}
和
uni-app ⽀持在 template 模板中嵌套  和 ，⽤来进⾏ 列表渲染 和 条件渲染。
和  并不是⼀个组件，它们仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。代码⽰例
test 为 true 时显⽰
test 为 false 时显⽰
{{item}} - {{index}}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。