快应用调研

Leedom
1,075 阅读1分钟

快应用

安装使用

  1. 安装脚手架
npm install -g hap-toolkit
  1. 创建项目
hap init <projectName>
npm install
  1. 启动项目
npm run watch

快应用开发者工具打开项目 4. 编译项目

npm run build
  1. 调试项目
npm run server
  1. 发布项目
npm run release

项目结构

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

调试

  1. WIFI调试 快应用调试工具
  2. USB调试 快应用调试工具
  3. 开发工具调试
  4. chrome 调试

生命周期

  • 页面的生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
  • 页面的状态：显示、隐藏、销毁
  • APP 的生命周期：onCreate、onDestroy
周期 级别 时机
onCreate app 创建应用
onInit page 页面初始化，加载数据
onReady page 模板编译完成，操作dom
onShow page 页面切换显示,this.$visible == true
onHide page 页面切换隐藏,this.$visible == false
onBackPress page 物理返回，头部返回，返回api
onMenuPress page 右上角菜单栏
onDestroy page 页面销毁,this,$valid
onDestroy app 应用销毁

路由

  1. 配置路由 在manifest.json,router字段
    目录结构
└── src
|── Demo                  页面目录，存放各自页面私有的资源文件和组件文件
|   └── index.ux         页面文件，文件名不必与父文件夹相同（推荐index.ux）
└── Doc
    └── Layout            页面目录，存放各自页面私有的资源文件和组件文件
        └── index.ux     页面文件，文件名不必与父文件夹相同（推荐index.ux）
路由配置
{
  "router": {
  "entry": "Demo" // 入口页面
    "pages": {
      "Demo": {
        "component": "index"
      },
      "Doc/Layout": {
        "component": "index"
      }
    }
  }
}
  2. a标签
<!-- 路由跳转 -->
<a href="/PageParams/receiveparams">跳转到接收参数页面</a>
<!-- 传参，接收参数 this.key -->
<a href="/PageParams/receiveparams?key={{title}}">携带参数key2跳转</a>
<!-- 包含完整schema的uri -->
<a href="tel:10086">调起电话</a>
<a href="sms:10086">调起短信</a>
<a href="mailto:example@xx.com">调起邮件</a>
<!-- 打开webview加载网页 -->
<a href="https://www.baidu.com/">打开网页</a>
  1. router
 // 导入模块
   import router from '@system.router' 或 const router = require('@system.router')

 // router.push router.replace
   router.push({
     uri: '/PageParams/receiveparams',
     params: { key: this.title }
   })
   
 // 传参，接收参数this.key
   router.replace({
     uri: '/PageParams/receiveparams',
     params: { key: this.title }
   })
   
 // launch phone app
 router.push({
   uri: 'tel:10086'
 })
 
 // launch sms
 router.push({
   uri: 'sms:10086',
   params: {
       body: "message"
   }
 })
 
 // open web page
 router.push({
   uri: 'http://www.example.com'
 })
 
 // install apk
 router.push({
   uri: 'internal://cache/example.apk'
 })
 
 // 打开另一个快应用
 router.push({
   uri: 'hap://app/com.example.quickapp/page?key=value'
 })
 
 // 打开wifi设置页面 1040+
 router.push({
   uri: 'hap://settings/wlan_manager'
 })

接口能力

  1. 数据存储 和H5类似
  2. 文件能力 读写文件(重要)，文件接口uri: 'internal://files/work/demo'

文件存储

在应用平台中是按分区来存储文件的，目前支持以下分区
2.1 Cache，一般用于存储缓存文件，比如通过 fetch 接口下载的文件会存储在该分区中，该分区中的文件可能因存储空间不够被系统删除
2.2 Files，一般用于存储比较小的永久文件，该分区中的文件由应用自己管理
2.3 Mass，一般用于存储比较大的文件，但该分区并不保证一直可用
2.4 Temp，表示从外部映射过来的临时文件，出于安全性考虑，临时文件是只读的，并且只能通过调用特定的 API 获取，比如 media.pickVideo 方法。另外临时文件的访问是临时的，应用重启后无法访问到临时文件，需要通过特定 API 重新获取。

URI
资源类型 URI 只读 示例
应用资源 /path 是 /Common/header.png
Cache internal://cache/path 否 internal://cache/fetch-123456.png
Files internal://files/path 否 internal://files/image/demo.png
Mass internal://mass/path 否 internal://mass/video/demo.mp4
资源和文件访问规则

应用资源路径分为绝对路径和相对路径，以"/"开头的路径表示绝对路径，比如 /Common/a.png，不以"/"开头的路径是相对路径，比如 a.png 和 ../Common/a.png 等。

应用资源文件分为代码文件和资源文件，代码文件是指 .js/.css/.ux 等包含代码的文件，其他文件则是资源文件，这类文件一般只当作数据来使用，比如图片、视频等。

数据交换

和其他快应用进行数据交换

登录

  1. 登录态保持：可以将登录态保存在storage内，使用方法和H5类似
  2. 第三方登录
微信账户

2.1 接口声明 问题1：动态配置appid

{
  "name": "service.wxaccount",
  "params": {
    "appId": "your app id"
  }
}

2.2 导入模块

import wxaccount from '@service.wxaccount' 或 const wxaccount = require("@service.wxaccount")

2.3 登录流程

useWXAccount: function() {
    // 获取微信登录状态APP为微信app登录
    var type = wxaccount.getType();
    if (type == 'APP') {
        // 授权获取code
        wxaccount.authorize({
            scope: 'snsapi_userinfo',
            state: 'randomString',
            success: function(data) {
                let code = data.code
                // 向万卡接口传code，
                // 万卡后台访问微信获取access_token
                // 万卡后台获得access_token，访问微信获取openid
                // 快应用拿到openid,调后台接口获得万卡token
                console.log("wxaccount authorize success:" + JSON.stringify(data));
            },
            fail: function(data, code) {
                console.log("wxaccount authorize fail:" + data + ", code:" + code);
            },
            cancel: function() {
                console.log("wxaccount authorize cancelled.");
            }
        });
    } else {
        console.log("wxaccount not available.");
    }
}

快应用授权登录

3.1 接口声明

{ "name": "service.account" }

3.2 登录流程

// 获取accessToken
account.authorize({
  type: 'code',
  redirectUri: 'http://www.example.com/',
  success: function(data) {
    // 以accessToken获取openid
    // 以openid访问后台获取token
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

webview

  1. 与H5之间的通信，H5需要增加新的环境信息，在快应用环境中，增加与快应用的通信方法。
  2. 编写一个通用的webview路由页

问题

  1. 版本控制
  2. 第三方包的引用
  3. 状态管理，
  4. 平台功能差异
  5. 还未找到支持快应用的埋点服务
  6. 编辑器配置
  7. webview 管理
avatar
文章
阅读
粉丝