快应用基础问题

掘金地址

https://juejin.im/post/5c21e2686fb9a049b41c7e1b

    说起快应用，大家的第一反应就是，什么是快应用？ 一个陌生又新鲜的词汇。 让人忍不住想去知道它，了解它，进而使用它。

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

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

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

     快应用现在的发展趋势迅速， 例如豆瓣评分，饿了么，时光时钟，王者荣耀盒子等都有快应用。你不需要去下载，也可以直接去搜索美食，不需要去下载也可以关注时间，不需要去下载， 你可以看到游戏盒子。 随随便便的搜一搜点一点， 你就能覆盖你生活的需求，满足你搜索的需要。这就是快应用所想给人带来的极致体验。

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

关于快应用的大家进行分享详情可参照快应用官网https://doc.quickapp.cn/tutorial/ide/

1.1pc安装toolkit工具

1.1.1安装nodeJs

安装过程： nodejs.org/en/ node官方地址进行下载 。安装版本在6.0以上

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

1.1.2安装hap-toolkit

通过npm命令安装

命令: npm install -g hap-toolkit

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

hap -V 【注意大写的 V】

1.2.手机安装调试器

调试器是一个Android应用程序

1.2.1快应用调试器

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

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

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

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

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

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

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

下载调试器 【点击 www.quickapp.cn/docCenter/p…】 点击下载调试器

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

1.2.2快应用预览版

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

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

快应用预览版v1030

快应用预览版v1020

快应用预览版v1010

快应用预览版v1000

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

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

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

1.3创建项目

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

1.3.1建立项目模版

例如： hap init myproject

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

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

结构如下：

· src：项目源文件夹

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

· 

 

1.3.2 安装依赖

npm install

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

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

1.3.3编译项目

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

npm run build

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

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

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

· 

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

npm run watch

1.3.4启动http服务器

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

npm run server （推荐）

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

npm run server -- -- port 8080

1.3.5手机上预览运行效果

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

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

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

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

安装成功的预览效果：

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

1.4 .代码编译配置-开发工具

1.4.1 使用 Visual Studio Code 开发

下载安装 : 点击跳转下载Visual Studio Code

打开 vscode ， 打开项目。 点击左上角扩展，此图标

搜索 hap 安装 Hap Extension ==》点击重新加载 ，激活 Hap Extension

1.4.2使用WebStorm开发和sublime开发 请参照（https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html）

【推荐vscode】

1.5开发与调试

1.5.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')

查看日志

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

1.5.2 远程调试

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

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

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

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

1.6项目配置信息

地址（doc.quickapp.cn/tutorial/ge…）

1.6.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" }
]
}

1.6.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页面了，就可以开始快应用的开发了。

说起快应用，不得不说快应用踩过的坑。 由于快应用处于不断优化阶段，在开发过程中，自然会遇到一些不完善的地方，由于我们对于新技术的掌握还不透彻，也会使得开发中遇到很多的困难。 我将快应用开发的问题罗列到下面，希望对大家的开发有所帮助。

1. stack模式注意事项

stack模式下，父级内放入image，将事件作用于stack和div事件触发均有难问题，所以，需要将事件设置到image上。 设置于子级本身。

2 . tabs切换

如果是自定义组件形式。 tab-bar可以设置为div形式。 当点击每个tab-bar ， 可以切换图片和更换颜色。

在data中设置数据进行切换 。

3．缺少依赖

Can’t resolve ‘less-loader’ ,证明缺少 less-loader依赖，直接重新安装依赖即可， 即 npm install less-loader ，其他依赖同理。

4 . 返回数据作二次处理再渲染

如果数据返回的是类型等数字，比如返回为1 ，2 等。 需要将1和2 在渲染的过程中转换为name 和 state ， 则返回的数据需要处理后重新返回新数据即

5．父子组件传参 （父组件向子组件传参）

子组件 设置props

props中的属性作为子组件，遍历 data的值，遍历到每一个是 $item ，代表data1中每一个对象 。获取每个对象，拿到对应属性， 将其放入 页面中。

父组件的数据形式

在父组件中使用子组件

6. 通过 openssl 命令等工具生成签名文件private.pem、certificate.pem

如果只是单独vscode 生成证书必须使用openssl，使用命令是直接用不了的。必须安装openssl。

操作步骤是：

复制华为的openssl 到项目的同级 D盘的 D:Program Files，复制OpenSSL-Win64 文件到 D:Program Files 此位置

然后设置全局环境变量

我的电脑 -右键- 属性 -高级-环境变量-path双击- 在最后加分号加openssl路径。 ;D:Program FilesOpenSSL-Win64in

然后执行命令

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem复制代码

最后在工程的 sign 目录下创建 release 目录，将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去。

7 . 没有tab-bar，列表无法加载底部问题

快应用，在隐藏tab-bar的状态 ，列表加载一直是加载中，无法加载到底部。 所以要设置一个padding值，>=2px，否则无法加载到底部。

8.路由传参

路由传参：（使用时注意引入import router from '@system.router';）

路由传img（参数时），接受时是字符串类型，需做处理才能使用。

this.detailList = JSON.parse(this.detailList); 使用此方法将\解析。

可得正常结果例如:https://blog.csdn.net/shi_yi_fei/article/details/51202209

9．路由跳转传参

路由跳转传参（routePagePushWithParams）

