快应用开发详解-优快云博客

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，修改配置如下

   {
    &emsp;"config": {
      &emsp;&emsp;"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 总结

总的来说，快应用作为一个新的入口，从发布以来呈下降趋势，未来还待观察。不过近期，快应用将启动北上广深杭成六地巡回，发起了线上流量扶持计划，拿出了超过两亿的流量资源。