通过 您的第一个快应用(初级)的体验,您已经学会如何搭建快应用的开发环境,基本组件和接口的使用,以及使用真机调试快应用的过程。
现在我们将加大题目难度,您将使用快应用IDE和更多快应用的接口,开发一个简易浏览器客户端,实现功能要求如下:

  1. 浏览器需要有输入栏,输入网址后可以跳转到对应网页;输入内容,可以通过百度搜索。
  2. 输入栏需要支持扫描,扫描网页的二维码,可以跳转到对应的网页。
  3. 退出浏览器时,需要保存当前的浏览地址。重启应用后,能打开上次退出时的页面。

安装Node

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

获取安装包

Win64:DevecoQuickAppIDE-V3.0.1-Win.exe
Mac:DevecoQuickAppIDE-V3.0.1-Mac.dmg

安装快应用IDE

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

Win64:QuickAppPCAssistant-V2.2.4-Win64.exe
Mac:QuickAppPCAssistant-V2.2.4-Mac.dmg

1. 以管理员身份打开快应用IDE,菜单选择"文件 > 新建项目 > 新建快应用项目"。

2. 在"新建项目"界面按照以下指导填写相关信息后,点击"确定",创建新的项目。

  1. 将手机与电脑成功连接,并打开手机的"开发者调试"模式和"USB调试"。
  2. 连接成功后,IDE将提示在手机上安装快应用Loader,点击"安装"。
  3. 在菜单栏的配置下拉框选择"rpk入口Hello",点击"实时编译"按钮,在右侧可预览工程的效果。
  1. 网页页面ux文件采用竖向布局,分为输入区和网页展示区两部分。
    <div class="container"> <div class="header"> ...输入区实现代码 </div> <div class="content"> <web src="{{url}}"></web> </div> </div>
  2. 输入区采用横向布局,分为三部分:扫一扫、输入栏和搜索按钮。
    <div class="scan" ><text>扫一扫</text></div> <div class="input" ><input/></div> <div class="search" ><text>搜索</text></div>
  3. 网页展示区使用 web组件实现。可使用数据绑定动态更新url,方便后续网页的加载。组件使用方法请参见:web组件
  4. "扫一扫"功能参考 二维码 接口实现。
    var that = this; barcode.scan({ success: function (ret) { that.url = "https://m.baidu.com/s?wd=" + ret.result }, fail: function (erromsg, errocode) { console.error(errocode + ': ' + erromsg); } })
  5. "扫一扫"和"搜索"功能需监听控件的click事件,以响应用户点击的动作。
  6. 退出时保存当前浏览地址,重启后打开退出时页面的实现分如下几步:
    a) 使用 web组件 的pagefinish事件获取当前网址。
    b) 使用 数据存储 的set方法保存当前网站。
    c) 重新打开网页时,在页面的onInit事件中,使用 数据存储 的get方法获取保存的网址。
  7. 当网页后退时,注意需要实现页面的onBackPress回调,示例代码如下:
    onBackPress() { this.$element(‘xxx').canBack({ callback: function (e) { if (e) { this.$element(‘xxx').back(); } else { let router = require('@system.router'); router.back() } }.bind(this) }) return true; }

开发过程中,对于有问题的文件可以进行调试定位问题。

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

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

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

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

  1. 手机和电脑成功连接后,在菜单栏的配置下拉框选择"rpk入口Hello",点击"实时编译"按钮。
  2. 加载首页将打开设置的默认网页(样例以百度作为默认网页)。
  3. 输入关键字"快应用",点击搜索,打开搜索结果的页面。
  4. 点击"扫一扫",能启动手机摄像头扫描。
  5. 扫描如下二维码,能顺利打开网页。

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

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

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

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

将手机通过USB连接PC

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

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

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

祝贺您,您已经成功地完成浏览器客户端的开发!

已复制代码