【學(xué)習(xí)打卡】OpenHarmony應(yīng)用開發(fā)之二維碼生成器

作者：堅(jiān)果

公眾號(hào)："大前端之旅"

OpenHarmony布道師，InfoQ簽約作者，CSDN博客專家，華為云享專家，阿里云專家博主，51CTO博客首席體驗(yàn)官，開源項(xiàng)目GVA成員之一，專注于大前端技術(shù)的分享，包括Flutter,鴻蒙，小程序,安卓，VUE，JavaScript。

QR code generator

本文展示了二維碼QRCode組件，以及TextInput的使用，實(shí)現(xiàn)了根據(jù)輸入內(nèi)容實(shí)時(shí)生成二維碼。

視頻教程

OpenHarmony應(yīng)用開發(fā)之二維碼生成器

OpenHarmony應(yīng)用開發(fā)之二維碼生成器演示視頻，中華有為！

應(yīng)用場(chǎng)景：

社交、移動(dòng)支付等涉及到方便利用二維碼傳播信息的場(chǎng)景。

如今，隨處可見的二維碼，極大的方便了消費(fèi)者，無論是進(jìn)行移動(dòng)支付還是和他人結(jié)成社交關(guān)系，都是可以通過二維碼進(jìn)行的。甚至有人會(huì)將自己的個(gè)人簡(jiǎn)歷、以及個(gè)人名片制作成為二維碼的形式，需要了解的人可以自行掃描二維碼，了解詳情。在進(jìn)行消息傳送的時(shí)候也會(huì)更加的方便。那么在鴻蒙開發(fā)中如何利用現(xiàn)有組件實(shí)現(xiàn)類似的二維碼生成效果，本文就帶大家了解。

相關(guān)概念

容器組件

Column

基礎(chǔ)組件

Text

TextInput

QRCode

通用屬性

邊框設(shè)置

尺寸設(shè)置

TS語(yǔ)法糖

搭建OpenHarmony環(huán)境

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以DaYu200開發(fā)板為例，參照以下步驟進(jìn)行：

獲取OpenHarmony系統(tǒng)版本：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）

以3.0版本為例：

搭建燒錄環(huán)境

完成DevEco Device Tool的安裝

完成Dayu200開發(fā)板的燒錄

搭建開發(fā)環(huán)境

開始前請(qǐng)參考工具準(zhǔn)備 ，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。

開發(fā)環(huán)境配置完成后，請(qǐng)參考使用工程向?qū)?創(chuàng)建工程（模板選擇“Empty Ability”），選擇eTS語(yǔ)言開發(fā)。

工程創(chuàng)建完成后，選擇使用真機(jī)進(jìn)行調(diào)測(cè) 。

開發(fā)教學(xué)

創(chuàng)建好的 eTS工程目錄

新建工程的ETS目錄如下圖所示。

各個(gè)文件夾和文件的作用：

index.ets：用于描述UI布局、樣式、事件交互和頁(yè)面邏輯。

app.ets：用于全局應(yīng)用邏輯和應(yīng)用生命周期管理。

pages：用于存放所有組件頁(yè)面。

resources：用于存放資源配置文件。

接下來開始正文。

我們的主要操作都是在在app.ets文件中，然后我將用不到10分鐘的時(shí)間，帶大家實(shí)現(xiàn)這個(gè)功能。

在開始之前大家可以先預(yù)覽一下我要實(shí)現(xiàn)的界面效果，如下圖所示：

我們可以分析一下界面布局，并進(jìn)行一個(gè)簡(jiǎn)單的拆解：

拆解

整體拆解

根據(jù)設(shè)計(jì)圖，可以看出整體是分行展示的，因此最外層是一個(gè)Column元素

第一行為標(biāo)題，用Text就可以；

第二行是一個(gè)輸入框，用TextInput就可以；

第三行是一個(gè)二維碼，用QRCode就可以；

每一行之間的間隔，則可以考慮用通用屬性中的尺寸設(shè)置來操作。

通過上面這樣一步一步的分析后，基本上對(duì)大致的布局有了一個(gè)了解，最外層的控件大致選對(duì)（只要能實(shí)現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。

具體布局

具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如間隔，邊框，當(dāng)前組件尺寸設(shè)置等一些特殊情況，基本上就是嵌套，一層一層去實(shí)現(xiàn)。

運(yùn)行效果圖如下所示。

代碼結(jié)構(gòu)

最后是完整代碼：

// @ts-nocheck

@Entry

@Component

struct QRCodeExample {

@State private desc: string = '跟著堅(jiān)果學(xué)OpenHarmony'

private title: string = '二維碼生成器'

build() {

Column() {

Text(this.title).margin(30).fontColor(Color.Orange).fontSize(50).fontWeight(FontWeight.Bold)

TextInput({ placeholder: '請(qǐng)輸入要生成的內(nèi)容', }).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

})

}

}

}

恭喜您

在本文中，我主要為大家講解了如下ArkUI（基于TS擴(kuò)展的類Web開發(fā)范式）基礎(chǔ)組件

容器組件

Column

基礎(chǔ)組件

Text

TextInput

QRCode

通用屬性

邊框設(shè)置

尺寸設(shè)置

通過一個(gè)代碼示例，實(shí)現(xiàn)一個(gè)二維碼生成器，希望通過本教程，各位開發(fā)者可以對(duì)以上基礎(chǔ)組件具有更深刻的認(rèn)識(shí)。

審核編輯：符乾江