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

简介

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

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

您将建立什么

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

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

您将会学到什么

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

硬件要求

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

软件要求

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

需要的知识点

Android基础开发能力。

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

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

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

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

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

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

编辑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"}],

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

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

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

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

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

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

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

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

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

快应用指南

快应用API参考

Code copied