什么是快应用?

对于终端用户:
快应用是一种新型免安装应用。不仅具有安卓应用体验好、功能强的优点,还具备HTML5网页自动更新、占用内存少的便捷。用户可以将喜欢的快应用添加至桌面,方便再次访问。
对于开发者:
快应用是一种基于行业标准开发的新型免安装应用,使用前端技术开发成本低,可以调用设备能力,用户体验好。拥有十大手机厂商的助力,获取新客户成本低、留存率高。

快应用的优势

快应用IDE

华为快应用IDE提供全流程开发、构建、调测、测试、发布能力。
华为快应用IDE提供新闻、阅读、外卖、电商、儿童教育等行业模板,一键生成快应用代码,最快3天即可开发一个快应用。

您将开发的

在这个代码库中,您将利用华为快应用IDE和其提供的一些图片处理API接口,开发一个图片处理快应用,您的应用程序的特点:

您将会学到什么

您将需要的

在开始我们的开发之前需要搭建快应用开发环境,您需要的工具已经在您将需要的里面列出,具体可以参考链接,有详细的介绍:https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool

建立第一个Hello World快应用

打开华为快应用IDE

选择文件—新建项目—新建快应用项目

快应用IDE里面提供了一些Demo,选择第一个Hello World,点击确定。

工程目录详解

建好的工程目录结构如上图所示,主要的文件都在src目录下,common文件夹下存放一些公用的文件,hello.ux是实现Hello World的功能代码文件,所有的依赖都在manifest.json文件中配置。

代码解析

hello.ux

<template> <div class="container"> <text class="title"> Hello{{title}} </text> </div> </template> <style> .container { flex-direction: column; justify-content: center; align-items: center; } .title { font-size: 100px; } </style> <script> module.exports = { data: { title: 'World' }, onInit() { this.$page.setTitleBar({ text: 'menu', textColor: '#ffffff', backgroundColor: '#007DFF', backgroundOpacity: 0.5, menu:true }) } } </script>

Hello.ux文件完成整个工程的代码逻辑功能实现,主要分为三个部分:<template>、<style>、<script>。其中template标签中决定了页面上有哪些组件,<style>标签中设计页面中组件的布局,也可以映入css文件定义样式,<script>标签中处理主要的操作逻辑,调用接口等。

Manifest.json

{ "package": "com.huawei.helloworld", "name": "HelloWorld", "versionName": "1.0.0", "versionCode": 1, "icon": "/Common/logo.png", "minPlatformVersion": 1040, "features": [], "permissions": [ { "origin": "*" } ], "config": {}, "router": { "entry": "Hello", "pages": { "Hello": { "component": "hello" } } }, "display": { "pages": { "Hello": { "titleBarText": "TitleBar" } } } }

Manifest.json文件中保存的是工程的配置信息,当调用一些新的接口的时候,需要在manifest.json文件中的feature中将那么属性设为相应的接口名称。

连接真机运行

USB连接

推荐使用USB连接
1、请确保手机已经通过USB连接电脑,并打开"开发者模式"。具体操作请参照"华为手机如何打开开发者选项"处理(一般是打开手机设置—我的设备—全部参数—不停点击版本号,即可打开开发者模式。在打开更多设置—开发者选项—打开开发者选项—打开usb调试即可)。
2、请确认adb与手机连接成功。
1)打开终端Terminal,将目录切换至IDE目录 {installDir}/resource/app/extensions/deveco-debug/lib/toolkit。
2)执行 adb devices 命令。

● 若 List of devices attached 下出现手机信息并且以device结尾,则说明adb已监控到手机。

● 若List of devices attached 无信息输出,手机编号后结尾为offline,则表示adb没有与手机连接成功,此时进行调试、预览、inspect均会提示无法找到手机的错误。建议重启手机或者撤销USB的授权后重新插入手机。

若打开设备不成功的话

命令行执行:

netstat -ano | findstr "5037"

找到对应进程的PID号,打开任务管理器杀死对应进程,再到对应目录下执行 adb.devices,即可解决,点击运行按钮,成功运行!

运行

点击IDE菜单栏上面的运行按钮,运行程序,结果如下:

下图是工程功能结构图:

Template

