qap-cli v3.1.16

QAP简介

QAP（Qianniu Application Platform）是一个可以让开发者使用Rx和H5协同开发千牛移动插件的平台。

该平台致力于解决目前开发千牛插件应用时遇到的一些问题，比如没有多页面管理、缺少缓存支持、内存占用高、加载速度慢等。

在QAP出现之前，H5类型的千牛插件不支持多页面，插件需要通过其他库实现虚拟的页面切换来模拟多页面的效果。 QAP针对这一问题引入页面栈概念，开发者可以随意定制多个H5或者RN页面，并且H5和Rx页面拥有一套统一的API支持。

QAP支持H5和Rx混合开发，开发者可以先将部分功能或者页面升级成Rx，以减少开发者的迁移成本。QAP的H5支持离线包功能，之前版本的H5离线包以很低成本就可以快速迁移到QAP发挥加速作用。

QAP SDK是一个集成了丰富API、开放给前端开发者使用的开发者套件。前端开发者使用该SDK即可调用丰富的API，并在RN/H5页面中实现统一的的调用。

QAP Sample包含了从简单的Hello QAP到复杂的交易插件的示例代码，方便开发者查看和运行该代码，降低开发者的学习成本。

此外，QAP还提供了命令行工具qap-cli用来方便开发者创建、调试、打包和发布。该工具支持Mac OS、Windows和Linux多个平台。有了该工具，开发者可以大大提高开发效率，同时在一个开发平台上的产出，可以应用到不同的目标平台上。

QAP目标平台：iOS, Android QAP开发平台：Mac OS, Windows, Linux

快速开始

安装qap-ci依赖

1. 安装Node.js

Node.js是一个开放源代码、跨平台的、可用于服务端和网络应用的运行环境。 qap-cli使用了Node.js开发，因此需要需要开发者安装Node.js。

Windows平台

• 下载MSI( v4.4.6 LTS-x86, v4.4.6 LTS-x64)，双击运行即可。

• 访问Nodejs官方网站。

Mac OS平台

1. 直接下载程序Node.js进行安装；
2. 通过Homebrew进行安装：brew install node；

2. 设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

3.安装 qap-cli

npm install qap-cli -g

检查qap-cli版本，确定大于0.2.1

qap version
0.2.3

创建QAP工程

语法: qap create projec name：

qap create AwesomeProject

该命令会在当前目录下创建最简单的示例工程，该工程目录结构如下：

AwesomeProject/
    ├── h5
    │   └── www.test.com
    │          └── index.html
    ├── rn
    │    ├── index.js
    │    ├── package.json
    │    ├── script
    │          └── lifecycle.js
    │    └── components
    └── Manifest.xml

该工程的h5目录和以前的离线包方案类似：文件夹名称和域名一致，默认包含了index.html文件。QAP插件会优先在该目录下匹配文件，而不是通过直接请求http，来提高H5页面的打开速度。

rn目录则放置了React Native相关的代码，如index.js是React Native的入口文件。一般来说，开发者会在入口文件中注册React Native的入口模块：

import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';

class helloQap extends Component {
  render() {
    return (
      <View>
        <Text>
        Hello QAP!
        </Text>
      </View>
    );
  }
}
//注册helloQap模块
AppRegistry.registerComponent('helloQap', () => helloQap);

最后，Manifest.xml是QAP的配置文件，该文件最重要的部分是H5或者RN页面的声明，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest appKey="1323324720" version="1.0">
	<pages>
		<page default="true" launchMode="singleTask">rn://helloQap</page>
		<page capability="h5LocalPage">http://www.test.com/index.html</page>
	</pages>
</manifest>

该文件声明了两个page，并指定第一个页面是默认页面，以单任务的方式启动，中间描述了该page的uri。由于uri是以rn://开头的，所以这是一个基于rn编写的页面。 第二个页面h5LocalPage拥有一个capability属性进行能力声明。通过QAP的页面相关API，可以基于页面的uri或者capability来实现多页面。

运行程序

创建完一个QAP应用，我们可以在手机千牛上运行查看效果。

启动开发服务器

在QAP应用的根目录（Manifest.xml所在目录）下运行如下命令： 语法：qap debug --options

qap debug

该命令会在本机启动一个服务，让手机客户端可以连接调试QAP应用。为了查看运行效果，开发者需要安装移动端千牛：Android千牛或iOS千牛。

iOS千牛

1. 通过旺旺联系千牛ios值班账号获取Debug版本的iPhone千牛进行安装；
2. 打开Debug版本的iPhone千牛，点击顶部状态栏的Debugger进入千牛调试界面；
3. 依次点击测试其它功能 - [New]QAP应用调试，进入QAP应用调试界面；
4. 在输入框填入Dev Server的IP地址后，点击按钮即可运行QAP应用；

Android千牛

打开千牛，打开我的-设置-关于千牛，连续点击头像，打开调试模式。选中第二项“QAP调试”，摄像头会被呼起，扫描二维码即可运行该QAP插件。 插件调试： 1.调试H5页面：待手机打开QAP插件后，打开需要调试的H5页面后在PC上打开chrome，输入chrome://inspect/#devices，会出现如下界面：
点击蓝色字体的inspect即可调试。

2.如何调试React Native代码：手机打开QAP插件后，打开需要调试的RN页面后，在PC的chrome浏览器打开http://localhost:8081/debugger-ui网页：
即可使用熟悉的Chrome开发者工具调试React Native代码，可以打断点，捕获异常。为了更好的体检，推荐设置:

TODO

打包QAP工程

完成代码编写和调试后，需要将其打包成一个Zip文件，用来正式发布。 通过在QAP的根目录下运行：

打包语法：qap package projectName [options]，projectName只对Zip包的名字有影响。

options --ios：打包iOS平台的zip包，输出到./_output/projectName-ios.zip。 --android：打包Android平台的zip包，输出到./_output/projectName-android.zip。

qap package AwesomeProject

如：

qap package --ios AwesomeProject

只会生成iOS目标平台的Zip包。

上传到千牛服务端

该QAP工程打包后需要上传到服务器，才能发布到千牛用户手机上运行。打开上传网址，上传即可。