OpenHarmony应用开发之二维码生成器

作者：坚果公众号："大前端之旅" OpenHarmony布道师，InfoQ签约作者，CSDN博客专家，华为云享专家，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，JavaScript。

QR code generator

本文展示了二维码QRCode组件，以及TextInput的使用，实现了根据输入内容实时生成二维码。

视频教程

OpenHarmony应用开发之二维码生成器演示视频，中华有为！

应用场景：

社交、移动支付等涉及到方便利用二维码传播信息的场景。

如今，随处可见的二维码，极大的方便了消费者，无论是进行移动支付还是和他人结成社交关系，都是可以通过二维码进行的。甚至有人会将自己的个人简历、以及个人名片制作成为二维码的形式，需要了解的人可以自行扫描二维码，了解详情。在进行消息传送的时候也会更加的方便。那么在鸿蒙开发中如何利用现有组件实现类似的二维码生成效果，本文就带大家了解。

搭建OpenHarmony环境

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以DaYu200开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）以3.0版本为例：

img

搭建烧录环境
1. 完成DevEco Device Tool的安装
2. 完成Dayu200开发板的烧录
搭建开发环境
1. 开始前请参考?工具准备，完成DevEco Studio的安装和开发环境配置。
2. 开发环境配置完成后，请参考?使用工程向导创建工程（模板选择“Empty Ability”），选择eTS语言开发。
3. 工程创建完成后，选择使用?真机进行调测。

开发教学

创建好的 eTS工程目录

新建工程的ETS目录如下图所示。

img

各个文件夹和文件的作用：

index.ets：用于描述UI布局、样式、事件交互和页面逻辑。
app.ets：用于全局应用逻辑和应用生命周期管理。
pages：用于存放所有组件页面。
resources：用于存放资源配置文件。

接下来开始正文。

我们的主要操作都是在在app.ets文件中，然后我将用不到10分钟的时间，带大家实现这个功能。

在开始之前大家可以先预览一下我要实现的界面效果，如下图所示：

image-20220627080950668

我们可以分析一下界面布局，并进行一个简单的拆解：

拆解

image-20220627082426616

整体拆解

根据设计图，可以看出整体是分行展示的，因此最外层是一个Column元素

第一行为标题，用Text就可以；
第二行是一个输入框，用TextInput就可以；
第三行是一个二维码，用QRCode就可以；

每一行之间的间隔，则可以考虑用通用属性中的尺寸设置来操作。

通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。

具体布局

具体布局设计到一些细节的地方，例如间隔，边框，当前组件尺寸设置等一些特殊情况，基本上就是嵌套，一层一层去实现。

运行效果图如下所示。

image-20220627080950668

代码结构

image-20220627083243195

最后是完整代码：

代码语言：javascript复制

// @ts-nocheck
@Entry
@Component
struct QRCodeExample {
  @State private desc: string = '跟着坚果学OpenHarmony'
   private title: string = '二维码生成器'
  build() {
    Column() {
      Text(this.title).margin(30).fontColor(Color.Orange).fontSize(50).fontWeight(FontWeight.Bold)
      TextInput({ placeholder: '请输入要生成的内容', }).fontSize(36).enterKeyType(EnterKeyType.Go).
      onChange((value) => {
        this.desc = value;
      }).height(80).margin({
        top: 40,
        left: 16,
        right: 16
      })
      QRCode(this.desc)
        .color(Color.Orange)
        .width(200)
        .height(200)
        .margin({ top: 50 })
        .border({
          width: 12, color: Color.Pink, style: BorderStyle.Dotted
        })
    }
  }
}

恭喜您

image-20220627080656208

在本文中，我主要为大家讲解了如下ArkUI（基于TS扩展的类Web开发范式）基础组件

容器组件

Column

基础组件

Text
TextInput
QRCode

通用属性

边框设置
Column

通过一个代码示例，实现一个二维码生成器，希望通过本教程，各位开发者可以对以上基础组件具有更深刻的认识。

image ode openharmony textinput 二维码

0 人点赞

OpenHarmony应用开发之二维码生成器