页面的主要组件包括buttonimage两个部分:
其中button组件包括拍照、保存图片、选择图片、编辑图片几个按钮,分别完成对应的图片功能操作。
image组件用于展示操作效果,可以展示pngjpggif等格式的图片。

Style

Style标签负责完成页面组件的布局,将一些通用的样式设置配置到css文件中,过程中将页面的配置和多个按钮的配置放到同一个css文件中,image组件单独放到style标签中。

Script

Script标签完成所有的操作逻辑处理,负责调用所有的接口,主要调用四个接口,包括:拍照、保存图片、选择图片和编辑图片。

代码解析

image.ux

<template> <!-- Only one root node is allowed in template. --> <div class="container"> <div class="item-container"> <image src="{{photoUri}}" class="image"></image> <input type="button" class="btn" onclick="takePhoto" value="`拍摄照片`" /> <input type="button" class="btn" onclick="SavePhoto" value="`保存刚拍摄的照片到相册`" /> <input type="button" class="btn" onclick="pickPhoto" value="`选取图片`" /> <input type="button" class="btn" onclick="editImage" value="`编辑图片`" /> <input type="button" class="btn" onclick="saveEditPhoto" value="`保存编辑的图片到相册`" /> </div> </div > </template> <style> @import '../Common/css/common.css'; .item-container { margin-top: 30px; margin-right: 60px; margin-left: 60px; flex-direction: column; } .image { margin: 50px 0px; width: 650px; height: 550px; background-color:#fffafa; } .title { font-size: 60px; } input { font-size: 60px; color: #00bfff; padding: 20px; } </style>

这部分的代码功能完成主要的界面UI设计,<template>中定义了五个button组件,分别控制对应的onclick事件响应消息,另外,image组件完成效果的展示。需要注意的是,在<template>里面只能有一个根节点,可以在主容器里面定义子容器,然后用对应的div标签限制范围。

<style>标签里面的样式设置包括两个部分,通用样式配置在common.css文件中,通过import方法引入,其余组件另外配置在<style>标签内,详细介绍下style样式设置。

Style样式设置

common.css

.container{ flex: 1; flex-direction: column; } .page-title-wrap { padding-top: 50px; padding-bottom: 80px; justify-content: center; } .page-title{ padding-top: 30px; padding-bottom: 30px; padding-left: 40px; padding-right: 40px; border-color: #bbbbbb; color: #bbbbbb; border-bottom-width: 2px; } .btn { height: 80px; text-align: center; border-radius: 5px; margin-right: 60px; margin-left: 60px; margin-bottom: 50px; color: #ffffff; font-size: 30px; background-color: #0faeff; }

common.css里面定义了container容器和page页面的主要样式还有button组件的尺寸等信息,这些都是页面的公共部分和主要组件。
其余的小部分组件样式单独设置在<style>标签内,包括子容器item-container、image等,主要也是排列、尺寸和颜色的设置,下图是布局结果:

script标签内部处理所有操作逻辑,在本工程中主要调用图片处理的接口,完成对应的图片操作。

Manifest.json配置

"features": [ { "name":"system.image" }, { "name":"system.media" }, { "name":"system.prompt" } ],

manifest.json文件中的通用配置基本都一样,调用相应的接口只需在features属性中设置接口的name值对,主要用到的接口包括media、imagepromote,media可以调用手机摄像头完成拍照和保存,image用于编辑图片,promote可以将操作信息弹出在屏幕上。

takePhoto

takePhoto: function () { var that = this; media.takePhoto({ success: function (ret) { that.pathPhotoSave = ret.uri; that.photoUri = ret.uri; }, fail: function (erromsg, errocode) { prompt.showToast({ message: "takePhoto fail------" + errocode + ': ' + erromsg }) console.log('media.takePhoto----------' + errocode + ': ' + erromsg) }, cancel: function () { console.log('media.takePhoto----------cancel') }, complete: function () { console.log('media.takePhoto----------complete'+ " "+ that.photoUri) } }) },

通过调用media.takePhoto()接口,打开系统摄像头,成功返回后将图片的uri设置为要保存到手机的地址:pathPhotoSave以及image组件显示的uri:photoUri弹屏输出操作结果

savePhoto

SavePhoto: function () { var that = this; media.saveToPhotosAlbum({ uri: that.pathPhotoSave, success: function () { console.log('media.saveToPhotosAlbum----------success') }, fail: function (erromsg, errocode) { prompt.showToast({ message: "media.saveToPhotosAlbum fail------" + errocode + ': ' + erromsg }) console.log('media.saveToPhotosAlbum----------' + errocode + ': ' + erromsg) }, complete: function () { prompt.showToast({ message: "media.saveToPhotosAlbum success" }) console.log('media.saveToPhotosAlbum----------complete'+that.pathPhotoSave) } }) },

通过调用media.saveToPhotosAlbum()接口,将media.takePhoto()接口里面获取的pathPhotoSave赋值给uri并弹屏输出操作结果

pickPhoto

pickPhoto: function () { var that = this; media.pickImage({ success: function (data) { that.pathPhotoPick = data.uri that.photoUri = data.url }, fail: function (erromsg, errocode) { prompt.showToast({ message: "pickImage fail------" + errocode + ': ' + erromsg }) console.log('media.pickImage----------' + errocode + ': ' + erromsg) }, cancel: function () { console.log('media.pickImage----------cancel') }, complete: function () { prompt.showToast({ message: "pickImage success!"}) console.log('media.pickImage----------complete'+" "+that.photoUri) } }) },

通过调用media.pickImage()接口,选择手机图片,操作成功后将图片的uri设置到Data里面的pathPhotoPick和photoUri属性并将图片展示在image组件内部弹屏输出操作结果信息

editImage

editImage: function () { var that = this; image.editImage({ uri: "/Common/erya.png", success: function (data) { console.log(data.uri); // that.editimageimage = data.uri; that.photoUri = data.uri that.pathPhotoEdit = data.uri; }, cancel: function () { console.log("edit cancel"); prompt.showToast({ message: "edit cancel" }) }, fail: function (data, code) { console.log("edit fail, code=" + code); prompt.showToast({ message: "edit fail, code=" + code }) } }) },

通过调用image.editImage()接口,将选择的图片的uri赋值给接口所需的uri,操作成功后将pathPhotoEdit属性设置为编辑的图片uri便于后面保存编辑的图片到手机相册,将弹屏输出操作结果信息。

saveEditPhoto

saveEditPhoto:function() { var that = this; media.saveToPhotosAlbum({ uri: that.pathPhotoEdit, success: function () { console.log('media.saveToPhotosAlbum----------success') }, fail: function (erromsg, errocode) { prompt.showToast({ message: "media.saveToPhotosAlbum fail------" + errocode + ': ' + erromsg }) console.log('media.saveToPhotosAlbum----------' + errocode + ': ' + erromsg) }, complete: function () { prompt.showToast({ message: "media.saveToPhotosAlbum success" }) console.log('media.saveToPhotosAlbum----------complete'+that.pathPhotoEdit) } }) }

通过调用media.saveToPhotosAlbum()接口将前面保存的pathPhotoEdit属性设置对应的uri中完成保存弹屏输出操作结果

完成功能代码编写之后,需要测试代码功能的正确性,下面给出了各个部分接口的代码测试结果:

takePhoto

调用media.takePhoto()接口,打开系统摄像头,完成拍照,并将照片显示在对应的image控件上。

savePhoto

调用media.saveToPhotosAlbum()接口,将照片保存到系统相册,并弹屏显示操作结果。

pickPhoto

调用media.pickImage()接口,可以调取对应的系统相册里面的照片,将取得的照片显示在image控件上,弹屏显示操作结果。

editImage

调用image.editImage()接口,可以完成图片的编辑,主要包括两个功能,一个是裁剪图片,另一个是旋转图片,可以选择撤销编辑。

saveEditPhoto

编辑图片完成之后,编辑的图片会显示image控件上,再调用media.saveToPhotosAlbum()接口,将图片保存到系统相册,弹屏输出操作结果。

祝贺您,您已经成功完成了一个图片处理快应用的开发!

您已经学会了如何从搭建快应用的开发环境,到调用接口完成对应功能的实现,通过真机调试体会快应用的便捷以及与安卓应用的区别。

现在,您已经知道了开发一个快应用所需的关键步骤。

已复制代码