是几家手机厂商基于硬件平台共同推出的新型应

快应用是基于手机硬件平台的新型应用形态...具备传统APP完整的应用体验,无需安装,即点即用。

4.环境:需安装6.0以上版本的NodeJS,请从NodeJS官网下载

本文目的

结合官方文档,旨在让开发者更快了解、体验、开发QuickApp。

环境搭建

四、最重要的问题,快应用后端怎么办?

Quikapp快应用、告诉你,可以直接接入Bmob后端云!!!

既然语言是JavaScript, 直接下载Bmob的JavaScript SDk引入,就可以直接操作后端数据库,配合云函数可以实现Quikapp快应用的接口对接。很快Bmob也会推出快应用的针对性SDK,这样云函数也不需要写了,跟微信小程序一样无需写一行后端代码,愉快的对接Quikapp快应用了。

腻害吧!!!

总体而言,华为快应用还处在初期,尽管有些地方还不够完善,但不可否认,它有其独到的优势,也为开发者提供了更为广阔的空间,期待ing!!!

根据上面快应用官网

  1. 官网:
  2. 文档:
  3. 工具:使用Visual Studio Code开发使用WebStorm开发教程地址(

安装调试器

现阶段如果要在其他手机上体验快应用,需要安装下面这两个apk,点击下载:

  • 调试器
  • 预览平台

运行方案推荐两种,http与本地。

  • 本地
    • 直接把rpk文件拖入手机,在调试器里本地安装即可
  • http
    • 实质上是在主机上运行一个服务器,通过http请求调试
    • 在主机上运行npm run server
    • 会出现一个二维码,在调试器上扫描即可

必威 1

debuger.png

之后就可以愉快的运行了,自测的效果感觉还可以。

必威 2

example.png

编译

请先将命令行执行目录切换至你刚创建的目录下,后面所有命令都在这个目录下执行。

根据package.json nodejs package.json详解安装库:

cnpm install

编译

npm run build

实际上是调用package.json中的scripts-->build命令,npm scripts 使用指南

{
"scripts": {
    "build":   "cross-env NODE_PLATFORM=na NODE_PHASE=dv webpack --config ./node_modules/hap-tools/webpack.config.js"
}
}

编译打包成功后,项目根目录下会生成文件夹:build、dist

  • build:临时产出,包含编译后的页面js,图片等
  • dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出

必威 3

image

我们大概看看其主要文件是.ux,里面的结构分为template,style,script三大块,这个结构是典型的Web前端MVVM结构,用到了CSS Flex看来一个.ux就是一个模块,类似一个Android中的Activity。manifest.json就类似Android中的AndroidManifest.xml

rpk文件就是快应用安装包类似Android的APK包,它只能在支持快应用的Android操作系统或Android App里执行

最近华为牵头国内几大厂商推出了Quikapp快应用,与微信小程序展开了入口之争,作为走在时代最前沿的程序猿,不了解一下,不动手操作一下,都对不起时代赋予我们的责任感了。来,跟我一起来探究探究快应用的开发之路。

  • 开发环境:快应用需要自行安装配置一系列环境及调试工具,而小程序只需一个开发者工具即可,这一点小程序胜。
  • 开发体验:快应用的语法和vue1很像,而小程序有着自己一套语法规范,相对来讲,快应用会更容易上手。
  • 程序包大小:小程序4M,快应用1M,这一点确实有点局限,但小程序也是从1M变成4M的
  • 能力:小程序和快应用在安卓端都可以添加快捷方式到桌面,但不同的是,快应用属于系统级应用,与微信同级,能调用更多系统级API,体验上会更优于小程序,这一点是后者所不能比的。
  • 其他:小程序上架发布流程较为简单,快应用需要逐家关联开发者权限,这方面有点捉急...不过对于企业账号已有的安卓渠道来说,也没什么门槛。

5.依赖库hap-toolkithap-tools

项目配置

项目配置在src/manifest.json中。

与传统安卓apk一样,这里会对整个应用做一些全局配置,但内容比较不同。个人觉得这里的配置更像一个web应用。

这里直接用一个manifest文件来展开:

{
    # 包名,区分不同应用的唯一id,因为名称其实是可以一样的
    "package": "com.application.demo",

    # 应用名称
    "name": "hi",

    # 版本管理的话,每次更新将versionCode自增1即可
    "versionName": "1.0.0",
    "versionCode": "1",
    "minPlatformVersion": "101",

    # 程序的入口icon,所有关于文件的引用统一使用根目录
    # 根目录对应src文件夹
    "icon": "/Common/logo.png",

    # 
    "features": [
        { "name": "system.prompt" },
        { "name": "system.router" },
        { "name": "system.shortcut" }
    ],

    "permissions": [
        { "origin": "*" }
    ],

    # 配置相关
    "config": {
        # 这里的设置是log输出的最低等级
        # 如果是warn的话,info类型将不会输出
        # 等级请参考js中的console日志
        "logLevel": "off"
    },

    # 路由
    # 这里会配置应用入口的页面
    # 所有的页面都需要在这里配置
    # 会把页面与对应的页面文件对应起来
    # 经过配置之后可以通过/Demo访问到Demo目录下的index.ux页面
    "router": {
        "entry": "Demo",
        "pages": {
            "Demo": {
                # 这里对应的Demo文件夹里的index.ux
                "component": "index"
            },
            "DemoDetail": {
                "component": "index"
            },
            "About": {
                "component": "index"
            }
        }
    },

    # 配置页面UI显示
    # 主要分为两种,页面公有与页面私有
    "display": {
        # 这三个都是所有页面公有的,顶部titleBar内容
        "titleBarText": "public title"
        "titleBarBackgroundColor": "#f2f2f2",
        "titleBarTextColor": "#414141",

        # 会增加一个导航栏
        "menu": true,

        # 页面私有内容
        "pages": {
            "Demo": {
                # 这里面的内容就是每个页面私有的了
                "titleBarText": "示例页",
                "menu": false
            },
            "DemoDetail": {
                "titleBarText": "详情页"
            },
            "About": {
                "menu": false
            }
        }
    }
}

更多内容请直接查询官方文档。

自动重新编译

如果希望每次修改源代码文件后,都自动重新编译项目,请使用如下命令:

npm run watch

注意:

如果报错遇到Cannot find module '.../webpack.config.js',请重新执行一次hap update --force。这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报错。而hap update --force会重新复制hap-tools文件夹到node_modules中

二、从0****到1****的操作过程

第一步:安装

npm install -g hap-toolkit

必威 4

1.png

第二步:hap脚手架生成一个初始项目

hap init test1

必威 5

2.png

这一步大家别急着

npm run server

否则报一下错误

必威 6

3.png

第三步:安装依赖

npm install

第四步:运行服务

npm run server

必威 7

4.png

还是失败,新出的东西官网还不是很完善,后面应该不会出现,这里花了几分钟找到了原因,项目少了hap-tools库, 这里没看到官网有这个库的介绍,package.json里也没 ap-tools 这个库的引入。

大家输入npm install hap-tools 手动安装下这个库。

必威 8

5.png

然后

npm run server

注:

开发者可以通过命令行终端或者调试服务器主页看到提供*

扫描的二维码

开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件

开发者点击快应用调试器中的开始调试按钮,开始调试

必威 9

6.png

完美!

必威 10

7.png

自从2016年底微信小程序面世以来,历经几次波折,目前的发展势头还不错,很多工具和购物类应用都在小程序上获得了不错的红利,个别拼团购物应用在今年春节期间的流量更是引起了淘宝等电商巨头的关注。

Quikapp快应用、如何接入Bmob后端云?

既然语言是JavaScript, 直接下载Bmob的JavaScript SDk引入,就可以直接操作后端数据库,配合云函数可以实现Quikapp快应用的接口对接。很快Bmob也会推出快应用的针对性SDK,这样云函数也不需要写了,跟小程序一样无需写一行后端代码,愉快的对接Quikapp快应用了。

目录

  • 快应用是什么
  • 环境配置
  • 第一个程序
  • 项目配置
  • 框架

日志输出

  1. 修改日志等级

打开工程根目录下的src文件夹的manifest.json,找到config配置,将logLevel修改为最低级别debug,即:允许所有级别的日志输出

修改后<ProjectName>/src/manifest.json中config配置代码如下:

{
 "config": {
    "logLevel": "debug"
  }
}
  1. 在js中输出日志

当js代码未按需求正确运行,输出日志能帮助开发者快速定位问题;与传统前端开发一致,使用console对象输出日志,如下:

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
  1. 查看日志

开发者可以使用Android Studio的Android Monitor输出来查看日志。

先添加一段console.debug("hello quickapp")

必威 11

image

然后

npm run build

npm run server

终端出现如下:

必威 12

image

然后打开Android Monitor

必威 13

image

用Debug App 扫描二维码安装;

<img src="" style="zoom:30%"/>

三、给大家解释下目录说明

必威 14

8.png

大家像开发微信小程序一样,在这上面开发就好了。

Quikapp快应用基于Nodejs内建一个本地服务器运行代码、语言JavaScript,语法支持ES6,如果熟悉vueweex一类的MVVM框架,基本可以直接入手。

这一章是Quikapp快应用开发入门,有空补上下一章编写第一个快应用。

最后欢迎关注我们的公众号:wfxteam

首先记住几个网站

安装hap-toolkit

npm是nodejs的包管理工具,然而这里我们还是需要把默认源改成taobao源,不然很慢。这里直接安装taobao提供的cnpm工具,替代npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后我们后续的npm命令都可以改用cnpm执行。接下来可以来装hap-toolkit:

cnpm install -g hap-toolkit

在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功,如下命令所示:

hap -V

安装debug工具

一、首先记住几个网站:

1.快应用官网:

https://www.quickapp.cn

2.快应用后端支持网站:

www.bmob.cn

3.文档:

https://doc.quickapp.cn/

4.工具:

使用Visual Studio Code开发

使用WebStorm开发

教程地址(https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html)

5.环境:

需安装6.0以上版本的NodeJS,请从NodeJS官网下载

6依赖库

hap-toolkit、hap-tools

快应用的开发工具叫做hap-toolkit,基于Node环境,官方文档上建议使用NodeJS v6.11.3LTS版本,不推荐使用8.0.*版本,据称会出现不兼容问题;安装好NodeJS后,通过下面命令安装开发工具:

第一步:安装

 npm install -g hap-toolkit

必威 15安装

第一个程序

接下来我们来看看怎么安装运行快应用。

远程调试

如果你没有安装Android-Monitor,就可以通过远程调试调试快应用,用hap-toolkit的远程调试命令 、chrome devtools调试界面,来调试手机app端的页面

  • 开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码
  • 开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件
  • 开发者点击快应用调试器中的开始调试按钮,开始调试

用Debug App 扫描二维码安装后点击开始调试按钮:

必威 16

image

如果安装了Chrome浏览器,debug程序会自动调起PC Chrome devtools:

必威 17

image

大家可以改一些代码自己跑起来看看效果

必威 18

第二步:hap脚手架生成一个初始项目

 hap init test1

必威 19初始化项目目录

这一步大家别急着

npm run server

否则报一下错误

必威 20报错

第三步:安装依赖

npm install

第四步:运行服务

npm run server

必威 21image.png

还是失败,新出的东西官网还不是很完善,后面应该不会出现,这里花了几分钟找到了原因,项目少了hap-tools库, 这里没看到官网有这个库的介绍,package.json里也没 ap-tools 这个库的引入。大家输入npm install hap-tools 手动安装下这个库。

必威 22安装

然后

npm run server
  • 开发者可以通过命令行终端或者调试服务器主页看到提供*扫描的二维码
  • 开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件
  • 开发者点击快应用调试器中的开始调试按钮,开始调试

    必威 23成功

完美

必威 24快应用入门教程

给大家解释下目录说明

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

大家像小程序一样,在这上面开发就好了。

Quikapp快应用基于Nodejs内建一个本地服务器运行代码、语言JavaScript,语法支持ES6,如果熟悉vueweex一类的MVVM框架,基本可以直接入手。

这一章是Quikapp快应用开发入门,有空补上下一章编写第一个快应用。

快应用是什么

2018年3月20日,华为、小米、中兴、联想等手机厂商,共同举办了“快应用”标准启动发布会。

“快应用”是几家手机厂商基于硬件平台共同推出的新型应用生态,用户不必下载安装,即点即用,能够享受到原生应用的性能体验。“快应用”使用前端技术栈开发与原生渲染,兼具H5页面和原生应用的双重优点。

创建项目

如上图,编译后的目录结构,我们逐个看一下几个关键的目录:

编译项目

在初始化之后,这个项目已经具备了在手机上运行的能力。在你的项目目录下执行:

cnpm install

这个命令会为你的quickapp安装相关的依赖包,安装完毕后我们可以开始编译:

cnpm run build

此时会生成两个文件夹:

  • build:临时产出,包含编译后的页面js,图片等
  • dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出

一般来说我们只需要dist里的rpk。

安装hap-toolkit

cnpm install -g hap-toolkit

-g 参数是全局安装在环境变量能访问的地方,这样直接在命令行中可以执行hap命令,查看版本

hap -V

hap 是官方给的辅助开发工具,主要功能是初始化工程模板,这样就省去了初始化繁琐的工作;

本文由必威发布于必威-编程,转载请注明出处:是几家手机厂商基于硬件平台共同推出的新型应

相关阅读