uni-app(4):js语法、css语法

news2025/5/24 13:44:00

1 js语法

   uni-app的js API由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。标准ECMAScript的js仅是最基础的js。浏览器基于它扩展了window、document、navigator等对象。小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。node也扩展了fs等模块。uni-app基于ECMAScript扩展了uni对象,并且API命名与小程序保持兼容。

1.1 标准js和浏览器js的区别

   uni-app的js代码,h5端运行于浏览器中。非h5端(包含小程序和App),Android平台运行在v8引擎中,iOS平台运行在iOS自带的jscore引擎中,都没有运行在浏览器或webview里。非H5端,虽然不支持window、document、navigator等浏览器的js API,但也支持标准ECMAScript。请注意不要把浏览器里的js扩展对象等价于标准js。

        所以uni-app的非H5端,一样支持标准js,支持if、for等语法,支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。仅仅是不支持window、document、navigator等浏览器专用对象。

1.2 ES6 支持

        uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。ES6 API 的支持,详见如下表格部分(x 表示不支持,无特殊说明则表示支持):

StringiOS8iOS9iOS10Android
codePointAt
normalizexx仅支持 NFD/NFC
includes
startsWith
endsWith
repeat
String.fromCodePoint
ArrayiOS8iOS9iOS10Android
copyWithin
find
findIndex
fill
entries
keys
valuesxx
includesx
Array.from
Array.of
NumberiOS8iOS9iOS10Android
isFinite
isNaN
parseInt
parseFloat
isInteger
EPSILON
isSafeInteger
MathiOS8iOS9iOS10Android
trunc
sign
cbrt
clz32
imul
fround
hypot
expm1
log1p
log10
log2
sinh
cosh
tanh
asinh
acosh
atanh
ObjectiOS8iOS9iOS10Android
is
assign
getOwnPropertyDescriptor
keys
getOwnPropertyNames
getOwnPropertySymbols
OtheriOS8iOS9iOS10Android<5
Symbol
Set
Map
Proxyxxx
Reflect
Promise

        默认不需要在微信工具里继续开启es6转换。但如果用了微信的wxml自定义组件(wxcomponents目录下),uni-app编译器并不会处理这些文件中的es6代码,需要去微信工具里开启转换。从HBuilderX调起微信工具时,如果发现工程下有wxcomponents目录会自动配置微信工程打开es6转换。

1.3 App端

        在App端JS脚本运行在独立的JS引擎中,vue页面使用系统webview渲染,nvue页面使用系统原生View渲染。

        Android平台

  • JS脚本运行在独立Google V8引擎中,版本与Chrome83一致,因此支持的语法与Android系统版本无关,即便是Android4.4也与Chrome83支持的语法一样。
  • vue页面渲染在系统Webview中,受Android系统版本影响,在Android低端机上存在css浏览器兼容性问题,太新的css语法在低版本不支持。当然也可以使用x5等三方webview来拉齐实现。

        iOS平台

  • JS脚本运行在iOS操作系统提供的JavaScriptCore 引擎,因此支持的语法与iOS系统有关,跟iOS系统的Safari浏览器一致。 
  • vue页面渲染在系统WKWebview中,受iOS系统版本影响,兼容性与iOS系统的Safari浏览器一致。

2 css语法

        uni-app 有 vue 页面、nvue 页面、uvue页面。 uni-app 的 css 与 web 的 css 基本一致。

  • vue 页面是 webview 渲染的
  • app-nvue 页面是原生渲染的,其样式比 web 会限制更多
  • app-uvue 页面是原生渲染的,是 web 的css子集

2.1 css预处理器支持

        uni-app 支持less、sass、scss、stylus等预处理器。sass的预处理器,早年使用node-sass,也就是vue2最初默认的编译器。sass官方推出了dart-sass来替代。node-sass已经停维很久了。vue3默认使用的是dart-sass。DCloud推荐开发者尽快升级到vue3,改用dart-sass。

