快应用

菠萝汽水
1,552 阅读5分钟

什么是快应用

简单来说快应用是由国内的十大主流手机厂商例如小米、华为、oppo等联合推出的一种新的应用形态。快应用无需安装，秒开，体验媲美原生，它还提供了像原生应用一样的入口：应用商店、全局搜索、浏览器搜索等。

开发前准备

参与流程

  • 官网注册

  • 完善资料并至少绑定一家厂商开发者账号

  • 厂商审核，通过后提交快应用

如何开发

快应用采用前端的技术栈，需要基础的前端知识，比如 标签、 样式， js等

快应用使用MVVM的设计模式进行开发，开发者无需直接操作dom节点，利用数据

驱动的方式完成节点更新，当前标准的开发规范与vue相近。

开发环境

  1. 搭建Nodejs环境，需要安装8.0以上版本的Nodejs(建议使用 10.0+

以上),可以从Nodejs官网下载

  1. 安装手机调试器

  2. 安装 toolkit

    hap-toolkit是快应用的开发者工具，可以用来创建模版工程，升级工程，编译，调试等功能。类似vue-cli.

安装：

npm install -g hap-toolkit

创建项目：可以在当前目录写创建 test 目录作为项目的根目录

hap init test

安装依赖

npm install

起服务

npm run server

或 安装快应用的IDE, 进行应用的新建、编辑、调试等工作。

项目结构

应用由一个manifest.json，放置项目公共资源脚本的app.ux,多个页面/组件ux文件组成。在manifest文件中可以定义应用描述、系统配置和页面路由等信息；页面/组件ux文件中完成单个页面或组件的具体实现，包括ui模板、样式、数据定义和回调事件处理等。

├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src
│   ├── Common                公用的资源和组件文件
│   │   └── logo.png          应用图标
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件，可自定义页面名称
│   ├── app.ux                APP文件，可引入公共脚本，暴露公共数据和方法等
│   └── manifest.json         项目配置文件，配置应用图标、页面路由等
└── package.json              定义项目需要的各种模块及配置信息

manifest文件

manifest.json 文件中包含了应用描述、接口声明、页面路由信息

基本属性

下面介绍几个常用的属性

1. 路由----router

快应用的路由都是在manifest中的router对象中进行配置，router

用来定义页面的实际地址、跳转地址。如果ux页面没有配置路由，则不参

与项目编译。一个目录下最多只能存在一个主页面文件（不包括组件文件 ）。

首页（router.entry）

首页是应用平台启动时默认打开的页面。首页需配置为应用中某

页面的名称，即在projectName/src目录下，页面目录的相对路径。

页面路由对象（router.pages）

key为页面名称，value为页面具体路由配置，key不能重复。页面

具体路由配置（router.pages的value）包括一下属性：

  • component: 页面对应的ux文件名
  • path:页面路径，不填则默认为页面名称。

例如，其中入口页和错误页对应下面pages里的配置页面

"router": {
  "entry": "Demo",--------(入口页面)
  "errorPage": "ErrorPage",-----(错误页)
  "pages": {
    "Demo": {
      "component": "index"
    },
    "ErrorPage": {
      "component": "index"
     },
  }
}

然后跳转的时候， 先在页面引入

import router from '@system.router'

然后跳转

router.push({
  uri: '/Demo',
  params: {
    msg: '传递的参数'
  }
})

路由传递的参数直接使用this接收。

console.log(this.msg)

也可以直接打开内嵌h5

router.push({
  uri: 'https://www.baidu.com/'
})

2. 页面配置----display

用于定义与 UI 显示相关的配置。

例如

可以配置一些背景色，全屏设置，以及每个页面的titleBar的名称和控制titlebar的显示

例如

"display": {
    "titleBarBackgroundColor": "#ffffff",
    "titleBarTextColor": "#000000",
    "menu": false,
    "pages": {
      "Demo":{
        "titleBar": false
      },
      "ErrorPage": {
        "titleBarText": "这是错误页面"
      }
    }
}

设置titleBar的方法也可以在页面之中进行动态设置

    this.$page.setStatusBar({ text:'修改titleBar名称',immersive: false, textStyle: 'dark', backgroundColor: '#000000' })

3. 适配----config

我们可以通过config里面的配置来规定页面设计基准宽度，然后使用设计按照这个规格来设计尺寸，我们不用进行任何操作，单位仍然是px，快应用就会自动进行适配操作。因为快应用的px是相对于项目配置基准宽度的单位，已经适配了移动端屏幕。

ux文件

APP、页面和自定义组件均通过ux后缀文件编写，ux后缀文件由template模板、style样式和script脚本三个部分组成。例如

<template>
 <!-- template里只能有一个根节点 -->
 <div class="demo-page">
   <text class="title">欢迎打开{{title}}</text>
   <!-- 点击跳转详情页 -->
   <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
 </div>
</template>
<style lang="less">
 .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 {
   routeDetail () {
     // 跳转到应用内的某个页面
     router.push ({
       uri: '/Test'
     })
   }
 }
</script>
  • css
    • display 只能是flex或none
    • position 只能是fixed或none
    • 长度单位只有px和%

预览

可以使用安装的快应用调试器

  • 扫码安装: 需要启动一个本地HTTP服务，然后会生成二维码扫码即可。

  • 在线更新：快应用调试器右上角可以设置服务器地址，运行下面的命令每次改了代码就可以点击在线更新就可以更新了，不用每次都扫码。

    npm run server
    npm run watch
  • 调试 可以在手机上预览，也可以使用 chrome devtools调试界面

简单demo

...

优缺点

  • 优点： 提供了很多系统的功能，比如分享、拍照等。 用户体验好，无需下载，秒开，占用内存小。 学习成本低，文档较为完善。
  • 缺点： 每个平台都要注册个账号，不能互通。 rpk文件最大1M。 国内厂商推出，不支持ios。
avatar
文章
阅读
粉丝