在万物互联的今天，开发者在应用/服务开发过程中，需要考虑应用/服务在不同设备上的运行效果。为满足这一需求，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. 【LeetCode贪心#07】分糖果（两个维度）

    发糖果 力扣题目链接(opens new window) 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖 ...

  2. 【LeetCode栈与队列#04】逆波兰表达式求值（仍然是经典的栈操作）

    逆波兰表达式求值 力扣题目链接(opens new window) 根据 逆波兰表示法,求表达式的值. 有效的运算符包括 + , - , * , / .每个运算对象可以是整数,也可以是另一个逆波兰表达 ...

  3. 【LeetCode链表#8】翻转链表（双指针+递归）/K个一组翻转

    翻转链表 力扣题目链接(opens new window) 题意:反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4-> ...

  4. 【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像，如何配置监听端口呢？

    问题描述 根据以下DockerFile文件,创建了一个ASP.NET Core的 helloworld 镜像,通过监听3721端口来接受请求. # 1. 指定编译和发布应用的镜像 FROM mcr.m ...

  5. Java this关键字使用 详解+ 证明

    1 package com.bytezero.thistest; 2 /** 3 * 4 * @Description 5 * @author Bytezero·zhenglei! Email:420 ...

  6. kafka的消费

    1.消费方式 consumer 采用 pull(拉) 模式从 broker 中读取数据. push(推)模式很难适应消费速率不同的消费者,因为消息发送速率是由 broker 决定的. 它的目标是尽可能 ...

  7. 14 CodeTON Round 5 (Div. 1 + Div. 2, Rated, Prizes!)C. Tenzing and Balls（dp+前缀最大值优化）

    思路: dp还是挺明显的,思路可以参考最长上升子序列 有点dp的感觉 \(f[i]\)表示考虑前\(i\)个数,的最大值 当前数有两种删或不删 不删:\(f[i]=f[i-1]\); 删:\(f[i] ...

  8. Java-Script 编程

    Java-Script 编程 目录 Java-Script 编程 一. Js概念 1.1 简介 1.2 语法结构 二. 变量使用 2.1 定义变量 2.2 定义常量 三. 数据类型 3.1 数值类型( ...

  9. 记spring boot启动出现Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.问题处理

    今天拉下了一个新的springboot工程,启动时出现了Unable to start web server; nested exception is org.springframework.cont ...

  10. 协议I2C

    SCL   SDA   同步,半双工 开漏+弱上拉,谁用这跟线,就下拉成低电平 想输出,去拉杆子或放手,操作杆子变化 想输入,直接放手,看电平高低就行 线与,一个低电平,全部低电平,可以利用这个执行多 ...