请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

交流分享 【征文】快应用项目总结

6
回复
517
查看
[复制链接]

3

主题

12

帖子

75

积分

 楼主| 2018-11-27 16:36:04 显示全部楼层 |阅读模式
本帖最后由 curry 于 2018-11-30 10:58 编辑

官方介绍
快应用是基于手机硬件平台的新型应用形态; 标准是由主流手机厂商组成的快应用联盟联合制定; 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生 态模式对个人开发者和企业开发者全品类开放。

快应用官方文档https://doc.quickapp.cn/

快应用从大的方面可以理解为手机厂商的小程序,它的语法和微信小程序也有类似的地方,但是两者之间还是有很多差别的,各有优劣,下面是快应用和微信小程序的简单对比:

技术栈 渲染方式 系统能力 开发体验 社区生态 推广入口 上线审核
小程序webview渲染 活跃 相对简单
快应用原生渲染 稍差 不活跃 相对繁琐

大致对比下,小程序的开发体验好,社区活跃,有很多经验积累,示例分享,上线速度也较快,但是系统能力支持不足,且推广入口比较单一,自然入口只有小程序搜索页;快应用基于原生渲染,系统能力支持好,虽然只支持国内安卓厂商,但是这部分也占了很大的份额,快应用推广入口多,包括系统搜索,应用商店露出,负一屏露出等(快应用入口介绍https://bbs.quickapp.cn/forum.ph ... tid=552&fromuid=139)),但是开发体验不好,具体见下文开发方面的总结,社区不活跃,才处于起步阶段,各种经验积累不足,且上线要经过快应用官方以及各厂商的审核,针对每个厂商要单独提包,效率不高。

项目结构:
xiangmu.png

开发之前,需要搭建好开发环境,具体看文档,按照文档的步骤执行即可;可以选择快应用官方提供的IDE;也可以直接用命令行搭配自己熟悉的IDE进行开发。开发时同时执行 npm run server 和 npm run watch 可实现热更新

调试方法有两种:

  •    手机与 PC 在同一局域网,可以使用 WIFI 调试,服务启动成功后,命令行终端和调试服务器主页可以看到提供扫描的二维码
  •    手机快应用调试器中关闭USB调试
  •    手机快应用调试器点击扫码安装按钮,扫码安装待调试的 rpk 文件
  •    手机快应用调试器中点击开始调试按钮,开始调试
  • USB 调试,不需要手机与 PC 在同一局域网,需要手机通过 USB 连接 PC
  •    手机开启设置 --> 开发者选项 --> USB调试
  •    手机快应用调试器选中开启USB调试,手机 USB 连接到 PC
  •    手机快应用调试器中点击在线更新按钮,安装待调试的 rpk 文件
  •    手机快应用调试器中点击开始调试按钮,开始调试

项目配置 manifest.json:

这里可以配置应用包名,应用名称,应用图标,版本号(整数,从1开始,每次更新都需要自增1);
接口列表,项目中需要使用的系统能力都需要在这里配置,如下:
1.png

页面路由,路由如下,每个页面对应一个路由,其中entry表示首页,即默认打开的页面:
2.png


开发
按照文档搭建完环境后,通过hap-toolkit生成快应用脚手架,跟据当前项目信息配置好manifest.json文件,连接电脑开启调试,就可以进入正常业务开发了。

通用基础:
  • 使用系统提供的storage@system.storage模拟cookie;
  • 基于系统网络请求api@system.fetch封装请求方法,包括将cookie塞入请求头;判断返回结果,合理抛错;设定超时处理等

页面开发:
在项目src目录下新建页面目录,注意首字母大写,以推荐页Recommend为例,
3.png

然后配置路由,如果Recommend是首页,entry也要指定为Recommend:
7.png

index.ux也是类似vue的单文件页,包括template,script,style三个部分,且style支持less和sass;样式布局采用 CSS Flexbox(弹性盒)样式,为了解决屏幕适配问题,所有与大小相关的样式(例如 width、font-size)均以基准宽度(默认 750px)为基础,根据实际屏幕宽度进行缩放,例如 width:100px,在 1500px 宽度屏幕上,width 实际上为 200px;

如果需要引入组件,需要使用import,如:
4.png

使用时直接通过name定义的字段就可以,<loading></loading>。

开发中的坑:
由于对快应用不熟悉,以及快应用和传统前端开发有些区别,开发中难免遇到一些问题,这里记录开发中可能会碰到的问题(开发中如果打开了调试或者用官方IDE开发,如果报错了,都会有相应的错误提示):

样式问题包括:
  • text-algin不支持
  • vertical-align不支持
  • font-family不支持
  • #fff 转换为 #ffffff
  • 颜色值 red 转换为 #FF0000
  • background不能单独使用
  • background-image 不支持网络路径
  • box-sizing不支持
  • 属性position 的值 absolute 无效 (有效枚举值为: none|fixed)
  • overflow不支持
  • box-sizing不支持
  • box-shadow不支持
  • 样式属性不能继承
  • 要实现z-index的图层效果需使用stack

很多样式都不支持,除了flex布局,只支持部分简单的通用样式,具体见快应用通用样式表(https://doc.quickapp.cn/widgets/common-styles.html)

组件问题:
  • 不能使用自闭合标签
  • 表单组件,改变value值也会触发change事件,无法判断change是人为触发,还是改变数据触发的
  • list 组件导致无故闪退,可能是以下原因:

    • list-item内不能再嵌套list;
    • list-item的type属性为必填属性;
    • list-item内部需谨慎使用if指令或for指令,因为相同type属性的list-item的 DOM 结构必须完全相同,而使用if指令或for指令会造成 DOM 结构差异;
  • richtext 插入的html片段,无法更改样式;如果需要自定义文字样式,只能使用text
  • 部分手机swiper不会自动渲染第一屏,需要在onInit的时候指定索引index的值
  • swiper不会根据内容自适应高度,需要设置具体height值
  • slider可以改变背景条颜色和选中颜色,但是改不了圆形button的颜色

其他问题:
  • 更新 rpk 的时候,版本号需要自增1
  • 在protected public private里定义的属性,在 template 中无法获取,因为这些只能在页面级组件中使用,在自定义组件(非页面级组件)中,需使用data来定义数据
  • 不能出现任何原生app下载引导,一旦出现就不会过审

一些建议
    快应用毕竟才开始没多久,期待社区能越来越活跃,快应用也能更强大,以下是整理的一些建议(陆续更新):

  • 合理利用生命周期钩子:一些可能会造成内存泄漏的方法记得在onDestroy中销毁;onBackPress 中可以处理一些业务逻辑,比如打开了某个悬浮框,第一次按物理返回键,可以关闭悬浮框,再按一次才返回(符合安卓使用习惯);比如在小说阅读页,可以在按返回的时候询问是否加入书架,然后执行后续逻辑;
  • 一些共用方法,不需要在每个页面都引用,这样打包的时候会在所有页面都单独引用一遍,可以统一在app.ux中引入,然后抛出,在需要使用的页面通过this.$app.$def...这种形式使用;
  • 快应用的rpk要求不超过1M,快应用脚手架目前不支持静态资源压缩,一定要手动对静态资源进行压缩;







回复

使用道具 举报

3

主题

12

帖子

75

积分

 楼主| 2018-11-27 16:39:54 显示全部楼层
@快应用官方  论坛不支持markdown,难受啊
回复

使用道具 举报

236

主题

406

帖子

3755

积分

2018-11-27 18:31:39 显示全部楼层
本帖最后由 管理员 于 2018-11-27 18:35 编辑

辛苦啦,排版方面有问题都可以联系我帮忙哈
回复

使用道具 举报

3

主题

12

帖子

75

积分

 楼主| 2018-11-28 10:18:46 显示全部楼层
管理员 发表于 2018-11-27 18:31
辛苦啦,排版方面有问题都可以联系我帮忙哈

好的好的,辛苦
回复

使用道具 举报

2

主题

15

帖子

85

积分

QQ
2018-12-25 16:05:35 显示全部楼层


哥,我也遇到了这个问题
后来您咋整呀?
不妄自菲薄
回复

使用道具 举报

3

主题

12

帖子

75

积分

 楼主| 2018-12-25 16:51:31 显示全部楼层
827542599@qq.co 发表于 2018-12-25 16:05
哥,我也遇到了这个问题
后来您咋整呀?

按照文档改下就好了,如果一定要用if或者for,可以加在list-item上或者用block包起来,文档有例子https://doc.quickapp.cn/tutorial/widgets/list-tutorial.html
回复

使用道具 举报

2

主题

15

帖子

85

积分

QQ
2018-12-25 17:22:11 显示全部楼层
827542599@qq.co 发表于 2018-12-25 16:05
哥,我也遇到了这个问题
后来您咋整呀?

我知道了……
不妄自菲薄
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册