快速上手快应用

官网

介绍

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

环境搭建（厂商联盟）

安装NodeJS
- 这个就不说了
安装hap-toolkit
- npm install -g hap-toolkit
当nodeJs版本高于6的时候
- hap update --force
手机安装调试器和平台预览版（平台预览版最好1020及以上）
- 资源下载地址

环境搭建（华为）

前三步都一样
安装华为IDE
安装华为加载器
华为IDE的官网

编辑器的配置

华为有IDE
vscode
- 需要安装Hap Extension插件
webstorm
- 648763.png

创建项目

创建项目模板
- hap init <ProjectName>
初始化后的项目结构

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

安装依赖 npm install
启动项目
- 编译代码并watch代码变化实时编译 npm run watch
- 启动服务 npm run server
- 此时就有个地址，打开地址会有二维码
- 用快应用调试器扫描二维码，可以看到具体项目了（注意要在同一局域网下）
其他命令
- npm run build 生成本地测试包
- npm run release 生产带签名的可上线的包

app.ux 和 manifest.json 简介

app.ux
- 主要就是引入第三方组件或者公共方法等
- 或者在生命周期中加入某些方法，让快应用在打开每个页面都执行
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  // 显示菜单
  }
}