快应用开发工具 5.0 版本发布

快应用开发工具 Sep 23, 2021

快应用工具开发团队,于 2021 年 9 月 22 日,发布 IDE 最新版本:v5.0.0

v5.0 更新说明

在 9 月即将结束之际,快应用开发团队,将之前遗留的一些未解决问题,做了处理和优化,推出最新 v5.0.0 版本;下面请允许跟大家分享下,在此次迭代,我们做了一些重要改进。

优化更新

依赖分析插件

快应用 IDE 提供代码静态依赖分析插件,旨在方便开发者查看代码文件构成和依赖关系,以优化代码包大小和内容(优化资源尺寸、剔除重复构建等,具体操作可参见文章 ── 如何优化「快应用」rpk 包体积?),从而促进应用程序运行更迅速。

注意: 需要先安装插件 hap-bundle-analyzer,请在插件市场安装。

安装完成之后,可通过侧边栏「快捷入口」「依赖分析」或者 ctrl + shift + p 输入 quickapp analyzer 使用该功能。

  • 资源依赖分析

    给予用户直观的显示打包后的资源文件的路径列表及其大小,方便用户优化资源文件的体积:

    • 资源文件大小超过 120 KB,可能导致包的体积过大,可优化。

    • 资源文件大小在 50 KB120 KB之间。

    • 资源文件大小小于 50 KB

    快应用 IDE 依赖分析插件

  • 重复引用分析

    该功能用于统计在打包之后,各个文件的被引用次数。只展示大于等于两次的引用,您可根据被引用的次数和大小,来优化代码,以减小 rpk 体积,您可点击「页面引用详情」下的「查看引用路径」来查看该文件被页面引用的详细路径。

    快应用 IDE 依赖分析插件

  • 依赖分析

    该功能用于统计在打包之后,各个文件的依赖关系。根节点为各个页面的路径,子节点为页面导入的组件或者是文件路径,显示的文件大小为原始没有经过 minify 处理的文件大小。

    快应用 IDE 依赖分析插件

Web 拉起快应用插件

快应用 IDE 提供此插件,旨在方便开发者「测试基于网页拉起快应用」(deeplink 方式)。此插件会开启一个本地服务,您可用手机,扫描如下二维码,即可在手机端打开该服务页面;根据提示操作,您即可测试,网页能否拉起您正在开发的快应用(如果您的快应用,还未上线,请提前在手机端安装该快应用)。

快应用 IDE - Web 拉起快应用插件

模版新建弹框填入项,给出默认

增加在新建模板的时候,自动填入信息:其中项目名称 quickapp-code-${ num + 1 }

快应用 IDE

内存快照命令

为方便排查内存问题,增加内存快照命令。

  • 调起命令输入框:cmd + shift + p (Mac),ctrl + shift + p (Windows);
  • 命令:
    • hap: take all heap snapshot 生成所有 heap snapshot;
    • hap: take extension heap snapshot 生成插件进程的 heap snapshot;
    • hap: take workbench heap snapshot 生成主进程和渲染进程的 heap snapshot;

会在用户目录下生成快照。
windows 用户目录:${user}\AppData\Roaming\快应用开发工具\heapsnapshot
mac 用户目录:~/Library/Application Support/快应用开发工具/heapsnapshot

代码自动补全

增加了 style 部分,class 和 id 的补全。

如下图, template 中的 class 有 wrapper、title、content, 在 style 部分,输入 . 会提示这些 class。

快应用 IDE - 代码自动补全

优化「远程预览」请求中的动画和提示

快应用 IDE - 优化「远程预览」请求中的动画和提示

丰富插件

为丰富插件市场,收集了一些能够方便开发者开发的插件,具体如下:

  • Bracket Pair Colorizer:允许使用颜色标识匹配的括号。用户可以定义要匹配的字符以及要使用的颜色。
  • Auto Rename Tag:自动重命名配对的 HTML/XML 标签。
  • Tabnine:人工智能代码助手,自动完成、AI 辅助代码补全、AI 驱动代码补全、AI 代码片段、代码建议、代码预测、代码提示或内容辅助。
  • Todo Tree:快速搜索(使用ripgrep)您的工作区以查找TODO 和 FIXME 等注释标签,并将它们显示在资源管理器窗格的树视图中。单击树中的 TODO 将打开文件并将光标放在包含 TODO 的行上。
  • open in browser:在浏览器中快速打开当前文件。
  • Better Comments:帮助您在代码中创建更人性化的注释。
  • Github viscose theme:GitHub 的 VS Code 主题。
  • Footsteps:在代码的不同部分之间跳转时保持你的位置。

关于快应用 IDE 插件,如您有兴趣了解更多,可参见文章:如何使用插件提升快应用开发效率

刷新预览和 devtools

在预览设置中,增加一个刷新按键,可以刷新预览和 devtools。

快应用 IDE - 刷新预览和 devtools

修复 devtools 断开连接 bug

电脑睡眠之后,devtools 断开连接,预览的 touch 模式会失效。现在,可以通过点击预览上方的刷新按键、保存文件等方式,让预览和 devtools 恢复正常。

展望未来

在接下来的日子里,我们将再接再厉,使得 IDE 使用体验再升一个台阶。未来,团队仍将持续关注性能稳定性兼容性,这些对于用户和我们,都至关重要的基本面;同时将投入更多精力于 IDE 预览、预检测,力争做到预览之呈现,即真机所显(相信在不久之后,将有大的改善);对于新功能,会持谨慎态度,认真研究,力争每一点努力,都能为您带来应有价值;最后,我们将始终倾听用户的声音,如果您有任何建议或意见,请及时告知,将尽可能满足您。

如果您还没有尝试过快应用 IDE,请下载以及尝试使用它,如果您有任何想法,请及时让我们知晓。

再次表示感谢!最后,愿所有人,都可以:工作开心不加班,生活快乐无忧虑

── 来自快应用工具开发团队,于 2021 年 9 月 22 日。


2021 年 IDE 版本更新时间线:

2020 年 IDE 版本更新时间线:

Tags

vivo-developer

vivo 快应用官方博客。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.