|
|
说起快应用，大家的第一反应就是，什么是快应用？ 一个陌生又新鲜的词汇。 让人忍不住想去知道它，了解它，进而使用它。
快应用：是十大手机厂商基于硬件平台共同推出的新型应用生态。简单概括来说就是不用下载， 随点随用，却还能享受原生应用的性能体验。
作为前端开发人员，时刻关注着前端的新型技术，了解行业动态，把握新的技术，才能时刻保持自己能走在技术的前沿。快应用的兴起，给安卓市场带来了巨大的改变。改变有很多方式，对于投资和开发的角度来讲，效果和投入产出比至关重要。九大厂商共建的快应用标准，最大的优势在于降低了开发者的开发和推广成本，有了这个标准，开发者可以做到一次性开发，各大手机厂商都能运行，极大地减少了开发成本。
快应用的特征显而易见。使用的是我们前端技术开发，原生渲染，同时具备了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 -- -- port8080
1.3.5手机上预览运行效果
1 打开调试器， 点击扫码安装。可以扫码 npm runserver的二维码（输入终端窗口提示的二维码），也可以复制npm run server 出现的地址（输入终端窗口提示的http服务器地址）到浏览器生成二维码并扫码。【推荐】
2打开调试器，点击右上角 menu ==》设置，输入终端窗口中http服务器地址
【注意】：如果提示安装失败， 首先检查npm runserver 是否正常 。 然后检查是否在一个网段。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 runserver
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"
}
注意【必须是绝对路径 】其中/对应于路径/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：页面路径，不填则默认为页面名称（/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 installless-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 Files\OpenSSL-Win64\bin
然后执行命令
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.路由传参
路由传参：（使用时注意引入importrouter 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：
{{$item.title}}
js:
routePagePushWithParams () {
console.log(this.$item.title)
// 跳转到应用内的某个页面
router.push({
uri: '/cosImgDetail',
params: {
detailName: this.$item.title,
}
})
}
15.css样式问题
html
用户名称
用户内容
当给span添加样式时，会覆盖text的样式
解决办法：给span添加class，不是直接span标签。
16.richtext 样式不可被覆盖
{{description}}
richtext解析返回的html数据。 样式不可被覆盖更改。 需要单独给html更改新的颜色等，不可实现。
17.if使用和判断
出现报错
原因是，列表中尽量少使用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像素的问题。目前还是待解决。
感谢大家阅读这边文章。希望大家能提出宝贵的意见，希望我们能共同见证快应用的成长，享受快应用所带来的极致体验。
|
|
