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

1. 介绍

简介

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

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

您将建立什么

在本次Codelab中，您将使用快应用IDE开发一个简易浏览器客户端，实现功能要求如下：

浏览器需要有输入栏，输入内容，可以通过开发者联盟文档网站搜索。
需要支持扫描，扫描网页的二维码，可以跳转到对应的网页。
退出浏览器时，需要保存当前的浏览地址。重启应用后，能打开上次退出时的页面。

您将会学到什么

如何搭建快应用的开发环境。
如何实现页面布局。
如何用web组件实现网页功能。
如何调用快应用的二维码接口和数据存储接口。
如何使用真机调试快应用。

2. 您需要什么

硬件要求

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

软件要求

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

需要的知识点

Android基础开发能力。

3. 能力接入准备

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

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

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

4. 创建项目

打开华为快应用IDE，在欢迎界面导航选择"新建项目 > 快应用"，选择"手机与平板"，点击"下一步"。
选择"通用模板"页签，选择"Hello World"模板，点击"下一步"。
配置快应用项目信息后，点击"确定"。
- 应用名称：填写"quickappcodelabdemo"。
- 应用包名：填写"com.huawei.quickappdemo"。
- 工作空间：选择代码存放的硬盘路径。

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

5. 连接真机运行

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

6. 开发快应用

编辑Template的内容

网页整体采用竖向布局，分为输入区和网页展示区两部分。

输入区采用横向布局，分为三部分：扫一扫、输入栏和搜索按钮。

网页展示区使用 web组件实现。可使用数据绑定动态更新url，方便后续网页的加载。
页面ux代码如下：


<template>
  <div class="container">
    <div class="header">
      <div class="scan" onclick="scanCode"><text>scan</text></div>
      <div class="input"><input id="selectionInput" value="{{searchWord}}" onchange="changeWord" /></div>
      <div class="search" onclick="search"><text>search</text></div>
    </div>
    <div class="content">
      <web src="{{url}}" onpagefinish="onPageFinish" id="web"></web>
    </div>
  </div>
</template>

编辑Style的内容

替换hello.ux 文件中style部分的代码，增加输入区和网页展示区的CSS样式。


<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
  }
  .content {
    width: 100%;
    height: 100%;
    margin-top: 50px;
  }
  .header div {
    border: 1px solid #afafff;
    padding: 20px;
  }
  .header .scan,
  .header .search {
    width: 20%;
  }
  .header .scan text,
  .header .search text {
    margin: 0 auto;
  }
  .header input {
    width: 60%;
  }
</style>

编辑Script的内容

在Script内实现所有操作的逻辑处理，主要实现：扫一扫、记录输入的内容、搜索和获取当前网址并存储。


<script>
  import barcode from '@system.barcode';
  import storage from '@system.storage';
  module.exports = {
    data: {
      componentData: {},
      //the following is the default webpage
      url: 'https://developer.huawei.com/consumer/cn/quickApp',
      searchWord: '',
    },
    //scan
    scanCode() {
      let that = this;
      barcode.scan({
        success: function (data) {
          console.log('handling success: ' + data.result);
          that.url = data.result;
        },
        fail: function (data, code) {
          console.log('handling fail, code = ' + code);
        }
      })
    },
    //record the input
    changeWord(e) {
      this.searchWord = e.value;
    },
    //search
    search() {
      this.$element('selectionInput').focus({ focus: false })
      this.url = "https://developer.huawei.com/consumer/cn/doc/search?val=" + this.searchWord;
    },
    //get the current url and store it
    onPageFinish(e) {
      console.log('pagefinish: ' + e.url);
      storage.set({
        key: 'webUrl',
        value: e.url,
        success: function (data) {
          console.log("handling success");
        },
        fail: function (data, code) {
          console.log("handling fail, code = " + code);
        }
      })
},
   //the onBackPress callback needs to be implemented when the webpage goes back
    onBackPress() {
      this.$element('web').canBack({
        callback: function (e) {
          if (e) {
            this.$element('web').back();
          } else {
            let router = require('@system.router');
            router.back()
          }
        }.bind(this)
      })
      return true;
    },
    //obtain the stored url when reopening the webpage
    onInit() {
      let that = this;
      storage.get({
        key: 'webUrl',
        success: function (data) {
          console.log("handling success:", data);
          that.url = data;
        },
        fail: function (data, code) {
          console.log("handling fail, code = " + code);
        }
      })
      this.$page.setTitleBar({
        text: 'BrowserDemo',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    }
  }
</script>

编辑Manifest文件

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


"features": [
  {"name": "system.barcode"},
  {"name": "system.storage"}],

7. 运行预览效果

手机成功连接电脑后，点击"运行"。
加载首页将打开设置的默认网页（样例以快应用官方文档网站作为默认网页）。

输入关键字"快应用"，点击"search"，打开搜索结果的页面。
点击"×"，点击IDE中"运行"重启应用，会进入上次退出时的页面。
点击"scan"，能启动手机摄像头扫描。
扫描如下二维码，能顺利打开网页。

8. 真机调试

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

9. 发布体验版本

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

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