快速上手快应用

快速上手快应用

官网

介绍

1. 快应用是国内十家手机厂商联合推出的类似于小程序的东西
2. 背景是被微信小程序引流太严重
3. 因为是十家手机厂商联合推出的，所以其内部矛盾也很多，兼容性相当尴尬，特别是推动者之一华为和其他厂商之间的兼容性问题
4. 例如环境搭建，一般用厂商联盟的版本，因为用自己熟悉的IDE，只不过是调试要用到手机，但是华为的需要用自己的IDE和自己的加载器，不然很多华为的兼容性问题找不出来

环境搭建（厂商联盟）

1. 安装NodeJS

   • 这个就不说了

2. 安装hap-toolkit

   • npm install -g hap-toolkit

3. 当nodeJs版本高于6的时候

   • hap update --force

4. 手机安装调试器和平台预览版（平台预览版最好1020及以上）

   • 资源下载地址

环境搭建（华为）

1. 前三步都一样
2. 安装华为IDE
3. 安装华为加载器
4. 华为IDE的官网

编辑器的配置

1. 华为有IDE
2. vscode
   • 需要安装Hap Extension插件
3. webstorm
   • 648763.png

创建项目

1. 创建项目模板

   • hap init

2. 初始化后的项目结构

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

3. 安装依赖 npm install

4. 启动项目

   • 编译代码并watch代码变化实时编译 npm run watch
   • 启动服务 npm run server
   • 此时就有个地址，打开地址会有二维码
   • 用快应用调试器扫描二维码，可以看到具体项目了（注意要在同一局域网下）

5. 其他命令

   • npm run build 生成本地测试包
   • npm run release 生产带签名的可上线的包

app.ux 和 manifest.json 简介

1. app.ux

   • 主要就是引入第三方组件或者公共方法等
   • 或者在生命周期中加入某些方法，让快应用在打开每个页面都执行

2. manifest.json

{
  "package": "打包后的rpk名称",
  "name": "快应用名称，如果添加到桌面，会显示该名称",
  "versionName": "版本号",
  "minPlatformVersion": 1010,  // 最低快应用预览版的版本
  "icon": "logo.png",   // logo图
  "widgets": [
      // 卡片
  ],
  "features": [  // 使用的系统的功能
    { "name": "system.prompt" },
    { "name": "system.router" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "debug",  // 调试等级
    "designWidth": "375",  // 设置设计稿的宽度
    "data": {
      "umeng_appkey" : "key"
    }
  },
  "router": {
    "entry": "home/index",  // 入口
    // 各个路由
    "pages": {
      "路由路径": {
        "component": "路径下的文件，不带后缀"
      }，
      “home/index”: {
         "component": "index"  // 表示 home/index/index.ux 文件
      }
    }
  },
  "display": {
    "titleBarBackgroundColor": "#f2f2f2",  // title背景色
    "titleBarTextColor": "#414141",  // title 字体颜色
    "titleBar":false,  // 默认显示title
    "menu": true  // 显示菜单
  }
}