2021,快应用常见问题及解决方案

快应用 Apr 9, 2021

在之前的系列文章中,讲述了什么是快应用,如何开发快应用,以及些许工具、资源介绍。本篇文章梳理了大量快应用相关问,并一一做了解答,旨在分享于需要的朋友;如果您还有更多问题,可以留言,相互讨论。

备注:本文首发于2021,快应用常见问题及解决方案 | 悠然宜想亭

2021,快应用常见问题及解决方案

入门相关

请问快应用和可以跟安卓应用一样,唤起微信小程序吗?

可以,如果您的小程序非个人主体;可以通过 router.push URL Scheme 打开小程序功能,来唤起小程序。示例如下:

router.push({
  uri: "weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6",
});

快应用能使用第三方 JS SDK 吗?

自快应用 1080 起,支持动态引入 JS,具体可以参见动态导入 JS 文档。需要说明的是,这些 JS 文件,不能是在线地址,而需放置在项目中(可以手动下载,也可以用 npm )。

快应用支持引入别的 js 库吗?typescript 呢?

快应用支持引入 JS 库(不含 Dom 操作即可);快应用支持 TypeScript 开发,详情可参见如何基于 Typescript 开发快应用

正在开发中的快应用包  ,如何发给别人在手机上测试?

让其他人体验,正在开发中的快应用,有以下三种方法:

  1. 让其他人安装快应用调试器,然后把你正在开发中的 rpk 打包发给其他人,让其他人通过快应用调试器安装本地 rpk;
  2. 通过 IDE => 打包 => 上传包管理平台(生成二维码),将此二维码分享给其他人,扫码,按照打开网页提示操作即可;
  3. (即将推出)预发环境 rpk,同 2 的操作差不多,无需下载安装调试器。

请问下可以用 vscode 开发吗?有没有好的插件推荐下?

可以;可以安装 Hap Extension 插件。我们更推荐使用快应用 IDE 进行开发,它也是基于 VsCode 二次开发,具有良好开发体验,同时提供了大量提升效率的功能,详情可参见如何高效开发高质量快应用(quickapp)?

您好,为什么开发工具和调试工具看到的不一样呢?

快应用,基于前端技术栈开发,但是 Android 渲染,跟小程序的 Webview 渲染方式有差异;真机上,Dom 经过 v8 处理,最终由 Java 渲染;而在 IDE,是按照 Android 的渲染方式,做了一套模拟,这中间存在许多差异,所以导致两者看起来部分内容,会不一样(模拟这边也有不断在完善)。

有没有监控快应用性能的工具呢?

有;IDE,提供了「云测」(云真机自动化检测工具),可以探测快应用性能,如启动耗时、内存占用等。

新建的项目生成证书的文件目录在哪引入啊?

如果您已经生成签名,放置在 sign 下即可。如果没有,可以基于 IDE 来生成,或者通过命令行工具,详情可参见: 命令行生成 release 签名

请问 web 组件有清除缓存、cookie 的功能吗?

快应用 web 组件,暂时无「清除缓存、cookie 功能」。

快应用有 web 组件可用,H5 页面能够正常获取到本地 cookie。

框架相关

快应用怎么获取元素的高宽?

使用 getBoundingClientRect 方法,使用方法见文档

自定义的输入框,可以设置软键盘和输入框之间的间距吗?

快应用暂不支持此功能。

快应用可以获取到某个 dom 的高度吗?

可以,使用 getBoundingClientRect 方法,使用方法见可文档

快应用现在支持 background-position 吗?

支持,支持可参见文档通用样式

可以修改 input 光标的颜色吗?

引擎从 1060+ 开始支持,参见文档

段落首行缩进现在支持吗?

text 组件 text-indent 属性,可支持段落缩进。

style="backgroundImage: {{ 'url(' + $item.backimage + ')' }}",这个背景图片怎么显示不出现来,怎么拼接的?

这是内联样式已知问题:内联样式使用变量改变 style,部分样式改变不生效。1100 及以上版本修复。有种 Hack 的方式:

style="background-image: {{ bgImagePath }}"

快应用动画时间不能小于 1s?

快应用动画,没有这个限制。

写了一个公用的 css 样式,在 app.ux 引入怎么不生效呢,在某一个页面引入是可以使用的。

引擎 1080 开始支持全局样式,在 app.ux 中使用 style 定义即可。

快应用没有公共样式吗?

引擎 1080 开始支持全局样式,在 app.ux 中使用 style 定义即可。

transition 支持吗?

