背景

对于刚入门OpenHarmony开发的小伙伴来说，如果有一个合适的实战项目来练手，对自身的技术能力提升是非常有帮助的，本文将以一个小项目——数据转码应用，来讲解应用开发全流程。
在《OpenHarmony数据转码应用开发实战（上）》中我们讲述了项目的需求、设计以及项目创建、UI界面开发，本篇将重点讲解转码工具包的实现和UI组件数据绑定。

转码工具包

编码时推荐单独创建包路径，不要与页面UI写在一起，这样便于维护和代码的复用。
我们创建/entry/src/main/ets/MainAbility/utils/numConvertUtil.ets，然后在index.ets页面中引入。工具包将导出一个工具对象，每个方法实现一个转码需求，代码如下：

const JS_TAG: string = 'MainAbility/utils/numConvertUtil: ';export default {  /**   * 10进制转16进制,并补零   * @param 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  0) {      for (let i = 0; i < needFill; i++) { result = '0' + result      }    }    return result  }}

绑定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)}

总结

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