在万物互联的今天，开发者在应用/服务开发过程中，需要考虑应用/服务在不同设备上的运行效果。为满足这一需求，DevEco Studio 作为 HarmonyOS 和 OpenAtom OpenHarmony（简称“OpenHarmony”）应用及服务开发配套的集成开发环境（IDE），提供了强大的预览功能，让开发者能够预览应用/服务在不同终端设备上的 UI 显示效果，不仅支持边开发边预览，还支持在预览过程中进行界面交互。下面，就带大家一起来了解 DevEco Studio 的预览功能。
 

一、多端设备预览

OpenHarmony 作为分布式操作系统，支持运行在不同的终端设备上。为方便开发者查看应用/服务在不同终端设备上的 UI 布局和交互效果，DevEco Studio 提供多端设备预览功能。DevEco Studio 的预览器支持自定义预览设备 Profile（包含分辨率和语言等），通过定义不同的预览设备 Profile，让开发者可以查看应用或服务在不同终端设备上的预览效果。
 
点击预览器右上角的
 

按钮，可以看到所有已定义的预览设备 Profile。通过点击切换不同的预览设备 Profile，可以查看不同终端设备上的预览效果。此外，打开 Multi-profile preview 开关，还可以同时查看多个终端设备上的预览效果。
 
多端设备预览
 

二、双向预览

在应用/服务开发过程中，开发者通常需要一边开发代码，一边查看预览效果。为帮助开发者提升开发效率，DevEco Studio 提供双向预览功能，支持代码编辑器、预览器UI界面和组件树（Component tree）三者之间的联动。
 
● 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。这样，通过预览器的 UI 界面即可快速地定位到相应代码，让代码修改更加便利。
 
● 选中布局文件中的代码块，则在 UI 界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。这样，通过选中代码块就能精准地查看对应的界面组件的预览效果，让预览更加精准、高效。
 
● 选中组件树中的组件，则对应的代码块和 UI 界面也会高亮显示。此外，如果修改了组件树中某一组件的属性，代码编辑器中对应的代码也会同步修改。
 
 

三、实时预览

为了让开发者可以在应用/服务开发时快速查看预览效果，DevEco Studio 提供实时预览功能。开发者添加或删除 UI 组件、并且使用快捷键 Ctrl+S 进行保存后，预览器会立即刷新预览结果。如果只是简单地修改了某个组件的属性，且在这个组件没有绑定变量的情况下，预览器会亚秒级同步刷新预览结果，且不会丢失页面当前状态，达到极速预览的效果。（当前，暂时只有 eTS 组件支持此极速预览功能。）
 

四、动态预览

动态交互也是应用/服务开发过程中非常重要的一个环节。为此，DevEco Studio 提供动态预览功能，支持开发者在预览器的 UI 界面中进行交互操作，比如点击、跳转、滑动交互等，操作体验与在真机设备上的交互体验一致。
 

至此，DevEco Studio 的预览功能就介绍完了。需要注意的是，在使用 DevEco Studio 的预览器前，需确保 Settings > OpenHarmony SDK > Tools 中已安装 Previewer 资源，同时建议 Settings > OpenHarmony SDK > Platforms 中的 JS SDK 更新到最新版本。
 
想要更多了解和体验DevEco Studio
欢迎获取工具和工具使用指南
 
在体验过程中，如果遇到问题
欢迎通过华为开发者论坛发帖反馈给我们
 

