什么是快应用?

对于终端用户

快应用是一种新型免安装应用。不仅具有安卓应用体验好、功能强的优点,还具备HTML5网页自动更新、占用内存少的便捷。用户可以将喜欢的快应用添加至桌面,方便再次访问。

对于开发者

快应用是一种基于行业标准开发的新型免安装应用,使用前端技术开发成本低,可以调用设备能力用户体验好。拥有十大手机厂商的助力,获取新客成本低、留存率高。

有哪些优势

您将开发什么

在本次Codelab中,您将使用华为快应用IDE和图片处理的API接口,开发一个图片处理的快应用,该快应用可以对拍照的图片进行裁剪,裁剪后的照片可以分享出去。

您将会学到什么

安装Node

如果没有安装node.js,或者node的版本<6,请前往NodeJS官网下载安装。

获取安装包

Win64:DevecoQuickAppIDE-V2.1.0-Win64.exe
Mac:DevecoQuickAppIDE-20191113-V2.1.dmg

安装快应用IDE

Win64:点击 DevecoFastAppIDE-V1.4.1-Win64.exe 进行安装。
Mac:请参见"MAC系统安装华为快应用IDE指导"。

Win64:QuickAppPCAssistant-1.0.3-20190903.exe
Mac:QuickAppPCAssistant-20190903-V1.0.dmg

1.以管理员身份打开快应用IDE,菜单选择"文件 > 新建项目 > 新建快应用项目"。
2.在"新建项目"界面按照以下指导填写相关信息后,点击"确定",创建新的项目。

  1. 将手机与电脑成功连接,并打开手机的"开发者调试"模式和"USB调试"。
  2. 连接成功后,IDE将提示在手机上安装快应用Loader,点击"安装"。
  3. 在菜单栏的配置下拉框选择"rpk入口Hello",点击"实时预览"按钮,在弹出的Inspector页面可预览工程的效果。

编辑Template的内容

  1. 打开src/Hello/hello.ux 文件,并替换template部分的代码。
  2. 增加一个图片组件和三个按钮到template中,并设置图片组件的src和class属性,设置按钮的class、 value和onclick属性。
    <template> <div class="container"> <image src="{{imgPath}}" class="img"></image> <div> <input type="button" class="btn" value="拍照" onclick="takePhoto" /> <input type="button" class="btn" value="编辑照片" onclick="editPhoto" /> <input type="button" class="btn" value="分享照片" onclick="sharePhoto"/> </div> </div> </template>

编辑Style的内容

替换hello.ux 文件中style部分的代码,增加图片和按钮的CSS样式。

<style> .container { flex-direction: column; justify-content: center; align-items: center; } .img { width: 90%; height: 700px; border: 1px solid #000000; } .btn { height: 80px; width: 200px; margin: 20px; background-color: #1e90ff; color: #ffffff; } </style>

编辑Script的内容

在Script内实现所有操作的逻辑处理,主要实现:拍照、保存图片、编辑图片和分享图片。

<script> import media from '@system.media'; import image from '@system.image'; import share from '@system.share'; module.exports = { data: { imgPath: '' }, takePhoto() { let that = this; media.takePhoto({ success: function (data) { console.log('handling success: ' + data.uri); that.imgPath = data.uri; }, fail: function (data, code) { console.log('handling fail, code = ' + code + ", msg : " + data); } }); }, editPhoto() { let that = this; image.editImage({ uri: this.imgPath, success: function (data) { console.log(data.uri); that.imgPath = data.uri; }, fail: function (data, code) { console.log('handling fail, code = ' + code + ", msg : " + data); } }) }, sharePhoto() { share.share({ type: "image/jpeg", data: this.imgPath, success: function (data) { console.log("handling success"); }, fail: function (data, code) { console.log("handling fail, code = " + code + ", msg : " + data); } }) } } </script>

编辑Manifest文件

打开Manifest.json文件,声明需要使用的内容。

"features": [ {"name": "system.media"}, {"name": "system.image"}, {"name": "system.share"} ],
  1. 手机和电脑成功连接后,在菜单栏的配置下拉框选择"rpk入口Hello",点击"实时预览"按钮。
  2. 在弹出的Inspector页面点击"拍照"。
  3. 使用手机拍张照片,拍完后照片将加载到照片区域。
  4. 点击"编辑照片"对照片进行编辑。
  5. 编辑完成后,点右上角√返回图片界面。点击"分享照片"就可将分享图片。

选择需要调试的文件后,点击调试开始按钮开始调试。

查看调试服务启动过程中控制台的日志输出。

调试进程启动完成,启动调试窗口。

再次点击调试按钮,关闭之前的调试窗口。

菜单选择"构建 > 打包正式版本"。

在右下角出现创建签名文件的提示,点击"创建签名"。

在弹出框中输入相关信息,点击"创建"生成正式证书。

打包结束后,将自动打开项目工程的dist目录,该目录下的rpk包可以提交给华为进行审核。审核通过后,该快应用即可在华为应用市场上架。

将手机通过USB连接PC

手机必须打开"开发者模式"和"USB调试"。

打开华为快应用加载器PC助手,推送快游戏到手机运行。

在手机上查看快应用的运行效果。

祝贺您,您已经成功地开发和运行您的第一个快应用!

已复制代码