鸿蒙4.0开发 - DevEco Studio如何使用Previewer窗口预览器报错

已于 2023-12-12 14:35:25 修改
阅读量2.8k 收藏 12
点赞数 6
分类专栏： 鸿蒙 文章标签： harmonyos 笔记 华为
于 2023-12-12 10:12:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSY_1992/article/details/134941317
版权

DevEco Studio预览器概况在HarmonyOS应用开发过程中，通过使用预览器，可以查看应用的UI效果，方便开发者实时查看应用的运行效果，随时调整代码。

1.正常启动
打开预览器的位置在DevEco Studio编辑界面的右上角部分，竖排文字的第二个选项卡则是Previewer，点击加载即可进入预览器，如下图：
在这里插入图片描述
打开报错：
在这里插入图片描述

Cannot preview this file. Previews are available for files in .ets, .js, .css, .hml, or .visual format, .json files of service widgets, layout.xml, AbilitySlice.java, and Ability.java.

原因是没有选中相应的.ets文件。在鸿蒙4.0中，只有.ets布局文件才能打开Previewer，查看相应的UI界面。我的解决方法当然就是双击选中StackSample.ets文件，再点击Previewer，则成功加载。

在这里插入图片描述

在这里插入图片描述

爱勤海之旅
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
fcc-markdown-previewer：Markdown预览器是作为freeCodeCamp的前端库认证的一部分而创建的
02-13
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel
基于DevEco Studio平台的HarmonyOS-JS围棋棋盘
10-29
1、有基本的布局、画布等 2、有按钮跳转等功能 3、使用画图工具画了围棋棋盘以及几颗棋子（算是定式） 4、app的base_media图片换为了原神刻晴（可用windows自带的画图来调整尺寸大小），跳转界面也是刻晴
DevEco Studio开发工具无法预览的问题处理
qq3892997的博客
09-07 3241
1. 首先打开 "SDK管理"
Cannot preview this file. Previews are available for files in .ets, .js, .css, .hml, or .visual form
最新发布
qq_36164225的博客
02-27 681
报错：Cannot preview this file. Previews are available for files in .ets, .js, .css, .hml, or .visual format, .json files of service widgets, layout.xml, AbilitySlice.java, and Ability.java.选择对应的ets文件，再点击Previewer，显示UI界面。
sg-3d-previewer:Shotgun 3D预览器
04-02
Shotgun 3D预览器 建立项目 设置基本URL 在src/env.js ，有Shotgun URL的声明。 const baseUrl = '<shotgun>' 凭证设定 要访问Shotgun，您必须将凭据信息设置为src/env.js 基本访问使用授权类型为client_credentials Shotgun脚本/ API密钥信息。 但是，还有其他授权类型可以使用REST API进行访问。 该文件在。 授予类型： client_credentials 'use strict' const credentialParams = { 'client_id' : '[removed]' , 'client_secret' : '<api>' , 'grant_type' : 'client_credentials' } modu
预览器组件为DevEcoStudio预览器提供了启动ArkUI渲染引擎的能力使预览器能够通过命名管道通信方式发送命令给预览器组件
01-10
预览器组件为DevEco Studio预览器提供了启动ArkUI渲染引擎的能力，使预览器能够通过命名管道的通信方式发送命令给预览器组件，操控ArkUI渲染引擎做到实时渲染，并将处理好的图片发送到DevEco Studio预览器中展示。预览器组件支持在Windows、MacOS上运行ArkTS及JS应用。
鸿蒙4.0开发笔记之DevEco Studio如何使用Previewer窗口预览器（一）
热门推荐
Viewinfinitely的博客
11-17 1万+
当开启预览器时，系统默认设置是打开实时更新的，若要关闭，则可以点击红色箭头指向的图标，然后就会变成下面的状态，该状态下更改左侧代码不会实时更新Previewer中的UI界面。DevEco Studio预览器概况在HarmonyOS应用开发过程中，通过使用预览器，可以查看应用的UI效果，方便开发者实时查看应用的运行效果，随时调整代码。进入之后便可以看到折叠屏、手机、平板等设备，同时可以点击右上角的小开关，打开之后就可以把列表中的所有设备都呈现UI展示。（2）选定某个UI组件，在代码中寻找到相对应的代码块；
Cannot preview in this file - active scheme does not build this file SwiftUI无法预览
Winters_huang'Blog
08-23 2782
原因： Scheme 未同步导致UI编译延迟 解决： Select the Scheme that has the current file to Preview （重新选择Scheme，等待编译即可）
2021-08-10 HDFS Web报错Couldn‘t preview the file.
学习是一种信仰的博客
08-10 7086
在查看文件内容时，在红框位置出现报错“Couldn’t preview the file” 解决方法 修改hdfs-site.xml，添加配置信息 <property> <name>dfs.webhdfs.enabled</name> <value>true</value> </property> 配置浏览器所在系统的 hosts 文件 windows： 在 C:\Windows\System32\driver
HDFS报错：Couldn‘t preview the file.
m0_67656269的博客
01-05 2893
解决hdfs的web界面不能能查看文件内容问题
vscode-svg-previewer：Vscode SVG预览器
02-17
SVG预览器 仅预览（而不是代码编辑器） 如果您想默认查看SVG预览而不是源代码。 如何设置？ 打开任何SVG图像 执行命令“视图：使用...重新打开编辑器”（通过命令面板） 选择“图像查看器”并将其设置为默认值 命令： 命令 描述 SVG：打开预览 将预览打开到活动视图列 SVG：打开侧面预览 打开预览到侧视图列 SVG：显示源 活动预览的开源文件 设定： 财产 描述 默认 svg.preview.autoOpen 自动在侧面打开预览 错误的 键盘快捷键： 命令 键绑定 SVG：打开预览 Ctrl + Shift + V SVG：打开侧面预览 Ctrl + KV
vector-drawable-previewer:在Chrome上预览VectorDrawable文件
05-02
VectorDrawable预览器 这是一个Chrome扩展程序，用于预览可绘制的矢量。 您可以在GitHub或本地上检查矢量可绘制文件。 请注意，此扩展自v1.2.0起需要后台脚本 这是如何工作的 显示基于矢量可绘制文本的SVG元素 background script监视URL的更改， content script呈现SVG元素。 发展 yarn install yarn watch 然后，从chrome://extensions加载dist/ 。 注意： src/js是源目录。 规格 局限性 VectorDrawable Previewer不支持以下功能 动画矢量可绘制 android资源参考 附录 执照 在。
markdown-previewer:降价预览器
03-18
降价预览器 该项目是通过引导的。 基于freeCodeCamp的和构建。 在上实时观看 第一次加载时，编辑器将填充标题（H1大小），子标题（H2大小），链接，内联代码，代码块，列表项，blockquote，图像和粗体文本的表示。 用户可以在编辑器字段中输入GitHub风格的markdown，并在预览器字段中将其呈现为HTML。 两个字段都可以最大化
fcc-markdown-previewer：使用React构建的Markdown预览器PWA
02-10
实时降价预览器使用和构建的实时Markdown预览器。 该界面是简约的（ <textarea> <output> <textarea>旁边的<textarea> ），但可在移动设备和台式机上使用。 作为 一部分创建的。 查看实时应用！...
react-markdown-previewer:Markdown预览器（React）
05-15
ReactMarkdown预览器 基于React库安装克隆存储库git clone https://github.com/Verthon/react-lorem-generator.git 通过npm install 运行react dev服务器npm start 我能够在gh-pages上发布它： 来源： ...
fcc-fel-markdown-previewer：构建Markdown预览器-freeCodeCamp前端库项目
02-09
可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试运行程序...
url-previewer-website:网址预览器的新网站
05-07
可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试...
vega-previewer:使用 websockets 实时预览和重新加载 Vega 图表
06-11
预览器使用 websockets 实时接收文件更改。 websockets 服务器由 Ruby 提供支持。 一个简短的演示可以在这里看到： : 。 要求 Ruby 2.0 或更新版本 支持 ECMAScript 6 和 websockets 的浏览器 用于编辑 JSON 文件...
vue使用vue-directive-image-previewer实现点击图片放大后没有显示在最上层
06-09
这个问题可能是因为图片放大后的层级没有设置为最高导致的，可以尝试在 CSS 中为放大后的图片添加 z-index 属性，将其层级设置为最高。例如： ``` .vdip-image-preview-container { z-index: 9999; } ``` 这样就可以保证放大后的图片显示在最上层了。另外，也可以尝试调整图片放大后的位置，避免被其他元素遮挡。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值