腾讯DeepOcean原创文章:dopro.io/quick.html
快应用是什么
快应用官网给出的解释:1、快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。
2、快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。
3、快应用具备传统APP完整的应用体验,无需安装、即点即用。
简单来说快应用就是国内几大手机厂商联合推出的免安装应用,类似于微信的小程序,用户不用安装应用,即点即用,如图所示,在oppo搜索界面中出现的是一款腾讯动漫的快应用。
快应用如何开发
一、准备工作
1、安装hap-toolkitnpm 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能够获取更多的流量支持,快应用也是一项不错的选择。