快应用初探——写一个快应用练练手。

快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。研究了一个星期的快应用之后，然后写了一个简单的快应用，原本是想做一个玩Android的快应用，后来发现刚开始接触快应用的时候学习并不是很迅速，加上事情确实比较多，就只完成了一个练手的项目。如果你也在学习快应用，不如现在动手做一个小的快应用练练手吧。

1、我的快应用主要逻辑和应用截图

项目的主要逻辑

界面截图

2、环境的搭建和idea的选择

快应用的开发环境为Node.js，首先应当去下载Node.js。然后需要安装toolkit工具hap-toolkit、调试器debugger，平台预览版mockup platform。
这边直接贴出官方网站给出的环境搭建地址。

https://doc.quickapp.cn/tutorial/getting-started/build-environment.html

编码工具我选择的是vs code。 也有其他的工具可供选择，具体可以看官网的链接：
https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html

3、非常重要的manifest.json

环境搭建好之后，不要急着开发，先大概了解manifest，这个文件和开发安卓原生的AndroidManifest.xml一样重要，这里配置非常多的东西，比如：应用包名、应用名、版本号、应用图标、路由等等。
关于manifest.json：https://doc.quickapp.cn/framework/manifest.html

4、界面的开发

界面的布局有点类似Html开发，一共分为三部分组成：

• template： 界面的标签元素
• style： 界面的样式，通过css方式来编写
• script：用Node.js语法写的一些逻辑操作

关于template：https://doc.quickapp.cn/framework/template.html
关于style：https://doc.quickapp.cn/framework/style-sheet.html
关于script：https://doc.quickapp.cn/framework/script.html

快应用的标签元素
快应用有自己的一些标签元素，比如表示文字，表示图片等等。也有一些和html相同的元素，比如

等等。
关于标签元素：https://doc.quickapp.cn/features/ 在组件标签中可以找到这些标签的使用。

快应用的css样式
快应用的布局方式采用Flex布局，但是有些css样式在快应用中并不支持，这种一般在实际开发中才能知道，因为并不是看一遍文档就能记住的。
关于css样式：https://doc.quickapp.cn/features/ 在组件=>通用中找到。

快应用的脚本
快应用的js脚本用的就是Node.js的语法，当开发几个界面之后，这一套js逻辑并不是很麻烦，大概就是以下几点：

• 声明变量
• 生命周期的函数
• 界面的一些事件的响应方法

这边需要对Node.js有基本的了解。

5、使用系统提供的接口

如果要做界面跳转、加载H5界面、网络请求等操作，那就必须配置接口。
以一个用webView加载H5界面作为例子：
在manifest.json配置需要添加的接口

  "features": [
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.fetch" },
    { "name": "system.share"},
    // system.webview为访问
    { "name": "system.webview"}
  ]

以上不仅配置了system.webview，说明还用到了其他的很多的系统接口。
使用web标签

然后跳转到这个界面就会去访问这个网址啦。

6、外部js文件的调用来封装网络请求框架

有时候也需要封装一些公用的组件来提供各个地方调用，比如网络请求的框架。如果不写公用的网络请求框架，在script中单独编写，代码类似如下：

 // 网络请求需要用到的组件
    import fetch from '@system.fetch'
    // 具体的方法
    getAritcle(){
            const self = this;
            const url = 'http://www.wanandroid.com/article/list/' + self.curPage + '/json'
            const ret = fetch.fetch({
                url,
                method: 'GET',
                responseType: 'json',
                success: function (ret) {
        
                }
            })
    }

如果要使用外部调用的js，代码将会如下：

先将网络请求的代码在外部js写好

image.png

这边是将getAritcle()的方法，写在home.js中。
然后调用home.js中的代码：
第一步要将home中的方法导入。

 // 将封装好的网络请求方法导入
    import {
        getArticle
    } from '../Common/Api/home'

第二步就是使用该方法：

     const self = this;
     getArticle(this.curPage)
      .then((ret) => {
                    // 正常的情况
      }).catch((err) => {
                    // 异常的情况
      })

这种方式封装好之后便可以多处调用，非常实用。
我并没写过js，以上的思路是来自张鸿洋的WanAndroid快应用，文章后面会将张鸿洋的快应用app地址贴出来

7、非常重要的调试工具

调式快应用也是非常重要的一部分，快应用调试器中打开usb调试，然后点击开始调试。

image.png

调试

在这里可以看到界面的布局和日志。和调试前端网页是一样的。
关于如何配置日志请看官网提供的地址：
https://doc.quickapp.cn/tutorial/getting-started/development-and-debugging.html

8、传包上线

如果第一次做快应用对快应用的上线绝对是懵逼的。不慌，里面的坑我已经踩过一部分了。
首先需要去注册各个平台的开发者账号：https://www.quickapp.cn/docCenter/post/71

8.1、签名文件

和开发原生的安卓程序一样，快应用也需要签名的，签名要用到openssl，这里有一个简单的方式去安装openssl。

• 第一步：在这个网站下载openssl安装工具并安装(这里指windows用户)：
  http://slproweb.com/products/Win32OpenSSL.html
  安装就是一路next点到底，最后有一个资助项目，这个可以不去资助。

• 第二步：添加环境变量
  找到安装openssl的路劲下的bin目录，添加到path中。
  

  

  image.png

• 第三步：监测是否安装成功
  在控制台输入openssl看看是不是下面的情况
  

  

  image.png

以上openssl就算安装完成。那么如何生成签名文件呢？
看下官方的文档吧：
https://doc.quickapp.cn/tools/compiling-tools.html

8.2、控制rpk的大小

当掌握到开发快应用的技巧之后，往往就控制不住自己的双手，慢慢的开始浪起来了，然后放各种图片，把界面做的那是花花绿绿，美不胜收。当经过测试的多轮测试没有bug之后，就有点扶不住墙了，感觉一切都在自己的控制之下，然而当你上传你的rpk发布时一句提示会秀得你头皮发麻：

image.png

没错，你的rpk要小于1M，此时你的心情应该是这样的：

image.png

主要是图片过多影响的，这个时候一些大图片就应该由服务器下载下来。不要再项目中放太多的图片，或者使用矢量图，iconfont等（注意：使用矢量图，和iconfont我并没有去测试过）。

8.3、提交一些必要的信息等待审核

在这个界面填写信息之后就可以提交审核啦。
https://www.quickapp.cn/myCenter/appManage/createApp

image.png

感觉我的应该能难通过审核。

9、多看快应用的官方文档和优秀的开源代码

我花了大概一个星期去学习快应用，主要的学习方式就是看文档。官方文档是非常重要的一个东西，里面基本将搭建环境到上线基本上都说得比较明白，接下来贴出快应用的官方文档地址。
https://doc.quickapp.cn/
当然也有很多优秀的程序员已经有关于快应用的开源代码了，我这边主要也是参考的张鸿洋的快应用：
http://www.wanandroid.com/blog/show/2096

10、本应用的代码地址

由于我也是刚开始学习快应用，可能写的东西并不是很好，还有很多地方可以优化，比如：分享操作可以提取出来做个一外部js调用，另外我对快应用的性能优化也是一无所知。如果你有兴趣看看我写的代码的话可以提供一些参考：
代码传送门：https://github.com/AxeChen/AxeChen_QuickApp （欢迎各位大佬给star）