您的第一个快应用（初级版）

简介

快应用是一种基于行业标准开发的新型免安装应用，其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。

对开发者而言
成本低：使用相对简单的js和css开发语言，代码量仅占安卓原生应用的1/5。如有小程序，可直接转换，最快2天可完成。
流量蓝海：摆脱对某个APP的依赖，实现跨平台直接跳转；打通手机终端多场景。
业务提升：直达服务/内容，体验好路径短，提升业务数据，拉新、促活、提留存。
市场扶持：可获得华为推广渠道相关优质资源扶植。
对用户而言
不用安装：即点即用，将应用图标添加至桌面即可秒开服务。
节省空间：体积小，占用内存少，提升手机流畅度。
入口便捷：桌面图标、负一屏、快应用中心、应用市场等均可找到快应用。

您将建立什么

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

您将会学到什么

如何搭建快应用的开发环境。
如何调用快应用图片处理的接口。
如何使用真机调试快应用。

硬件要求

开发计算机（台式机或笔记本电脑），运行Windows或Mac操作系统。
华为手机，用于真机调试运行demo。

软件要求

Node6.X及以上版本（除8.0.X）
华为快应用IDE安装包（点击此处获取下载地址）
华为快应用IDE加载器安装包（点击此处获取下载地址）

需要的知识点

Android基础开发能力。

在正式开发快应用前，您需要完成以下准备工作：

注册成为开发者
创建快应用
安装开发工具

具体操作，请按照"快速开始"中的"前期准备"详细说明来完成。

打开华为快应用IDE，在欢迎界面导航选择"新建项目 > 快应用"，选择"手机与平板"，点击"下一步"。
选择"通用模板"页签，选择"Hello World"模板，点击"下一步"。
配置快应用项目信息后，点击"确定"。

应用名称：填写"quickappcodelabdemo"。
应用包名：填写"com.huawei.quickappdemo"。
工作空间：选择代码存放的硬盘路径。

至此，已经创建了一个快应用项目。

将测试手机使用USB数据线连接装有华为快应用IDE的电脑。打开测试手机的"开发者模式"，详细打开方式参见"华为手机如何打开开发者选项"。
连接成功后，选择需要编译调试的文件，点击"运行"。
在弹出页面选择运行设备，点击"确认"。
如果手机上没有安装快应用引擎，将在右下角弹出提示框，点击"安装"进行安装。已安装则跳过此步骤。
在弹出的手机模拟窗口可以查看编译后的效果。

编辑Template的内容

打开src/Hello/hello.ux文件，并替换template部分的代码。

增加一个图片组件和三个按钮到template中，并设置图片组件的src和class属性，设置按钮的class、 value和onclick属性。


<template>
<div class="container">
<image src="{{imgPath}}" class="img"></image>
<div>
  <input type="button" class="btn" value="take a photo" onclick="takePhoto" />
  <input type="button" class="btn" value="edit the photo" onclick="editPhoto" />
  <input type="button" class="btn" value="share the photo" 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"}
],

手机成功连接电脑后，点击"运行"。
在预览页面点击"take photo"。
使用手机拍张照片，拍完后照片将加载到照片区域。
点击"edit photo"对照片进行编辑。
编辑完成后，点右上角"√"返回图片界面。点击"share photo"就可分享图片。

选择需要调试的文件后，点击"调试"。
查看调试服务启动过程中控制台的日志输出。
调试进程启动完成，启动调试窗口。
再次点击调试按钮，关闭之前的调试窗口，日志输出"Debug service has been closed"。

通过发布体验版本，华为快应用IDE会生成体验码，其他用户使用"快应用研发助手"通过扫描二维码或者输入体验码，就可提前体验开发完的快应用。

使用IDE打开待体验的项目工程，使用华为帐号登录IDE。
点击"发布"。
在"版本发布"页面选择"体验版"后，点击"确认"。
如果没有登录，IDE右下角会弹出登录的提示。点击右上角"登录"，在登录页面输入已注册并认证的华为帐号和密码并登录。
如果没有签名，IDE右下角会弹出创建签名文件的提示，点击"创建签名"。
在"创建新的签名"页面中输入相关信息，点击"创建"生成证书。
在"打包体验版本"页面，可对版本名和版本号进行编辑，点击"下一步"。
体验版本的有效期为7天，用于获取体验版本的体验码有效期可以设置为15分钟、30分钟和60分钟三种，设置完成点击"提交"。
生成体验版本的二维码和体验码。
打开待体验的快应用。
场景1：扫码体验

手机浏览器扫描二维码。
在华为应用市场搜索并打开"快应用研发助手"，使用华为帐号登录。
在"快应用研发助手"中点击"+"，选择"扫描二维码添加"。

菜单选择"构建 > 打包正式版本"，打包release版本rpk。
在"打包正式版本"页面，可对版本名和版本号进行编辑。点击"确定"，打包完成后，会自动弹出项目工程的dist目录，该目录下的rpk包可以提交给华为进行审核。审核通过后，该快应用即可在华为应用市场上架。

干得好，您已经成功完成了codelab并学到了：

如何搭建快应用的开发环境。
如何调用快应用图片处理的接口。
如何使用真机调试快应用。

您可以阅读下面链接，了解更多相关的信息：

快应用指南

快应用API参考

Code copied