初探快应用

腾讯DeepOcean原创文章：dopro.io/quick.html

快应用是什么

快应用官网给出的解释：

1、快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。

2、快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。

3、快应用具备传统APP完整的应用体验，无需安装、即点即用。

简单来说快应用就是国内几大手机厂商联合推出的免安装应用，类似于微信的小程序，用户不用安装应用，即点即用，如图所示,在oppo搜索界面中出现的是一款腾讯动漫的快应用。

快应用如何开发

一、准备工作

1、安装hap-toolkit

npm install -g hap-toolkit
复制代码

2、创建项目

hap init <ProjectName>
复制代码

3、手机安装调试器

4、编辑器设置

这里采用的是vscode，快应用的文件都是带有ux后缀，需要安装hap扩展插件

二、代码结构

比较重要的是manifest.json文件，它包含了应用描述、接口声明、页面路由信息

{
  "package": "com.application.demo",
  "name": "appName",
  "icon": "/Common/icon.png",
  "versionName": "1.0",
  "versionCode": 1,
  "minPlatformVersion": 1000,
  "features": [
    { "name": "system.network" },
    { "name": "system.fetch" },
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "debug" 
  },
  "router": {
    "entry": "Demo",
    "pages": {
      "Demo": {
        "component": "index"
      },
    }
  },  
  "display": {
    "titleBarBackgroundColor": "#252525",
    "titleBarTextColor": "#FFFFFF", 
    "titleBar": true,
    "menu": true,
    "pages": {
      "Demo": {
        "titleBar": false
      },
    }
  }}
复制代码

其中”features”是接口列表，比如网络、通知能力，类似java引入jar包方式 ; config.logLevel设置为debug模式，表示允许所有级别的日志输出。

*.ux文件的编码方式和vue类似，都是分为template、style、script三块，但还是有一定区别：如data变为了private，没有methods，方法直接跟随在private后面

<script>      
import prompt from '@system.prompt'
import router from '@system.router'
import share from '@system.share'
import fetch from '@system.fetch' 
export default {
    private: { 
        titleBar: {
            'type': 'titleBar',
            'config': {
                'title': '企鹅电竞'  
            }
        },
        fetchedData: [],  
        list:[]
    },
    onInit () {
      this.fetchDataListAsync() 
    },    
}
复制代码

三、生命周期

vue的生命周期主要是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；

而快应用页面生命周期是onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress，此外还包含了APP的生命周期：onCreate、onDestroy

四、发布

需要在各个手机厂商开发平台注册开发者账号，然后在快应用官网进行绑定，还是比较麻烦，另外说明下最好是选择企业注册，比如oppo的个人开发者只能发布壁纸、主题类型，不能发布应用

五、一个简单的demo

<import name='titleBar' src='./component-titlebar'></import> 
<template>
        <div class="doc-page">     
            <titleBar value="{{titleBar}}"></titleBar>  
            <list class="list-wrap " columns="2">        
                    <list-item type="listItem" class="list-item flex-column flex-1 " for="{{list}}">  
                        <image class="video-image" src="{{$item.cover_url}}"></image>   
                        <text class="text-title">{{$item.title}}</text>      
                    </list-item>
            </list>
            <div class="fix-bottom"> 
                <div class="download-btn">
                    <image class="logo" src="./images/logo.png"></image>
                    <text class="download-btn-text">发弹幕，看比赛，下载企鹅电竞</text>  
                </div>
            </div> 
        </div>  
</template>

复制代码

最后

快应用的开发总体来说还算简单，性能也还不错，不过也遇到了些问题，比如渐变和圆角不能同时使用、button自带阴影的样式问题，另外手机调试发热会比较严重，出现了温度过高的警告，希望后面能改进吧。

最后，如果希望自家的app能够获取更多的流量支持，快应用也是一项不错的选择。