OpenHarmony数据转码应用开发实战（中）

1 背景

对于刚入门OpenHarmony开发的小伙伴来说，如果有一个合适的实战项目来练手，对自身的技术能力提升是非常有帮助的，本文将以一个小项目——数据转码应用，来讲解应用开发全流程。

在《OpenHarmony数据转码应用开发实战（上）》中我们讲述了项目的需求、设计以及项目创建、UI界面开发，本篇将重点讲解转码工具包的实现和UI组件数据绑定。

2 转码工具包

编码时推荐单独创建包路径，不要与页面UI写在一起，这样便于维护和代码的复用。

我们创建/entry/src/main/ets/MainAbility/utils/numConvertUtil.ets，然后在index.ets页面中引入。工具包将导出一个工具对象，每个方法实现一个转码需求，代码如下：

__const __JS\_TAG: string = 'MainAbility/utils/numConvertUtil: ';

__export default __\{

/\*\*
\* 10进制转16进制,并补零
\* [url=home.php?mod=space&uid=3142012]@param[/url] num
\* @param len = 2
\*/
dec2hex: __function __\(numStr: string, len: number = 2\) \{
console\.log\(JS\_TAG \+ 'dec2hex ' \+ numStr\)
__let __result: string = Number\(numStr\)\.toString\(16\)\.toUpperCase\(\)
result = __this__\.addZero\(result, len\)
__return __result
\},

/\*\*
\* 16进制转10进制
\* @param num
\*/
hex2dex: __function __\(numStr: string\) \{
console\.log\(JS\_TAG \+ 'hex2dex ' \+ numStr\)
__return __parseInt\(numStr, 16\)\.toString\(\)
\},

/\*\*
\* 16进制转2进制
\* @param num
\* @param len
\*/
hex2bin: __function __\(numStr: string, len: number = 2\) \{
__let __hexNum: number = parseInt\(numStr, 16\)
__let __result: string = Number\(hexNum\)\.toString\(2\)
result = __this__\.addZero\(result, len\)
__return __result
\},

/\*\*
\* 2进制转16进制
\* @param num
\* @param len
\*/
bin2hex: __function __\(numStr: string\) \{
__let __num: number = parseInt\(numStr, 2\)
__let __result: string = Number\(num\)\.toString\(16\)
result = __this__\.addZero\(result\)
__return __result
\},

/\*\*
\* 16进制转ASCII码
\* @param hexCharCodeStr
\*/
hex2ascii: __function __\(hexStr: string\) \{
__const __tempStr: string = hexStr\.trim\(\)
__const __rawStr: string = tempStr\.substr\(0, 2\)\.toLowerCase\(\) === '0x' ? tempStr\.substr\(2\) : tempStr
__const __len: number = rawStr\.length
__if __\(len % 2 \!== 0\) \{
__return __''
\}
__let __curCharCode
__const __resultStr = \[\]
__for __\(__let __i = 0; i < len; i = i \+ 2\) \{
curCharCode = parseInt\(rawStr\.substr\(i, 2\), 16\)
resultStr\.push\(String\.fromCharCode\(curCharCode\)\)
\}
__return __resultStr\.join\(''\)
\},

/\*\*
\* ASCII码转16进制
\* @param str
\*/
ascii2hex: __function __\(asciiStr: string\) \{
__if __\(asciiStr === ''\) \{
__return __''
\} __else __\{
__const __hexCharCode = \[\]
hexCharCode\.push\('0x'\)
__for __\(__let __i = 0; i < asciiStr\.length; i\+\+\) \{
hexCharCode\.push\(\(asciiStr\.charCodeAt\(i\)\)\.toString\(16\)\)
\}
__return __hexCharCode\.join\(''\)
\}
\},

addZero: __function __\(numStr: string, len: number = 2\) \{
__const __needFill: number = len \- numStr\.length
__let __result: string = numStr
__if __\(needFill > 0\) \{
__for __\(__let __i = 0; i < needFill; i\+\+\) \{
result = '0' \+ result
\}
\}
__return __result
\}
\}

3 绑定UI组件的事件输出结果

引入数据转码工具包 __import __numConvertUtil __from __'\.\./utils/numConvertUtil';

绑定按钮Click事件

Button\($r\('app\.string\.btnDec2hex'\), \{ __type__: ButtonType\.Normal \}\) \.width\('50%'\) \.onClick\(\(\) => \{ __this__\.dec2hex\(\) \}\)

Textarea数据改变事件是onChange，它无法像VUE组件一样直接通过value绑定获取，只能通过onChange事件获取改变后的值`
TextArea()
.width('100%')
.height(180)
.backgroundColor(0x0ffff)
.borderRadius(0)
.onChange((value) => {
this.strInput = value
console.log(this.strInput)
})

Click事件直接调用工具包

dec2hex() {
this.strEncode = ''
console.log(JS_TAG + this.strInput)
this.strEncode = numConvertUtil.dec2hex(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}

hex2dex() {
this.strEncode = ''
this.strEncode = numConvertUtil.hex2dex(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}

hex2bin() {
this.strEncode = ''
this.strEncode = numConvertUtil.hex2bin(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}

bin2hex() {
this.strEncode = ''
this.strEncode = numConvertUtil.bin2hex(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}

hex2ascii() {
this.strEncode = ''
this.strEncode = numConvertUtil.hex2ascii(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}

ascii2hex() {
this.strEncode = ''
this.strEncode = numConvertUtil.ascii2hex(this.strInput)
console.log(JS_TAG + this.strInput + ' ' + this.strEncode)
}`

4 总结

在编码过程中我们要提前规划好公用方法，这样即降低了维护成本，又能做到代码复用。eTS的组件事件与VUE框架大体相同，但也有略微的差异，比如Textarea的值绑定是通过onChange事件来获取的，在不确定时定可以多看官方组件文档。