Narcissistic, Perfectly Modest

    qap-cli

    3.1.16 • Public • Published

    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平台
    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,会出现如下界面:
    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工程打包后需要上传到服务器,才能发布到千牛用户手机上运行。打开上传网址,上传即可。

    Keywords

    none

    Install

    npm i qap-cli

    DownloadsWeekly Downloads

    3

    Version

    3.1.16

    License

    ISC

    Unpacked Size

    28.8 MB

    Total Files

    1846

    Last publish

    Collaborators

    • doub
    • qianniu