快应用的用法和常见问题解答（上）

最新推荐文章于 2022-11-22 16:19:36 发布

快应用官方博客

最新推荐文章于 2022-11-22 16:19:36 发布

阅读量7.6k

点赞数 3

分类专栏：快应用技术分享快应用技术分享文章标签：快应用

本文链接：https://blog.csdn.net/QuickApp/article/details/92759973

版权

快应用技术分享同时被 2 个专栏收录

37 篇文章 7 订阅

订阅专栏

快应用技术分享

27 篇文章 2 订阅

订阅专栏

写在前面

在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！

从今天起，我们会陆续把一些优秀文章推送出来，希望帮助大家更好的开发快应用。

本期作者：执着的烙印

因为文章内容较多，我们对本篇文章分了上下篇发布，今天带来的是上篇，主要内容：什么是快应用以及快应用的开发流程。

说起快应用，大家的第一反应就是，什么是快应用？

快应用：是国内手机厂商基于硬件平台共同推出的新型应用生态。简单概括来说就是不用下载，随点随用，却还能享受原生应用的性能体验。

作为前端开发人员，时刻关注着前端的新型技术，了解行业动态，把握新的技术，才能时刻保持自己能走在技术的前沿。快应用的兴起，给安卓市场带来了巨大的改变。手机厂商共建的快应用标准，最大的优势在于降低了开发者的开发和推广成本，有了这个标准，开发者可以做到一次性开发，在各大手机厂商都能运行，极大地减少了开发成本。

快应用的特征显而易见。使用的是我们前端技术开发，原生渲染，同时具备了HTML5 和原生应用的双重优点，不用安装，点开即用，享受一样的体验。使得用户通过自己的手机更容易获取自己所需的服务。不必存储，一键直达，更新直接推送。

快应用现在的发展趋势迅速，例如饿了么，时光时钟，王者荣耀盒子，每日一嗒，贝壳保等快应用。你不需要去下载，就可以去搜索美食，可以去关注时间，可以看到游戏攻略，可以关注潮流服装。随随便便的搜一搜点一点，就能覆盖你生活的需求，满足你搜索的需要。这就是快应用所想给人带来的极致体验。

作为开发者，除了跟大家分享快应用，我也希望能将我开发中的一些总结，一些问题的发现，跟大家进行分享。希望作为快应用的支持者，能在此和大家共同了解快应用，学习快应用，使用快应用。能让快应用以更好的姿态融入到我们的生活当中。

快应用开发流程

一、PC安装toolkit工具

1、 安装nodeJs

安装过程： nodejs.org/en/ node官方地址进行下载。

安装版本在6.0以上，安装后校验是否安装成功： node -v ，如果出现以下类似状态，则表示安装成功

640?wx_fmt=png

2、安装hap-toolkit

通过npm命令安装

命令: npm install -g hap-toolkit

安装后校验是否安装成功：

hap -V 【注意大写的 V】

640?wx_fmt=png

二、手机安装调试器

调试器是一个Android应用程序

1、快应用调试器

为了方便调试程序，您可以使用快应用调试器，这是一个Android应用程序，主要包含以下功能：

·扫码安装：配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包

·本地安装：选择手机文件系统中的rpk包，并唤起平台运行rpk包

·在线更新：重新发送HTTP请求，更新rpk包，并唤起平台运行rpk包

·开始调试：唤起平台运行rpk包，并启动远程调试工具

调试器可以使用后，在调试器安装rpk包。

快应用调试器可以连接到手机系统内的快应用执行环境（需要将系统升级到最新的正式版本），或者您可以单独下载安装快应用平台预览版来提供执行环境。

下载调试器【点击 https://www.quickapp.cn/docCenter/post/69】点击下载调试器

下载调试器名称是 quickapp_debugger.apk 。将apk 通过qq传送到自己的手机。直接下载安装即可。

2、快应用预览版

当您的手机系统尚未内置快应用运行平台，或您想在开发过程中体验快应用尚未正式发布的新功能、新特性，您可以安装快应用预览版。

下载版本目前有5个。分别是

快应用预览版v1040

快应用预览版v1030

快应用预览版v1020

快应用预览版v1010

快应用预览版v1000

下载名称类似于【quickapp_platform_preview_release_v1020.apk 】也可以通过qq传送。下载到本机，然后通过快应用调试器-选择本地安装进行安装。

rpk 安装→如果是qq接收，地址一般是：本地安装→文件管理→内部存储设备→tencent（腾讯）→QQfile_recv 找到下载的最新的文件。（dist文件产出rpk包）

注意：如果需要安装低版本，则需要先卸载之前的版本。

三、创建项目

toolkit工具和调试器安装完成以后，开始创建项目

1、建立项目模版

例如： hap init myproject

myproject 为 项目名称 ，也是项目根目录

myproject 则包含项目配置和示例初始代码。

结构如下：

· src：项目源文件夹

· sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档编译工具

640?wx_fmt=png

2、安装依赖

npm install

如果有报错：Cannot find module '.../node_modules/hap-tools/webpack.config.js'

运行 hap update --force 执行后，不必再次执行 npm i

3、编译项目

手动编译，在根目录下，例如myproject 下。运行

npm run build

编译打包成功后，项目根目录下会生成文件夹：build、dist

· build：临时产出，包含编译后的页面js，图片等

· dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出

640?wx_fmt=png