2.2 尺寸单位

   uni-app 支持的通用 css 单位包括 px、rpx

  • px 即屏幕像素
  • rpx 即响应式 px,一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准,750rpx 恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大,但在 App(vue2 不含 nvue) 端和 H5(vue2) 端屏幕宽度达到 960px 时,默认将按照 375px 的屏幕宽度进行计算

        vue 页面支持下面这些普通 H5 单位,但在 nvue 里不支持:

  • rem 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序:屏幕宽度/20、百度小程序:16px、支付宝小程序:50px
  • vh viewpoint height,视窗高度,1vh 等于视窗高度的 1%
  • vw viewpoint width,视窗宽度,1vw 等于视窗宽度的 1%

        nvue 还不支持百分比单位。App 端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px。nvue 中,uni-app 模式可以使用 px 、rpx,表现与 vue 中基本一致,另外启用 dynamicRpx 后可以适配屏幕大小动态变化。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 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
  2. 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
  3. 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为: 750 * 200 / 375,结果为:400rpx。
  • 注意 rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。
  • 如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。
  • rpx 不支持动态横竖屏切换计算,使用 rpx 建议锁定屏幕方向
  • 设计师可以用 iPhone6 作为视觉稿的标准。
  • App 端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。
  • 早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了

2.3 样式导入

        使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

2.4 内联样式

        框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view :style="{color:color}" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />

2.5 选择器

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容,仅 vue 页面生效
::beforeview::before在 view 组件前边插入内容,仅 vue 页面生效
  • 在 uni-app 中不能使用 * 选择器。
  • 微信小程序自定义组件中仅支持 class 选择器
  • page 相当于 body 节点,例如:
<!-- 设置页面背景颜色,使用 scoped 会导致失效 -- >
page {
  background-color: #ccc;
}
  • web端可以使用htmlbody:root等选择器。由于页面的css样式隔离,且html节点并未添加data-xxx属性,html:root写在页面style内无效,只能写在App.vue内。

2.6 全局样式与局部样式

        定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。

  • App.vue 中通过 @import 语句可以导入外联样式,一样作用于每一个页面。
  • nvue 页面暂不支持全局样式

2.7 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 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码

        快速书写 css 变量的方法是:在 css 中敲 hei,在候选助手中即可看到 3 个 css 变量。

        示例 1 - 普通页面使用 css 变量:

<template>
	<!-- HBuilderX 2.6.3+ 新增 page-meta -->
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view>状态栏下的文字</view>
	</view>
</template>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
<template>
	<view>
		<view class="toTop">
			<!-- 这里可以放一个向上箭头,它距离底部tabbar上浮10px-->
		</view>
	</view>
</template>
<style>
	.toTop {
		bottom: calc(var(--window-bottom) + 10px);
	}
</style>

        示例 2 - nvue 页面获取状态栏高度

<template>
	<view class="content">
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			};
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
	};
</script>

2.8 固定值

   uni-app 中以下组件的高度是固定的,不可修改:

组件描述AppH5
NavigationBar导航栏44px44px
TabBar底部选项卡HBuilderX 2.3.4 之前为 56px,2.3.4 起和 H5 调为一致,统一为 50px。(但可以自主更改高度)50px

        各小程序平台,包括同小程序平台的 iOS 和 Android 的高度也不一样。

2.9 Flex 布局

        为支持跨平台,框架建议使用 Flex 布局。

2.10 背景图片

   uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目大体相同,但需要注意以下几点:

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可使用。
  • 使用本地路径背景图片需注意:
    1. 为方便开发者,在背景图片小于 40kb 时,uni-app 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
.test2 {
	background-image: url('~@/static/logo.png');
}
  • 微信小程序不支持相对路径(真机不支持,开发工具支持)

2.11 字体图标

   uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可使用。
  • 网络路径必须加协议头 https
  • 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
  • 从 http://www.iconfont.cn 上下载的字体文件,都是同名字体(字体名都叫 iconfont,安装字体文件时可以看到),在 nvue 内使用时需要注意,此字体名重复可能会显示不正常,可以使用工具修改。
  • 使用本地路径图标字体需注意:
    1. 为方便开发者,在字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式;
    2. 字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

   nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体,请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
	fontFamily: 'fontFamilyName',
	src: "url('https://...')",
});
<template>
	<view>
		<view>
			<text class="test">&#xe600;</text>
			<text class="test">&#xe687;</text>
			<text class="test">&#xe60b;</text>
		</view>
	</view>
