内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

快应用初探之写一个快应用练练手

2018-09-27 17:53 出处:清屏网 人气: 评论(0

快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装,即点即用,享受原生应用的性能体验。研究了一个星期的快应用之后,然后写了一个简单的快应用,原本是想做一个玩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>
  这里面填写一些界面的标签元素
</template>
<style>
  这里里面是一些样式的编写
</style>
<script>
  这里面是一些js脚本
</script>

关于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

快应用的标签元素

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

关于标签元素: 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标签

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

7、非常重要的调试工具

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

image.png

调试

在这里可以看到界面的布局和日志。和调试前端网页是一样的。

关于如何配置日志请看官网提供的地址:

https://doc.quickapp.cn/tutorial/getting-started/development-and-debugging.html

8、传包上线

如果第一次做快应用对快应用的上线绝对是懵逼的。不慌,里面的坑我已经踩过一部分了。

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)

分享给小伙伴们:
本文标签: 快应用

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号