2023年6月20日发(作者：)

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端，在 ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px。注意此时不⽀持 rpxnvue中，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端，在 ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px，不⽀持 rpx。早期 uni-app 提供了 upx ，⽬前已经推荐统⼀改为 rpx 了，详见样式导⼊使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤;表⽰语句结束。⽰例代码：@import "../../common/";.uni-card {box-shadow: none;}内联样式框架组件上⽀持使⽤ style、class 属性来控制组件的样式。style：静态的样式统⼀写到 class 中。style 接收动态的样式，在运⾏时会进⾏解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。选择器⽬前⽀持的选择器有：选择器样例样例描述.选择所有拥有 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;}全局样式与局部样式定义在 中的样式为全局样式，作⽤于每⼀个页⾯。在 pages ⽬录下 的 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时通过temInfoSync().statusBarHeight获取状态栏⾼度，然后通过style绑定⽅式给占位view设定⾼度。下⽅提供了⽰例代码代码块快速书写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() {sBarHeight = temInfoSync().statusBarHeight}}固定值uni-app 中以下组件的⾼度是固定的，不可修改：组件描述AppH5NavigationBar导航栏44px44pxTabBar底部选项卡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/');}注意微信⼩程序不⽀持相对路径(真机不⽀持，开发⼯具⽀持)字体图标uni-app ⽀持使⽤字体图标，使⽤⽅式与普通 web 项⽬相同，需要注意以下⼏点：⽀持 base64 格式字体图标。⽀持⽹络路径字体图标。⼩程序不⽀持在css中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。App端在v3模式以前，也有相同限制。v3编译模式起⽀持直接使⽤本地背景图和字体。⽹络路径必须加协议头 https。从 上下载的字体⽂件，都是同名字体(字体名都叫iconfont，安装字体⽂件时可以看到)，在nvue内使⽤时需要注意，此字体名重复可能会显⽰不正常，可以使⽤⼯具修改。使⽤本地路径图标字体需注意：为⽅便开发者，在字体⽂件⼩于 40kb 时，uni-app 会⾃动将其转化为 base64 格式；字体⽂件⼤于等于40kb，仍转换为 base64 ⽅式使⽤的话可能有性能问题，如开发者必须使⽤，则需⾃⼰将其转换为 base64 格式使⽤，或将其挪到服务器上，从⽹络地址引⽤；字体⽂件的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。 @font-face {font-family: test1-icon;src: url('~@/static/');}nvue中不可直接使⽤css的⽅式引⼊字体⽂件，需要使⽤以下⽅式在js内引⼊。nvue内不⽀持本地路径引⼊字体，请使⽤⽹络链接或者base64形式。src字段的url的括号内⼀定要使⽤单引号。var domModule = eModule('dom');e('fontFace', {'fontFamily': "fontFamilyName",'src': "url('...')"})⽰例：

2023年6月20日发(作者：)

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端，在 ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px。注意此时不⽀持 rpxnvue中，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端，在 ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px，不⽀持 rpx。早期 uni-app 提供了 upx ，⽬前已经推荐统⼀改为 rpx 了，详见样式导⼊使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤;表⽰语句结束。⽰例代码：@import "../../common/";.uni-card {box-shadow: none;}内联样式框架组件上⽀持使⽤ style、class 属性来控制组件的样式。style：静态的样式统⼀写到 class 中。style 接收动态的样式，在运⾏时会进⾏解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。选择器⽬前⽀持的选择器有：选择器样例样例描述.选择所有拥有 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;}全局样式与局部样式定义在 中的样式为全局样式，作⽤于每⼀个页⾯。在 pages ⽬录下 的 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时通过temInfoSync().statusBarHeight获取状态栏⾼度，然后通过style绑定⽅式给占位view设定⾼度。下⽅提供了⽰例代码代码块快速书写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() {sBarHeight = temInfoSync().statusBarHeight}}固定值uni-app 中以下组件的⾼度是固定的，不可修改：组件描述AppH5NavigationBar导航栏44px44pxTabBar底部选项卡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/');}注意微信⼩程序不⽀持相对路径(真机不⽀持，开发⼯具⽀持)字体图标uni-app ⽀持使⽤字体图标，使⽤⽅式与普通 web 项⽬相同，需要注意以下⼏点：⽀持 base64 格式字体图标。⽀持⽹络路径字体图标。⼩程序不⽀持在css中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。App端在v3模式以前，也有相同限制。v3编译模式起⽀持直接使⽤本地背景图和字体。⽹络路径必须加协议头 https。从 上下载的字体⽂件，都是同名字体(字体名都叫iconfont，安装字体⽂件时可以看到)，在nvue内使⽤时需要注意，此字体名重复可能会显⽰不正常，可以使⽤⼯具修改。使⽤本地路径图标字体需注意：为⽅便开发者，在字体⽂件⼩于 40kb 时，uni-app 会⾃动将其转化为 base64 格式；字体⽂件⼤于等于40kb，仍转换为 base64 ⽅式使⽤的话可能有性能问题，如开发者必须使⽤，则需⾃⼰将其转换为 base64 格式使⽤，或将其挪到服务器上，从⽹络地址引⽤；字体⽂件的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。 @font-face {font-family: test1-icon;src: url('~@/static/');}nvue中不可直接使⽤css的⽅式引⼊字体⽂件，需要使⽤以下⽅式在js内引⼊。nvue内不⽀持本地路径引⼊字体，请使⽤⽹络链接或者base64形式。src字段的url的括号内⼀定要使⽤单引号。var domModule = eModule('dom');e('fontFace', {'fontFamily': "fontFamilyName",'src': "url('...')"})⽰例：