</template>
<style>
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
	}
	.test {
		font-family: iconfont;
		margin-left: 20rpx;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2384633.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot的网上租赁系统设计与实现

项目简介 本项目是基于 Spring Boot Vue 技术栈开发的 网上租赁系统。该系统通过前后端分离的架构&#xff0c;提供用户和管理员两种角色的操作权限&#xff0c;方便用户进行商品租赁、订单管理、信息查询等操作&#xff0c;同时也为管理员提供了商品管理、用户管理、订单管理…

AI浪潮下,第五消费时代的商业进化密码

解锁 AI 与第五消费时代 在时代的长河中,消费浪潮的更迭深刻地影响着商业的格局。当下,我们正处于第五消费时代,这个时代有着鲜明的特征,如老龄化、单身化趋势日益显著,社会逐渐步入低欲望、个性化与共享化并行的阶段 。随着人工智能技术的飞速发展,它在商业领域的渗透也…

Jouier 普及组十连测 R4

反思 本次比赛到时没有什么细节错误&#xff0c;不过代码思路不好所以分数也不是很高。 T1 代码思路 看题意&#xff0c;发现数据范围不大&#xff0c;直接动用码力暴力即可。 代码 #include<bits/stdc.h> using namespace std;vector<vector<int> > a(110…

bi平台是什么意思?bi平台具体有什么作用?

目录 一、BI平台是什么意思 1. 具体内涵 2. 主要构成 二、BI 平台具体有什么作用 1. 提供全面的数据洞察 2. 支持快速决策 3. 优化业务流程 4. 提升企业协作 三、BI 平台的应用场景 1. 金融行业 2. 零售行业 3. 制造行业 4. 医疗行业 总结 “每天在海量数据中反复…

Redis从入门到实战 - 原理篇

一、数据结构 1. 动态字符串SDS 我们都知道Redis中保存的key是字符串&#xff0c;value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串&#xff0c;因为C语言字符串存在很多问题&#xff1a; 获取字符串长…

26考研|高等代数:线性变换

前言 线性变换这一章节是考频较高的一部分&#xff0c;此部分涉及考点较多&#xff0c;涉及的考题也较多&#xff0c;学习线性变换时&#xff0c;应该注意搭建线性变换与矩阵之间的联系&#xff0c;掌握如何利用矩阵表示一个线性变换结构&#xff0c;同时介绍了最简单的线性变…

VSCode如何像Pycharm一样“““回车快速生成函数注释文档?如何设置文档的样式?autoDocstring如何设置自定义模板?

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 让VSCode拥有PyCharm级注释生成能力 📒🚀 实现方案🛠️ 备用方案📒 自定义注释文档格式样式 📒🔄 切换主流注释风格✨ 深度自定义模板🛠️ 类型提示与注释联动优化⚓️ 相关链接 ⚓️📖 介绍 📖 用PyCharm写P…

PCIe学习笔记(3)链路初始化和训练

PCIe学习系列往期文章 PCIe学习笔记&#xff08;1&#xff09;Hot-Plug机制 PCIe学习笔记&#xff08;2&#xff09;错误处理和AER/DPC功能 文章目录 链路训练概述Bit LockSymbol Lock (Gen1/2)Block Alignment (Gen3)Lane Polarity InversionLane ReversalLane-to-Lane De-ske…

Oracle 11g导出数据库结构和数据

第一种方法&#xff1a;Plsql 利用plsql可视化工具导出&#xff0c;首先根据步骤导出表结构&#xff1a; 工具(Tools)->导出用户对象(export user objects)。 其次导出数据表结构&#xff1a; 工具(Tools)->导出表(export Tables)->选中表->sql inserts(where语…

零基础设计模式——创建型模式 - 抽象工厂模式

第二部分&#xff1a;创建型模式 - 抽象工厂模式 (Abstract Factory Pattern) 我们已经学习了单例模式&#xff08;保证唯一实例&#xff09;和工厂方法模式&#xff08;延迟创建到子类&#xff09;。现在&#xff0c;我们来探讨创建型模式中更为复杂和强大的一个——抽象工厂…

解锁内心的冲突:神经症冲突的理解与解决之道

目录 一、神经症冲突概述 二、冲突的基本类型 三、未解决冲突的后果 四、尝试解决的途径 五、真正解决冲突 六、总结 干货分享&#xff0c;感谢您的阅读&#xff01; 人类的内心世界复杂多变&#xff0c;常常充满了各种冲突和矛盾。每个人在成长的过程中&#xff0c;都或…

Redisson读写锁和分布式锁的项目实践

解决方案:采用读写锁 什么是读写锁 Redisson读写锁是一种基于Redis实现特殊的机制,用于在分布式系统中协调对共享资源的访问,其继承了Java中的ReentrantReadWriteLock的思想.特别适用于读多写少的场景.其核心是:允许多个线程同时读取共享资源,但写操作必须占用资源.从而保证线…

SkyWalking高频采集泄漏线程导致CPU满载排查思路

SkyWalking高频采集泄漏线程导致CPU满载排查思路 契机 最近在消除线上服务告警&#xff0c;发现Java线上测试服经常CPU满载告警&#xff0c;以前都是重启解决&#xff0c;今天好好研究下&#xff0c;打arthas火焰图发现是SkyWalking-agent的线程采集任务一直在吃cpu&#xff…

【HarmonyOS 5】Map Kit 地图服务之应用内地图加载

#HarmonyOS SDK应用服务&#xff0c;#Map Kit&#xff0c;#应用内地图 目录 前期准备 AGC 平台创建项目并创建APP ID 生成调试证书 生成应用证书 p12 与签名文件 csr 获取 cer 数字证书文件 获取 p7b 证书文件 配置项目签名 配置签名证书指纹 项目开发 配置Client I…

ld: cpu type/subtype in slice (arm64e.old) does not match fat header (arm64e)

ld: cpu type/subtype in slice (arm64e.old) does not match fat header (arm64e) in ‘/Users/*****/MposApp/MposApp/Modules/Common/Mpos/NewLand/MESDK.framework/MESDK’ clang: error: linker command failed with exit code 1 (use -v to see invocation) 报错 解决方…

通过vue-pdf和print-js实现PDF和图片在线预览

npm install vue-pdf npm install print-js <template><div><!-- PDF 预览模态框 --><a-modal:visible"showDialog":footer"null"cancel"handleCancel":width"800":maskClosable"true":keyboard"…

视频监控管理平台EasyCVR结合AI分析技术构建高空抛物智能监控系统,筑牢社区安全防护网

高空抛物严重威胁居民生命安全与公共秩序&#xff0c;传统监管手段存在追责难、威慑弱等问题。本方案基于EasyCVR视频监控与AI视频分析技术&#xff08;智能分析网关&#xff09;&#xff0c;构建高空抛物智能监控系统&#xff0c;实现24小时实时监测、智能识别与精准预警&…

2.2.1 05年T1复习

引言 从现在进去考研英语基础阶段的进阶&#xff0c;主要任务还是05-09年阅读真题的解题&#xff0c;在本阶段需要注意正确率。阅读最后目标&#xff1a;32-34分&#xff0c;也就是每年真题最多错四个。 做题步骤&#xff1a; 1. 预习&#xff1a;读题干并找关键词 做题&#…

Python-11(集合)

与字典类似&#xff0c;集合最大的特点就是唯一性。集合中所有的元素都应该是独一无二的&#xff0c;并且也是无序的。 创建集合 使用花括号 set {"python","Java"} print(type(set)) 使用集合推导式 set {s for s in "python"} print(set…

Opixs: Fluxim推出的全新显示仿真模拟软件

Opixs 是 Fluxim 最新研发的显示仿真模拟软件&#xff0c;旨在应对当今显示技术日益复杂的挑战。通过 Opixs&#xff0c;研究人员和工程师可以在制造前&#xff0c;设计并验证 新的像素架构&#xff0c;从而找出更功节能、色彩表现更优的布局方案。 Opixs 适用于学术研究和工业…