DevEco Studio的这些预览能力你都知道吗？的更多相关文章

  1. PHP专业开发IDE——Zend Studio 10.5预览版发布

    Zend Studio是新一代的PHP IDE,高效的开发和维护PHP代码是它的核心.Zend公司目前已发布了Zend Studio 10.5预览版,预览版中提高了快速响应能力和时时误差检查.因此使用 ...

  2. 微软发布Visual Studio Online公共预览版和ML.NET 1.4

    在今天的Ignite 2019上,Microsoft启动了 Visual Studio Online 公共预览版.Visual Studio Online将Visual Studio,云托管的开发人员 ...

  3. Visual Studio 2015年预览设置： 辅助安装程序说明

    本文介绍了第三方应用程序安装辅助安装的 Visual Studio 2015年预览时安装的说明.如果您安装了多设备开发功能,您需要使用其他第三方软件来处理这些项目.辅助安装程序允许您将部署到您的计算机 ...

  4. 【译】Visual Studio 15 预览版更新说明

    序:恰逢Build2016大会召开,微软发布了VS2015的update2更新包和VS2016预览版.本人正在提升英文水平中,于是在这里对VS2016预览版的官方文档进行了部分翻译.因为VS有些功能使 ...

  5. Xamarin XAML语言教程Visual Studio中实现XAML预览

    Xamarin XAML语言教程Visual Studio中实现XAML预览 每次通过编译运行的方式查看XAML文件效果,需要花费大量的时间.如果开发者使用XAML对UI进行布局和设计,可以通过预览的 ...

  6. Mac版Visual Studio预览版

    来了,Mac版Visual Studio预览版开放下载 投递人 itwriter 发布于 2016-11-17 12:11 评论(7) 有1317人阅读 原文链接 [收藏] « » 微软前俩天宣布,推 ...

  7. 在Visual Studio 2019中开启预览功能

    在Visual Studio 2019 菜单 [工具] > [选项] > [环境] 下的预览功能页面焕然一新!我们介绍了预览功能页面,以便您可以轻松找到这些功能并能够控制其启用.新布局提供 ...

  8. HarmonyOS 3.0.0开发者预览版全新发布

    2021年10月22日在华为开发者大会HDC.Together 2021 主题演讲上,我们发布了HarmonyOS 3.0.0开发者预览版,主要内容包括:Harmony设计系统.ArkUI 3.0.A ...

  9. .NET 6 预览版 7：新功能已完成 ，将专注于改进

    .NET 团队的项目经理 Richard Lander在宣布 .NET 6 Preview 7 时说:"这是 .NET 预览的又一季的结束.", 中文翻译:.NET 6 预览版 7 ...

  10. C#开发微信门户及应用(30)--消息的群发处理和预览功能

    在很多场合下,我们可能需要利用微信公众号的优势,定期给指定用户群发送一些推广消息或者新闻内容,以便给关注客户一种经常更新公众号内容的感觉,同时也方便我们经常和用户进行互动.微信公众号的高级群发接口就是 ...

随机推荐

  1. 面向对象之封装，类的相关操作，私有成员删除，构造方法__init__---day20

    1.面向对象之封装 # ### 面向对象oop -封装 """ 类中封装: 成员属性 成员方法 封装等级: 1.公有:公有成员既能够在类外调用,也可在类内调用 2.私有: ...

  2. Windows Docker Destop修改默认镜像文件位置

    0.首先关闭docker destop. 1.通过Everything或者资源管理器找到以.vhdx结尾的文件所在的位置,这些就是docker镜像路径 2.我的路径:C:\Users\Administ ...

  3. CUDA、CUDNN 安装

    安装 CUDA.CUDNN 1. CUDA CUDA 是 NVIDIA 发明的一种并行计算平台和编程模型.它通过利用图形处理器 (GPU) 的处理能力,可大幅提升计算性能. 官方地址 https:// ...

  4. Unity3D之OnTriggerEnter和OnCollisionEnter

    OnCollisionEnter方法要求碰撞的发起方必须拥有刚体,而被碰撞方有没有刚体并不重要; OnTriggerEnter方法则对此没有要求,只需要碰撞双方有一个具有刚体即可触发,当有物体勾选is ...

  5. 【Azure Developer】Python 读取 json文件及过滤出需要的结果

    问题描述 首先,有名为 campsites.json 的JSON数据文件,数据格式为 { "type": "FeatureCollection", " ...

  6. Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

    Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能.然而, ...

  7. Mac根目录下无法创建文件或目录

    无法创建目录 最近小伙伴经常反馈Mac根目录下创建文件或目录一直失败,并且尝试了各种姿势. 常见错误如下: # 常见错误1, 直接创建目录 mkdir -p /test mkdir: /data: R ...

  8. [.Net]使用Soa库+Abp搭建微服务项目框架（二）：面向服务体系的介绍

    ​ 上一章我们建立了一个典型的面向领域设计的Abp小项目,如果按照常规的开发方式,会遇到什么问题呢? 先来完善一下这个小项目,在定义好各实体类后,运行Miguration并向数据库里写入一些初始数据. ...

  9. 基于六轴传感器MPU6050的物体移动监测报警系统

    一 系统简介 1.简介 MPU-60x0 是全球首例 9 轴运动处理传感器.它集成了 3 轴MEMS陀螺仪,3 轴MEMS加速度计,以及一个可扩展的数字运动处理器 DMP(Digital Motion ...

  10. 已安装docker-compose，安装harbor时还是提示docker-compose未安装或者Permission denied的解决方案

    安装Harbor时,下载安装了docker-compose并赋予权限 sudo curl -L "https://github.com/docker/compose/releases/dow ...