codecamp

快应用教程概述

概述

本文介绍快应用背景,入口场景等,以及介绍了快应用参与及开发流程

通过本节,你将学会:

背景介绍

快应用是一种新的应用形态,以往的手机端应用主要有两种方式:网页、原生应用;网页无需安装,却体验不是很好;原生应用体验流畅,却需要从应用商店下载安装,难以一步直达用户;快应用的出现,就是希望能够让用户无需下载安装,并且还能流畅的体验应用内容。

为了达到上面的目标,快应用建立一种新的语言开发规范,同时提供一系列的开发套件辅助支持。简单来说,开发者主要利用前端知识与技能,以及对应的IDE,手机设备就可以做原型的开发。快应用使用前端技术栈开发,原生渲染,同时具备H5与原生应用的双重优点,开发者使用的前端技术栈资料多,学习成本低。

2018年3月份,由小米,OPPO,VIVO,华为等10家国内主流厂商成立了快应用联盟,从技术规范层面做了统一,并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。

快应用框架深度集成进各手机厂商的手机操作系统中,可以在操作系统层面形成用户需求与应用服务的无缝连接,很多只用在原生应用中才能使用的功能,在快应用中可以很方便的实现,享受原生应用体验,同时不用担心分发留存等问题,资源消耗也比较少。

对于每台手机设备,应用可以从多个系统入口,引用用户体验产品。比如:全局搜索、负一屏、浏览器搜索等。

下面,我们全面介绍一下快应用的开发流程。

入口场景

快应用的部分场景入口列举如下:

一级入口 二级入口
URL URL
场景入口 全局搜索、语音助手、应用商店、浏览器、系统桌面、安全中心、垃圾清理、信息助手
广告 广告
PUSH PUSH
其他 天气、短信模板、日历、个性主题、文件管理......

比如:全局搜索

全局搜索

参与流程

开发者参与快应用开发,主要分为以下几个步骤:

  1. 快应用官网注册
  2. 完善资料
  3. 绑定厂商开发者账号(至少一家)

完成以上三部,快应用开发者就可以提交快应用,详情参考 快应用注册流程

整体参与流程如图所示: 

如何开发

快应用采用前端技术栈,运行可开发效率高,学习成本低,代码可复用

快应用开发需要基本基础的前端知识,如 标签, 样式, js 脚本

快应用使用 MVVM 的设计模式进行开发,开发者无需直接操作 DOM 节点的增删,利用数据驱动的方式完成节点更新。

当前标准的开发规范与 Vue 的开发方式相近,后期可能开放并接入其它的 DSL 开发方式,以符合开发者的开发习惯。

开发过程

进行快应用开发,整体过程如下:

1. 准备开发工具

快应用开发需要准备PC/笔记本,厂商手机,内网环境或者手机可连接电脑

2. 开发调试

开发调试过程:

  1. 通过命令行工具,或者 IDE 安装并运行快应用,详情请见:使用命令行
  2. 了解命令行工具生成的项目结构,编写项目代码,详情请见:项目结构讲解
  3. 通过 toolkit,chrome devtools 进行调试,详情请见:调试

3. 提交上传

完成代码相关工作,我们就可以提交上传快应用,详情请见: 快应用上传流程


快应用 教程
快应用 使用命令行
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }