快应用开发入门

快应用介绍介绍

网页：网页无需安装，体验不够很好；

原生应用：原生应用体验流畅应用入门，但需要从应用商店下载安装，难以一步直达用户，而且安装包比较大耗流量；

快应用：深度集成在手机操作系统中，用户无需下载安装直接在手机上运行，可流畅的体验应用内容。

类似微信小程序，微信小程序嵌套在微信 app 里面，快应用嵌套在手机系统里面。

入口比较全，包括：URL 链接、全局搜索、应用商店、浏览器、负一屏、系统桌面、PUSH、语音助手、安全中心、垃圾清理、信息助手、天气、短信模板、日历、个性主题、文件管理...

开发技术

快应用采用前端技术栈，由基本的标签、样式、js脚本等组成，与 Vue 的开发方式相近。

快应用使用 MVVM 的设计模式进行开发，开发者无需直接操作 DOM 节点的增删，利用数据驱动的方式完成节点更新。

开发实时编译渲染，完成后打包生成 rpk 包上传平台。

快速开始

1. 安装快应用开发工具：quickapp.cn/docCenter/IDEPublicity

2. 新建快应用工程

3. 代码结构

4. 开发调试

5. 编译打包提交测试

6. 上传至官网的开发者中心，提交审核发布

遇到的问题和解决办法缺点

真实开发体验感受到的问题：

遇到的问题和解决办法

1. 开发工具运行卡顿

现象：长时间运行快应用开发工具会变卡顿。

解决：可以退出杀死快应用开发工具，然后重新打开。

2. 开发工具运行报错

现象：初次安装报错，开发过程报错，偶发编译报错。

解决：查看右侧预览报错信息 => 查看底部输出的报错信息 => onError 监听 => 代码二分法排查 => 重启开发工具 => 重启电脑

说明：

3. 生命周期函数执行问题

页面执行顺序 onInit => onReady => onShow

自定义组件只有 onInit => onReady

现象：加载过一次的页面返回再进入只会执行 onShow，此时页面中自定义组件生命周期函数不会执行。

解决：加上 if 并在页面 onShow 中修改为 false，100ms 后为改为 true，强制子组件刷新。

4. 定位不支持 z-index 控制层级

现象：z-index 无效，多个 position 定位元素互相覆盖时，谁后面渲染谁就在上层。

解决：用 stack 组件替代，stack 容器子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件；用代码逻辑控制要显示在最上层的最后去渲染。

5. 私有自动登录 api 导致预览无法使用

现象：使用了 oppo 私有的自动登录 api，模块不存在报错导致开发者工具右侧预览失败，无法实时开发调试。

解决：封装登录方法，引入参数控制调试阶段用写死的登录 token，不走私有登录 api。

6. 页面栈过多数据被销毁

现象：阅读页和详情页因为 id 不一样每次都会产生新的页面栈，页面栈的数量超过 5个，缓存在内存里的最早页面数据会被销毁，一般表现就是首页会变空白，因为最先进的是首页。

解决：阅读页和详情页这种带 id 的页面用 router.replace 替换 router.push；监听页面栈数量超过 5个记录一下，在回到首页的时候重新加载数据。

7. 计时器问题

现象：计时器内函数执行报错 this 找不到，A页面跳转到B，后台继续监听A页面计时器，到点执行计时器，此时A页面已被销毁，报错。

解决：给 Function 增加 bindPage 方法，在 bindPage 里面判断页面存在才执行函数，所有计时器都用以下方法：

const bindPageLC = () => {
  Function.prototype.bindPage = function (vmInst) {
    const fn = this
    return function () {
      if (!vmInst) {
        throw new Error('使用错误：请传递VM对象')
      }
      if (vmInst.$valid) {
        return fn.apply(vmInst, arguments)
      } else {
        console.error('页面销毁时，不执行回调函数')
      }
    }
  }
}
bindPageLC()
setTimeout(function() {
}.bindPage(this), 500)

8. 系统字体设置变化导致内容错位

现象：手动修改系统字体大小，未做适配导致页面错位，目前未提供相关 api 能监听到系统字体大小变化导致。

解决：manifest.json 关闭字体大小响应 "textSizeAdjust": "none"。

9. 系统显示设置变化导致内容错位

现象：手动修改系统显示大小，使用富文本容器内嵌html元素的会变大错位。"textSizeAdjust": "none" 只能关闭不响应系统字体变化。

解决：不使用富文本容器内嵌 html，改用 div、text 等组件。

10. 屏幕适配

快应用和负一屏卡片默认尺寸都是 "designWidth": 750，使用 750 的设计图可 1:1 写样式；

如果 "designWidth": 1080，375 的图需要乘以 3，可以在公共样式里定义变量，@3:3px;

具体使用则：height: 156*@3;padding: 16*@3 16*@3 0;

11. 夜间适配

现象：监听夜间模式然后变换最外层样式去更换颜色，发现不起作用，需要每个元素都单独换样式才有效。

解决：快应用可以夜间媒体查询适配 @media (prefers-color-scheme: dark) {}。manifest.json 中 "themeMode": -1, 跟随主题色，"forceDark": true, 启反色

图片暗夜 src 替换：监听主题模式切换 onConfigurationChanged，获取当前的主题模式 configuration.getThemeMode()

组件单独关闭反色：forcedark="false"

自定义样式：用媒体查询适配 @media (prefers-color-scheme: dark) {}

12. 阅读页竖翻模式 1.0 广告问题

现象：多个广告组件 for 循环，绑定 appear 触发加载，每个组件会多次触发 appear 事件；广告组件 onLoad 回调会触发多次。

解决：加索引缓存过滤掉已加载过的组件；广告对象抽离到外部共同引用，传数据到广告组件里面去渲染数据，做数据缓存过滤。

13. 2.0 原生广告注意点

加载：最外层通过 if 重新渲染加载新广告

成功：返回的数据不再有广告 id

点击：广告曝光和点击只会触发1次，再次点击不会触发广告点击上报，无收益；触发广告跳转区域不能用 if

控制，否则点击无任何反应，用 show 控制

关闭：自定义关闭广告元素用 show，不用 if，这样就不会跳转到广告链接

14. 安全审核问题

loglevel 需设置为 off；

未同意隐私协议前存在联网行为：所有请求在同意协议后再发；

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!