自动编译项目（每次修改源代码文件后，都自动编译项目）

npm run watch

4、启动http服务器

开启另一个窗口，比如cmd开启或者 vscode新增一个窗口，输入

npm run server 【推荐】

也可以自定义端口（如：8080）

npm run server -- -- port 8080

5、手机上预览运行效果

（1）打开调试器，点击扫码安装。可以扫码 npm run server的二维码（输入终端窗口提示的二维码），也可以复制npm run server 出现的地址（输入终端窗口提示的http服务器地址）到浏览器生成二维码并扫码。【推荐】

640?wx_fmt=png

（2）打开调试器，点击右上角 menu →设置，输入终端窗口中http服务器地址

【注意】：如果提示安装失败，首先检查npm run server 是否正常。然后检查是否在一个网段。pc和手机是一个网段。不可以开启360wifi一类的。

试用场景：预览或者低频率的更新rpk包。如果是长时间的浏览，可以直接将rpk qq发送到手机进行本地安装。rpk 安装 →如果是qq接收，地址一般是：本地安装→文件管理→内部存储设备→tencent（腾讯）→QQfile_recv 找到下载的最新的文件。（dist文件产出rpk包）

安装成功的预览效果：

总结： 了解项目结构，编译产生rpk ，运行通过调节器安装rpk 。

四、代码编译配置-开发工具

下载快应用开发工具

https://www.quickapp.cn/docCenter/IDEPublicity

五、开发与调试

1、日志输出和日志查看

日志输出

找到src文件夹的manifest.json，找到config配置，将logLevel修改为最低级别debug，即：允许所有级别的日志输出

{	
 　"config": {	
 　　"logLevel": "debug"	
 }	
 }

在js中输出日志（与传统前端开发一直）

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')

查看日志

可以在浏览器控制台查看日志，也可以在编辑器终端窗口查看日志。

2、 远程调试

就是通过浏览器预览快应用。启动服务器npm run server

（1）编辑器提供扫码的二维码

（2）快应用调试器-扫描按照-安装rpk文件

（3）点击快应用调试器的-开始调试

六、项目配置信息

文档地址：https://doc.quickapp.cn/tutorial/getting-started/project-configuration.html

1、配置应用基本信息

在manifest.json文件中

（1）应用包名（package）

格式：

{	
  "package": "com.example.demo"	
 }

（2）应用名称（name）【6个汉字以内，与应用商店保存的名称一致，桌面显示的应用名也是】

格式：

{	
  "name": "我是快应用"	
 }

（3）应用图标（icon）【正方形（不能是圆角），且务必无白边】

格式：

{	
  "icon": "/Common/logo.png"	
 }

注意【必须是绝对路径 】其中/对应于路径<myproject>/src/

（4）应用版本名称、版本号（versionName、versionCode）【版本号主版本.次版本格式，版本号从1开始，每次更新上架自增1 】

{	
  "versionName": "1.0",	
  "versionCode": 1	
 }

demo：

"versionName": "1.0.0.0",	
"versionCode": "1",

（5）支持的最小版本号（minPlatformVersion）【最小是1000，小于1000请在提测前下载安装快应用平台内测版，自测通过后提测】

{	
  "minPlatformVersion": 1000	
 }

（6）配置接口列表（features）

【注意】在使用接口时，必须先在manifest中声明接口。在每个接口文档的顶部，都附有声明接口的配置代码

格式：

{	
  "features": [	
   { "name": "system.fetch" }	
 ]	
 }

2、配置页目录（router）

注意【定义页面的实际地址、跳转地址。如果ux页面没有配置路由，则不参与项目编译（就是可以不配置）。一个目录下最多只能存在一个主页面文件（不包括组件文件）】

（1）首页名称（router.entry）

例如工程目录

└── src
└── Demo 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）

{	
  "router": {	
    "entry": "Demo"	
 }	
 }

则进入项目的第一个页面为demo的index.ux 页面（入口页）

（2）页面路由对象（router.pages）

页面路由对象， key为页面名称（src目录下，页面目录的相对丼，value为页面具体路由配置，key不能重复）

页面具体路由配置（router.pages的value）包括以下属性：

· component：页面对应的ux文件名

· path：页面路径，不填则默认为页面名称（<ProjectName>/src目录下，页面目录的相对路径）

demo工程目录：

└── src
|── Demo 页面目录，存放各自页面私有的资源文件和组件文件
| └── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）
└── Doc
└── Layout 页面目录，存放各自页面私有的资源文件和组件文件
└── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）

当页面名称（router.pages的key）为Demo时，对应的页面配置（router.pages的value）包括：

· component：页面对应的【ux文件名】index

· path：页面路径，默认为页面名称Demo

{	
  "router": {	
    "pages": {	
      "Demo": {	
        "component": "index"	
     },	
      "Doc/Layout": {	
        "component": "index"	
     }	
   }	
 }	
 }

开发者就可以通过/Demo访问到Demo目录下的index.ux页面了，就可以开始快应用的开发了。

快应用生态平台

赋能开发者

拓展场景未来

640?wx_fmt=jpeg

快来关注我们吧

快应用官方博客

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
快应用的用法和常见问题解答（上）

写在前面在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！从今天起，我们会陆续把一些优秀文章推送出来，希望帮助大家更好的开发快应用。本期作者：执着的烙印因为文章内容较多，...
复制链接

扫一扫