示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载view 是 uni-app x 中最基本的视图容器组件作用类似于 HTML 中的div标签用于承载页面布局与嵌套任意子组件。本篇以官方组件文档 docs/component/view.md 为主体结合仓库内 DOM 文档与示例工程系统讲解 view 的组件类型、hover 系列属性、跨端兼容差异以及通过 UniElement 获取 AndroidViewGroup/ iOSUIView原生对象的方法帮助你完整掌握 view 在 uni-app x 各端Web、微信小程序、Android、iOS、HarmonyOS下的正确用法。view 是什么view 组件是 uni-app x 最基本的视图容器组件类型为UniViewElement。它的作用类似于 HTML 中的div标签主要承担页面结构化布局职责作为布局容器承载文本、图片、按钮、列表等其他组件支持任意嵌套即“子组件”一栏所声明的“支持所有组件”作为可绘制区域支持直接在 view 上调用绘制 API 自绘内容见下文 DrawableContext 章节。在 uni-app x 的 UVUE 页面中view 是使用频率最高的组件之一几乎所有页面结构都由 view 层层组合而成。由于 App 平台采用原生渲染view 在 Android 上对应ViewGroup、在 iOS 上对应UIView这也为后续“获取原生 view 对象”提供了基础。跨端兼容性view 及其 hover 系列属性在各平台的最低支持版本如下对应 docs/component/view.md 兼容性表| Web | 微信小程序 | Android | iOS | HarmonyOS | | :- | :- | :- | :- | :- | | 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |其中flatten组件拍平属性仅在蒸汽模式Vapor下可用兼容性差异较大| 平台 | 兼容性 | | :- | :- | | Web | x | | 微信小程序 | x | | Android(VDOM) | x | | Android(Vapor) | 5.21 | | iOS(VDOM) | x | | iOS(Vapor) | 5.11 | | HarmonyOS(VDOM) | x | | HarmonyOS(Vapor) | 5.0 |也就是说flatten只在 Android / iOS / HarmonyOS 的 Vapor蒸汽渲染模式中生效VDOM 模式与 Web、小程序平台暂不支持。属性详解view 组件的完整属性如下摘自 docs/component/view.md 属性表| 名称 | 类型 | 默认值 | 描述 | | :- | :- | :- | :- | | hover-class | string(string.ClassString) | none | 指定按下去的样式类。当 hover-classnone 时没有点击态效果 | | hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态祖先节点指根节点到该节点路径上的所有节点 | | hover-start-time | number | 50 | 按住后多久出现点击态单位毫秒 | | hover-stay-time | number | 400 | 手指松开后点击态保留时间单位毫秒 | | flatten | boolean | false | 是否拍平组件仅 Vapor 模式支持见上文兼容性表 |hover-class点击态样式类 hover-classhover-class用于指定按下状态时应用在 view 上的样式类。当值为none时表示不启用点击态效果。典型用法view idview classmain :hover-classdata.hover_class ? is-parent-hover : none view idview-child1 classtest-view :hover-classdata.hover_class ? is-hover : none :hover-stop-propagationdata.stop_propagation :hover-start-timedata.start_time :hover-stay-timedata.stay_time /view /view对应的点击态样式类示例来自官方示例工程的 style 部分.test-view { height: 200px; width: 200px; background-color: var(--list-background-color,#ffffff); } .is-hover { background-color: #179b16; } .is-parent-hover { background-color: #aa0000; }为什么官方推荐使用 hover-class 而不是 CSS 的:active伪类文档明确解释了原因使用 CSS:active伪类实现点击态很容易触发并且滚动或滑动时点击态不会消失体验较差。各小程序平台均给 view 引入了hover-class考虑到跨端兼容和体验建议使用hover-class属性来实现点击态效果并且 App 平台目前暂不支持 CSS 伪类。因此hover-class是 uni-app x 中实现按下反馈的标准方案。hover-stop-propagation阻止点击态冒泡hover-stop-propagation默认值为false。当设置为true时本节点出现点击态后将阻止其祖先节点从根节点到该节点路径上的所有节点同样出现点击态。适合在“点击子 view 不希望父容器也高亮”的交互场景中使用。hover-start-time 与 hover-stay-time点击态的节奏控制hover-start-time按住后多久出现点击态默认50毫秒。设置该值可以避免手指轻微触碰就立刻高亮hover-stay-time手指松开后点击态保留时间默认400毫秒。适当延长可以让点击反馈更平滑、不闪烁。官方示例工程中用枚举数据演示了这两个参数的动态切换start_time_enum: [{ value: 50, name: 50毫秒 }, { value: 200, name: 200毫秒 }], stay_time_enum: [{ value: 400, name: 400毫秒 }, { value: 200, name: 200毫秒 }]flatten组件拍平 flattenflatten是否拍平组件默认false仅在 Vapor 蒸汽渲染模式下的 Android5.21、iOS5.11、HarmonyOS5.0可用。开启后组件会被“拍平”为轻量渲染节点减少视图层级嵌套常用于列表等对渲染性能敏感的场景。示例中可以看到两种写法view classstyled-view text classdemo-text普通view/text /view view classstyled-view flatten text classdemo-text flatten拍平view/text /view以及给自定义组件传入 flattenchild/child child flatten/childApp 平台的 hover 行为差异 app文档特别说明了 App 端 hover-class 在不同 HBuilder 版本下的行为差异HBuilder 4.0 以下版本App 端与微信小程序效果一样手指按下进入hover-class状态后手指移动就会取消hover-class状态HBuilder 4.0 及以上版本App 端调整为手指在 view 范围内移动不会取消hover-class状态只有手指移动到 view 范围之外才会取消点击态。该差异意味着同一套代码在 App 与小程序上手指在按下后轻微滑动时的点击态表现可能不同多端联调时需留意。获取原生 view 对象 nativeview为增强 uni-app x 组件的开放性从HBuilderX 4.25起UniElement 对象提供了getAndroidView和getIOSView方法详见 docs/api/dom/unielement.md 中 getAndroidView 与 getIOSView 两个章节。这两个方法可以获取到 view 组件对应的原生对象——Android 的ViewGroup对象、iOS 的UIView对象进而调用原生对象提供的方法极大扩展了组件的能力边界。Android 平台获取 ViewGroup通过 view 组件定义的id属性值用uni.getElementById(id)获取 view 标签的 UniElement 对象再通过getAndroidViewViewGroup()泛型获取底层原生对象//导入安卓原生ViewGroup对象 import ViewGroup from android.view.ViewGroup //通过view组件定义的id属性值获取view标签的UniElement对象 const viewElement uni.getElementById(id) //UniElement.getAndroidView设置泛型为安卓底层ViewGroup对象, 直接获取ViewGroup 如果泛型不匹配会返回null if(viewElement ! null) { //viewGroup就是view组件对应的原生view对象 const viewGroup viewElement.getAndroidViewViewGroup() if(viewGroup ! null) { // viewGroup.xx 即可使用ViewGroup的方法 } }注意getAndroidView方法需要在uts 插件中使用App 端 UVUE 页面运行在 JS 环境中无法直接处理原生类型。本仓库 src/uni_modules/uts-get-native-view 即提供了该能力的完整示例插件实现。iOS 平台获取 UIViewiOS 侧同样先获取 UniElement 对象再调用getIOSView()获取原生 view并通过instanceof判断类型//通过 view 组件定义的 id 属性值获取 view 标签的 UniElement 对象 const viewElement uni.getElementById(id) //获取原生 view const view viewElement?.getIOSView(); if (view ! null view instanceof UIView) { // view.xx 即可使用UIView的方法 }注意getIOSView方法同样需要在 uts 插件中使用。获取原生 view 的注意事项鸿蒙平台蒸汽模式下无法获取到原生 view 对象设置flatten属性后无法获取原生 view 对象安卓平台页面渲染时元素才会构建 View元素刚创建时获取 View 大概率是null推荐在页面onReady时获取见 docs/api/dom/unielement.md 中 getAndroidView 的注意事项安卓平台获取的原生 View 应尽量避免设置 background 属性否则可能导致元素 background、border、box-shadow 等 CSS 效果失效或 background 不生效。子组件 children-tagsview 支持所有组件作为子组件即任意组件都可以直接嵌套在 view 内部。这意味着 view 可以作为最外层页面容器也可以作为任意层级的布局包装器与 HTML 中 div 的定位完全一致。完整示例官方示例与 HBuilderX Alpha 版同步的 hello uni-app x 示例工程pages/component/view/view.uvue完整演示了 view 的样式集合、flatten 拍平、Hover 点击态参数控制等能力可直接参考template page-head titleview/page-head scroll-view classuni-theme-root styleflex: 1 view classuni-padding-wrap uni-common-mt !-- view样式大合集 -- text classuni-title-textview样式大合集/text view classstyled-view-row view classstyled-view text classdemo-text普通view/text /view view classstyled-view flatten text classdemo-text flatten拍平view/text /view /view text classuni-title-text自定义组件右边拍平/text view classstyled-view-row child/child child flatten/child /view text classuni-title-text uni-common-mtHover 点击态效果/text view idview classmain :hover-classdata.hover_class ? is-parent-hover : none view idview-child1 classtest-view :hover-classdata.hover_class ? is-hover : none :hover-stop-propagationdata.stop_propagation :hover-start-timedata.start_time :hover-stay-timedata.stay_time /view /view view classcontent boolean-data :defaultValuefalse title是否指定按下去的样式类 changechange_hover_class_boolean/boolean-data boolean-data :defaultValuefalse title是否阻止本节点的祖先节点出现点击态 changechange_stop_propagation_boolean/boolean-data enum-data :itemsdata.start_time_enum title按住后多久出现点击态 changeradio_change_start_time_enum/enum-data enum-data :itemsdata.stay_time_enum title手指松开后点击态保留时间 changeradio_change_stay_time_enum/enum-data /view /view /scroll-view /template script setup languts import { ItemType } from /components/enum-data/enum-data-types import Child from ./child.uvue type DataType { hover_class: boolean; stop_propagation: boolean; start_time: number; stay_time: number; start_time_enum: ItemType[]; stay_time_enum: ItemType[]; } // 使用reactive解决ref数据在自动化测试中无法访问 const data reactive({ hover_class: false, stop_propagation: false, start_time: 50, stay_time: 400, start_time_enum: [{ value: 50, name: 50毫秒 }, { value: 200, name: 200毫秒 }], stay_time_enum: [{ value: 400, name: 400毫秒 }, { value: 200, name: 200毫秒 }] } as DataType) const change_hover_class_boolean (checked: boolean) { data.hover_class checked } const change_stop_propagation_boolean (checked: boolean) { data.stop_propagation checked } const radio_change_start_time_enum (time: number) { data.start_time time } const radio_change_stay_time_enum (time: number) { data.stay_time time } defineExpose({ data }) /script style .styled-view-row { flex-direction: row; background-color: var(--list-background-color, #ffffff); justify-content: space-around; height: 120px; align-items: center; } /* view样式大合集 */ .styled-view { width: 80px; height: 80px; margin: 5px; padding: 5px; border: 2px solid #007aff; border-radius: 8px; background-color: #f0f8ff; box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0.95; position: relative; transform: rotate(45deg); } .demo-text { font-size: 12px; color: #007aff; font-weight: 500; } .main { padding: 5px 0; flex-direction: row; justify-content: center; } .test-view { height: 200px; width: 200px; background-color: var(--list-background-color,#ffffff); } .is-hover { background-color: #179b16; } .is-parent-hover { background-color: #aa0000; } /style该示例包含几个值得注意的实践细节脚本使用reactive而非ref承载数据注释说明是为了让自动化测试可以访问数据defineExpose({ data })将data暴露给测试与外部访问对应 docs/vue/advanced-api.md 中 defineExpose 的用法通过:hover-classdata.hover_class ? is-parent-hover : none实现“启用/关闭点击态”的动态切换验证了 hover-class 为none时不产生点击态的设计条件编译!-- #ifdef VUE3-VAPOR !MP-ALIPAY --用于仅在 Vapor 渲染且非支付宝小程序平台显示“组件性能测试”入口。在 view 上直接自绘DrawableContextview 是 Drawable 的组件也就是说可以在 view 上调用绘制 API 自绘内容。它类似 canvas但不需要单独的 canvas 组件在 view 上就可以直接 draw详见 docs/api/dom/drawablecontext.md 的 DrawableContext 章节。从 DrawableContext 的文档兼容性表可见该能力仅 App 端支持| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | | :- | :- | :- | :- | :- | :- | :- | :- | | x | x | 3.9 | x | 4.11 | x | 4.61 | x |DrawableContext 提供beginPath、fill、stroke等路径绘制方法以及font、fillStyle、strokeStyle、lineWidth、lineCap、lineJoin、lineDashOffset、textAlign等绘制属性如fillStyle默认#000黑色、lineWidth默认1px、textAlign默认left等。这使 view 可以充当轻量自绘区域在没有 canvas 组件的场景下直接完成图形、文本等内容的绘制。总结与延伸阅读view 是 uni-app x 布局体系的地基作为基本视图容器支持任意嵌套hover-class系列属性提供了跨端一致、体验良好的点击态方案App 端不支持 CSS 伪类故官方推荐优先使用flatten拍平属性可在 Vapor 模式下降低渲染层级HBuilderX 4.25 起可通过 UniElement 的getAndroidView/getIOSView拿到原生对象扩展能力同时它还是支持直接自绘的 Drawable 组件。进一步深入学习可查阅本仓库中的相关文档UniElement 完整属性与方法含 getAndroidView / getIOSView 的兼容性、注意事项与更多代码示例DrawableContext 自绘 APIview 上直接绘制图形与文本get-element-by-iduni.getElementById的用法与限制uts-get-native-view 示例插件获取原生 view 的完整 UTS 插件实现可结合 UTS 插件开发 文档使用data-type 中的 string.ClassStringhover-class 类型说明组件公共属性与事件view 与其他组件共用的属性、事件约定。赞分享示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载相关推荐uni-app x UniNativeViewElement 完全指南通过 native-view 绑定 Android / iOS / HarmonyOS 原生视图uni app x UniNativeViewElement 完全指南通过 native view 绑定 Android / iOS / HarmonyOS示例工程前端移动开发跨平台uni-app x 可拖拽视图容器 movable-view 完全指南属性、事件与实战示例uni app x 可拖拽视图容器 movable view 完全指南属性、事件与实战示例 movable view 是 uni app x 提供的可移动视图示例工程前端移动开发跨平台Taro H5 View 组件taro-view-core全面解析hover 点击态与 longpress 长按事件的实现原理Taro H5 View 组件taro view core全面解析hover 点击态与 longpress 长按事件的实现原理 本文以 Taro 仓库中前端跨平台小程序移动开发开发工具上一篇CAMEL开发实践从安装部署到自定义智能体开发下一篇Coturn部署指南从源码编译到Docker容器化部署创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考