快应用开发入门小结，看这篇内容就够了！

  • 2019 年 12 月 31 日
  • 筆記

简单地说快应用是国内的十大主流手机厂商比如小米、华为、ov 等联合推出的一种新型应用。无需安装，秒开，体验媲美原生。还提供了像原生应用一样的入口：应用商店，搜索页等。

开发前准备

接下来会教大家如何搭建、启动、预览和调试快应用项目。和官方文档类似，这里我增加了一些我在这过程中遇到的坑及解决方法。

创建项目

安装 NodeJS

官方说需安装 6.0 以上版本的 NodeJS，推荐 v6.11.3，但我本机 NodeJS 是 v9.3.0，暂时没发现异常就没切到 6.0。

安装 hap-toolkit

hap-toolkit 是快应用的开发者工具，帮助开发者通过命令行工具辅助开发工作的完成，主要包括创建模板工程，升级工程，编译，调试等功能。类似 vue-cli。

npm install -g hap-toolkit  复制代码
安装之后查看下版本号看是否安装成功。
hap -V复制代码

运行如下命令会在当前目录下创建 <ProjectName> 目录作为项目的根目录。

hap init <ProjectName>复制代码

这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下。

├── sign rpk 包签名模块│ └── debug 调试环境│ ├── certificate.pem 证书文件│ └── private.pem 私钥文件├── src│ ├── Common 公用的资源和组件文件│ │ └── logo.png 应用图标│ ├── Demo 页面目录│ | └── index.ux 页面文件，可自定义页面名称│ ├── app.ux APP 文件，可引入公共脚本，暴露公共数据和方法等│ └── manifest.json 项目配置文件，配置应用图标、页面路由等└── package.json 定义项目需要的各种模块及配置信息

关于接口封装

在项目中，针对接口的高频调用，需要封装高效且易用的公共方法，进而很大程度上提升代码规范质量及编码效率。封装应该解决的问题：

  • async await 支持
  • 易于配置扩展
  • 易于管理，方便调用
  • 统一错误处理

先看一段接口配置文件

在配置文件 api.js 中通过调用 reqMethod 方法构造接口函数。

因为 const 特性保证了 API 接口名称的唯一性（多人开发不会出现命名冲突），并保证了接口配置集中在 api.js 文件中方便统一管理维护。

将接口配置挂载到全局对象上

调用示例

在页面中可以直接使用 asycn/await 方式调用全局 API 方法获取接口数据。

reqMethod 实现：

reqMethod(method, url, params, baseUrl, stateDetection, showPrompt) 。

  • 增加 基础路径 参数，可支持多域名配置。（注： reqMethod 方法入参是完整 URL 时会覆盖默认域名配置）
  • 返回状态检测: 默认：是，业务规定 返回数据中 returncode = 0 为正常请求。
  • 是否弹窗提示: 默认：是，404、500、超时等是否弹窗提示。

sign 方法为签名方法， fixXiaomiParamsBug 修复 小米 1030 版本bug，小数点后超过 3 位的数字会被截取，解决方法为转换成字符串传递。

缩小快应用rpk包的体积

因为快应用对 rpk 有 1M 尺寸的限制，除了压缩图片，适量地使用网络图片，提取公共组件和方法外，我们还发现： 在快应用的模板文件中，如果多个页面通过 import 方式引入相同公共 js 文件，最后这个文件会被多次打包到 rpk 文件中，也就是说 构建工具不会提取页面之间的重复引入 ，在公共模块使用频率较高的情况下会大幅增加包的体积。

解决方法：

将公共方法挂载到全局作用域上，模板中直接调用全局方法。最终打包的结果中只包含一份公共 js 的引入。

入口文件 app.ux

我们将 utils 文件夹下的方法挂在到全局 UTILS 下，对于高频使用的方法比如 API 方法可提取出来单独挂载，缩短调用路径。

在业务代码中的调用方式，如：index.ux

在模板中可直接通过 API.getBrandmenus 获取接口数据， UTILS.Formate 方法对日期做格式化。

callback 转换成 Promise 模式

在快应用中很多系统能力 API 都是以 callback 形式提供。比如获取地理位置API：

在业务中如果使用 callback 形式很容易写出回调地狱并且不利于代码整洁，我们可以通过一个简单的方法将 callback 形式的 API 转换成 Promise 模式的，这样业务中就可以使用 promise 或者 async/await 形式调用了。

在我们的业务中有一个 promiseAPI.js 的公共方法，负责将 callback 转换成 Promise。

业务代码中调用方式如下

tabs 优化

一个内容丰富的选项卡，通常会包含许多页签内容。tabs 系统组件默认会直接加载所有页签内容，导致 JS 线程持续忙于渲染每个页签，无法响应用户点击事件等，降低用户体验，为此我们在官方给出的 demo 基础上做出了一些优化。

优化目标

  • 页签内容懒加载
  • 缓存：切换时渲染过的页签不再重复渲染，不再重复请求接口
  • 统计数据：可以分别统计每一个频道的访问次数和停留时长。

效果：

与 Vue 比较

由于我们团队主要是用 Vue 技术栈开发，所以比较下快应用在语法上和 Vue 的共同点和差异之处。快应用看起来和 Vue 类似，其实还是有很大的差别。

  • 都有指令的概念，只是写法不同， 目前不能自定义指令


<!--左边是 vue 语法 右边是快应用语法-->  v-for => for  v-show => show  v-if => if  template => block  slot => slot  复制代码


    

  • 快应用的路由是通过配置文件 manifest.json 配置的，在实例中的用法与 vue-router 一致
    • 

  • 都有组件概念，组件引入的方式略有不同
    • 





// vueimport child from './childComponent'// 快应用<import name="child" src="./childComponent"></import>复制代码


    

  • 事件的监听和触发与 Vue 类似，都是 $on $off $emit,监听原生组件的事件写法不同
    • 





<!--vue-->  <div v-on:click="handleClick"><div>  <div @click="handleClick"><div>  <!--快应用-->  <div onclick="{{handleClick()}}"><div>  复制代码


    

  • 组件间通信和纯 Vue 类似，可以通过 props，也可以挂载在全局对象上
    • 

  • Vue 生态系统都不能用，比如 Vuex,目前没有插件机制
    • 



优缺点


优点


    

  • 提供了很多系统的功能，比如分享、通知、扫描二维码、添加图标到桌面
    • 

  • 用户体验好，无需下载，秒开，占用内存小
    • 

  • 可以关联原生应用
    • 



缺点


    

  • 每个平台都要注册个账号
    • 

  • 没有一个集成开发环境，调试麻烦，且 devtools 很卡
    • 

  • rpk 文件最大1M
    • 

  • 国内手机厂商推出的，自然是不支持 ios 了
    • 



总结


上面总结的一些小方法和思路应用到项目中可以提升开发效率，在项目中我们遵循开发规范可以保证快应用项目的可维护性和扩展性，未来我们将会持续打磨和优化代码，并更多的输出一些我们在项目开发过程中的经验。

		  				

		  				

													


						
						
						


						 

							
					

					    
									

													

													
											


			


			


	

		
VirMach 便宜 VPS
 


QNews
 
QNews