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

背景

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

转码工具包

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

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 < 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
  }
}

绑定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事件来获取的，在不确定时定可以多看官方组件文档。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com