格式

routePagePushWithParams () {

// 跳转到应用内的某个页面

router.push({

uri: '/heroDetail',

params: {

detaiId: this.$item.hero_id

}

})

}

该路径跳转为heroDetail下的index.ux的文件，

子组件在接收时注意定义属性最好不为null （否则会出现未知错误）

例

protected: {

detaiId: ""（正确）

detaiId: null（错误）

}

10.list瀑布流(不理想)

布局:

方案1: list中嵌套两个list-item，list-item中用block循环对应数组中数据。

缺点:

list不支持justify-content样式。

页面出现卡顿。

方案2: div中嵌套两个list，block循环list-item来展示数据。

缺点:

div不能实现页面滚动。

左右list会独立滚动。

方案3: list中设置属性columns:2，list-item显示数据信息。

缺点:

无法区分两侧数据。

每个list-item高度相同。

方案4: list中嵌套一个list-item，list-item中用div分为左右两列列表，div中block循环对应数组中数据。

缺点:

页面卡顿。

第一页内容显示正常，但之后的内容显示不全。

js: 先定义两个数组，遍历数据根据后台返回的高度来判断添加到哪个数组中。

总结:

list内子元素只能单方向滚动，不能换行。

list、list-item中不可再次嵌套list。

暂不支持瀑布流

list-item的type属性是优化list的关键。

block会被当做透明标签处理，调试时不显示。

11．swiper中多个图片加载

如果很长很长图片加载时出现图片模糊、被放大（初次加载时出现）

部分机型(小米)出现一些图片被切割现象。（不可恢复）

部分机型（华为、oppo）滑动过快，出现图片被切割现象，重新加载可以还原页面。有可能是手机渲染的问题。

12.图片编辑

文档中图形图像目录下，对图片的操作不能操作网络上的图片。

否则会报202（参数错误）

uri格式为 uri:'internal://tmp/abc.jpg'

13.页面调试

最初调试时注意版本号以及是否在同一网段。如果手机电脑都使用一个wifi 。但是电脑安装了360wifi等，则会改变网段。请注意必须在同一网段。

调试时会出现页面突然崩掉，重新加载即可。

当你npm run watch页面不更新时，重新npm run build的会显示你的错误。

出现安装失败，确定代码没问题，就清理一下测试机。

14.变量

问题1：在block循环中直接使用".length",可显示length前内容的长度。 例: {{$item.thumb_img.length}}

问题2：当点击图片跳转该图片详情页时，routePagePushWithParams中可直接打印出当前点击图片下的详情信息

html：

<block for="{{imgListMsg}}" @click="routePagePushWithParams">

<text class="text-title">{{$item.title}}</text>

</block>

js:

routePagePushWithParams () {

console.log(this.$item.title)

// 跳转到应用内的某个页面

router.push({

uri: '/cosImgDetail',

params: {

detailName: this.$item.title,

}

})

}

15.css样式问题

html

<text for="value in $item.reply_list">

<span>用户名称</span>

用户内容

</text>

当给span添加样式时，会覆盖text的样式

解决办法：给span添加class ，不是直接span标签。

16.richtext 样式不可被覆盖

<richtext type="html" class="skillCon" >

{{description}}

</richtext>

richtext解析返回的html数据。 样式不可被覆盖更改。 需要单独给html更改新的颜色等，不可实现。

17.if使用和判断

<div class="topPic" if="{{$item.iconList !='' && $item.iconList != null }}" @click="routewebdetail" >

<div class="smallPic" for="{{$item.iconList}}">

<!-- 图片 -->

<image src="{{$item.icon}}" class="imgImg" ></image>

</div>

</div>

出现报错

原因是，列表中尽量少使用if判断，如果使用了。必须保证type值相同的结构type唯一，如果列表中可能出现不同的type则可能报错。最好的解决办法是，使type值不唯一。

解决办法：type="product-{{ listItem.iconList.length }}-{{ listItem.coverList.length }}"

18.分享问题

分享问题请注意，申请回来的key。 注意将value值放入到manifext.json。模式是

如果platform只有一个，比如只有微信。点击分享的时候，会直接分享到微信页面， 不会调起弹框。如果需要有其他额外的操作在分享页，可以制作假的点击按钮，逐个分享。

19.swiper中暂时不支持list组件

处理办法，如果需要滑动操作，则使用tabs中放入list组件。

20. list中图片不能占满全屏处理

list作为最大的外层容器，内部的background-image或者image 如果不设置高，height：100%；撑不开元素。

处理办法：给image设置固定的px高度，如果要图片占满全屏，则 device.getInfo可以获取设备的高， 将获取的高给到list-item内的image设置高度。 可以占满全屏。目前不确定是否有兼容性问题。

如果只有一张固定背景图，而不是list渲染图片，则可以给最大的节点设置背景图，可以占满全屏。

21.div下image设置问题

如果div下直接有一个image。 div设置宽60px高60px，image同样设置宽高60 ，最后渲染的结果可能是60*60，60*61，61*60,59*59，会有1像素的问题。目前还是待解决。

感谢大家阅读这边文章。希望大家能提出宝贵的意见，希望我们能共同见证快应用的成长，享受快应用所带来的极致体验。

作者：执着的烙印
链接：https://juejin.im/post/5c21e2686fb9a049b41c7e1b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。