快应用支持开发者制作动画,提供了 transform 、animation 与 transition 的动画样式属性,参数格式与 W3C 对齐,更方便开发者上手适配动画;transition 的支持,于 1090+ 上线,详情请参见动画样式文档。另外,开发者还可使用 组件动画,为节点创建动画。

需要补充说明的是,官方还提供了 qa-spin 快应用加载动画库,后续将会推出更多动画相关工具。

请问快应用支持 CSS filter 吗

支持,自 1090 版本开始;详情可以参见官方文档:image filter

快应用生成的 menuBar 这个怎么清除?

display -> menuBarData -> menuBar: false

快应用的 MenuBar,位置是一直固定在右上角,还是默认位置在右上角,实际可以自行拖动?

各家厂商策略不一致,目前 vivo 侧不允许拖动(审核,MenuBar 必须适配)。

右上角的菜单配置什么可以隐藏掉?

当 fullScreen 属性为 true 或视频全屏状态下,若 MenuBar 不显式设置为 true,则 MenuBar 会自动隐藏;
具体请查看文档:MenuBar 适配指南

快应用 onDestroy 事件,可以统一写在一个地方吗?

不可以,应用和页面都有该生命周期,针对的是应用或特定的页面,需要在 app.ux 或具体页面 ux 文件中指定。

请问快应用退出后台,如何使视频暂停播放? vivo 快应用里 onShow 和 onHide 是不是只执行一次?

可以在页面 onHide 时调用视频 pause 方法。快应用 onShow 和 onHide 在页面显示或隐藏时都会执行,不是只执行一次。

在 app 的生命周期 onCreate 里会异步的拿一些用户信息,怎么保证子页面在用户信息返回才加载?

用全局的变量来做标识试试。

快应用有没有类似于 vueX 或者 Redux 之类的状态管理工具呀?

具体可以参考快应用如何使用 vuex 参与开发文章。

想问下,onHide 检测到快应用切换到后台,有没方法调用主动关闭销毁该快应用,resident.stop 也没起作用?

  • 页面被切换隐藏时调用 onHide(),页面被切换重新显示时调用 onShow()。
  • 判断页面的显示状态,可以调用 ViewModel 的 $visible 属性:true 表示显示,false 表示隐藏。
  • 暂时没有后台主动销毁快应用的 api。

快应用可以打开外部浏览器之类的应用么?

快应用能打开网页、原生应用及其他快应用。其中原生应用需申请白名单。详细见:快应用 router 教程文档。

快应用这个 $page.path 只能获取当前页面的地址,好像不能获取参数,请问有知道怎么获取参数的吗?

可在 onInit 中通过 query 方式获取传递的参数,详见快应用框架文档

global 具体怎么用啊,有人用过么?

快应用官方提供了 global 的推荐使用方式,可参见文档;推荐参考文章:# 如何优雅使用「快应用」API

快应用里面可以直接打开小程序吗

可以通过 router.push 方式打开;

请问快应用哪儿可以放全局的数据呢

可以在 app.ux 中存储公共数据,页面中使用 this.$app.$def 获取;具体可参见官方文档

组件相关

设置 z-index 在模拟器上可以起作用,但是在小米手机上不起作用,怎么办?

快应用还不支持 z-index 这个样式属性,有层级只能用 stack 组件。

快应用是否支持 svg 动画效果?

快应用目前不支持支持 svg 动画。

快应用是否支持 svg 格式?

快应用支持 svg 格式,但仅限于 image 组件,详情参见 image svg;background-image 无法使用 svg 格式。

接口相关

快应用页面之间,如何基于 router 传递参数?

快应用中,跳转到应用内的某个页面,可以借助 router 来实现;可以通过 params 字段来传递参数;如下代码(跳转前页面):

router.push({
  uri: '/pages/about',
  params: {
    desc: '悠然宜想亭'
  }
})

那么在跳转后的 /pages/about 页面,该如何接受参数信息呢?在 快应用 router 接口文档给出了说明,但漏掉了一个重要细节:可以通过 this.desc 拿到参数,但 desc 字段,必须在 public 或 protected 进行声明

export default {
  public: {
    desc: ''
  },
  onInit() {
    // 获取到 router params 的传递参数。
    console.log(this.desc)
  }
}

如果嫌麻烦,还有一种方式,可以获取到 router 的传递参数,通过 this.$page.query 来拿,具体示例代码如下:

export default {
  public: {
  },
  onInit() {
    // 获取到 router params 的传递参数。
    console.log(this.$page.query.desc)
  }
}

您可能感兴趣的文章

Tags

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.