快应用初探：写一个快应用练练手-华为开发者话题

快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。

研究了一个星期的快应用之后，然后写了一个简单的快应用，原本是想做一个玩Android的快应用，后来发现刚开始接触快应用的时候学习并不是很迅速，加上事情确实比较多，就只完成了一个练手的项目。如果你也在学习快应用，不如现在动手做一个小的快应用练练手吧。

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

项目的主要逻辑

界面截图

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

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

编码工具我选择的是vs code。也有其他的工具可供选择，具体可以看官网的链接：

3、非常重要的manifest.json

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

关于manifest.json：

4、界面的开发

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

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

<template>
  这里面填写一些界面的标签元素</template><style>
  这里里面是一些样式的编写</style><script>
  这里面是一些js脚本</script>

关于template：
关于style：
关于script：

快应用的标签元素

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

关于标签元素：在组件标签中可以找到这些标签的使用。

快应用的css样式

快应用的布局方式采用Flex布局，但是有些css样式在快应用中并不支持，这种一般在实际开发中才能知道，因为并不是看一遍文档就能记住的。

关于css样式：在组件=>通用中找到。

快应用的脚本

快应用的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标签

<template>
    <web src='http://xxxx' id='web'></web></template>

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

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地址贴出来