阅读 415

快应用

什么是快应用

简单来说快应用是由国内的十大主流手机厂商例如小米、华为、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。
文章分类
阅读
文章标签