初探快应用

快应用是什么

快应用官网给出的解释:

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

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

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

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

1

快应用如何开发

一、准备工作

1、安装hap-toolkit

npm install -g hap-toolkit

2、创建项目

hap init <ProjectName>

3、手机安装调试器

3

4、编辑器设置

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

2

二、代码结构

4

比较重要的是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的个人开发者只能发布壁纸、主题类型,不能发布应用

5

五、一个简单的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>

6

最后

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

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

发表评论