1 前言
1.1 快应用
简单地说快应用是国内的十大主流手机厂商比如小米、华为、ov 等联合推出的一种新型应用。无需安装，秒开，体验媲美原生。还提供了像原生应用一样的入口：应用商店，搜索页等。
1.2 为什么要写这篇文章
对于技术人员来说，多了解一些不同的技术、不同的开发模式、不同的架构、扩展自己的技术广度，对未来的职业发展是很有必要的。所以本人就从一个前端开发者的角度，从项目搭建开始进入，来分析一下快应用开发。
1.3 本文的目标读者
- 1 想要学习更多和了解更多的人
- 2 对技术充满热情
2 简单对比
| - | 微信小程序 | 快应用 |
|---|---|---|
| 语法规范 | 小程序开发规范 | 类vue开发规范 |
| 标签集合 | 小程序标签 | 快应用标签 |
| 样式规范 | wxss | scss、style、less |
| 组件化 | 无组件化机制 | 快应用组件规范 |
| 多端复用 | 不可复用 | 不可复用 |
| 自动构建 | 本身无自动构建 | webpack构建 |
| 上手成本 | 全新学习 | 有vue基础即可 |
| 集中数据管理 | 不支持 | 不支持 |
| 外部依赖npm | 不支持 | 支持 |
| 开发调试 | 微信开发者工具 | 一系列环境及调试工具 |
3 工程结构对比
3.1 快应用
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src 项目文件夹
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件，可自定义页面名称
│ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
3.2 文件解析
- UX文件解析 一个普通的ux文件示例如下
<template>
<!-- template里只能有一个根节点 -->
<div class="demo-page">
<text class="title">欢迎打开{{title}}</text>
<!-- 点击跳转详情页 -->
<input class="btn" type="button" value="跳转toplife" onclick="routeDetail('index')" />
<input class="btn" type="button" value="跳转品牌页" onclick="routeDetail('brands')" />
<input class="btn" type="button" value="跳转list" onclick="routeDetail('list')" />
</div>
</template>
<style>
.demo-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 40px;
text-align: center;
}
.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
</style>
<script>
import router from '@system.router'
export default {
// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
private: {
title: 'TOPLIFE'
},
routeDetail (type = 'index') {
// 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
router.push ({
uri: type
})
}
}
</script>
可以看出ux文件是 Vue 风格的写法.template style script
- mainifest.json 项目配置文件
{
"package": "com.application.demo",
"name": "helloQuickApp",
"versionName": "1.0.1",
"versionCode": "1",
"minPlatformVersion": "101",
"icon": "/Common/logo.png",
"features": [
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.shortcut" },
{ "name": "system.webview" }
],
"permissions": [
{ "origin": "*" }
],
"config": {
"logLevel": "debug"
},
"router": {
"entry": "demo",
"pages": {
"demo": {
"component": "index"
}
}
},
"display": {
"titleBarBackgroundColor": "#f2f2f2",
"titleBarTextColor": "#414141",
"menu": true,
"pages": {
"demo": {
"titleBarText": "TOPLIFE",
"menu": false
}
}
}
}
在开发阶段进行代码调试时，需要将config中的 logLevel设置为debug;
display---用于定义与UI显示相关的配置。
详细介绍
4 页面的生命周期
4.1 快应用生命周期
4.1.1 页面生命周期
- onInit： ViewModel的数据已经准备好
- onReady：ViewModel的模板已经编译完成
- onShow：显示
- onHide：隐藏
- onDestroy：页面被销毁时调用
- onBackPress：返回
- onMenuPress：调用顶部标题栏时
4.1.2 app生命周期
- onCreate
- onDestroy
5 debug对比
5.1 快应用
快应用支持日志输出，也就是传统的console.log()，支持远程调试，需要一部手机或者安装Android Studio等输出看日志。
5.1.1 使用日志输出如下：
打开src文件下的manifest.json，修改配置如下
{
 "config": {
  "logLevel": "debug"
}
}
在js中输出日志（console对象）
console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
查看日志(通过Android Studio等 )
5.1.2 远程调试步骤如下(注意：确保手机与PC在同一局域网)：
运行npm run server
打开手机上的快应用调试器扫码安装，也可以将rpk文件拷贝到手机上安装
快应用调试器中的开始调试按钮，开始调试，也需要使用console对象
6 总结
总的来说，快应用作为一个新的入口，从发布以来呈下降趋势，未来还待观察。不过近期，快应用将启动北上广深杭成六地巡回，发起了线上流量扶持计划，拿出了超过两亿的流量资源。
