OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應用開發(fā)實戰(zhàn)（中）

作者：軟通動力HOS 2022-11-07 15:40:22

本文將以一個小項目—數(shù)據(jù)轉(zhuǎn)碼應用，來講解應用開發(fā)全流程。

??https://ost.51cto.com??

背景

對于剛?cè)腴TOpenHarmony開發(fā)的小伙伴來說，如果有一個合適的實戰(zhàn)項目來練手，對自身的技術(shù)能力提升是非常有幫助的，本文將以一個小項目——數(shù)據(jù)轉(zhuǎn)碼應用，來講解應用開發(fā)全流程。
在《OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應用開發(fā)實戰(zhàn)（上）》中我們講述了項目的需求、設計以及項目創(chuàng)建、UI界面開發(fā)，本篇將重點講解轉(zhuǎn)碼工具包的實現(xiàn)和UI組件數(shù)據(jù)綁定。

轉(zhuǎn)碼工具包

編碼時推薦單獨創(chuàng)建包路徑，不要與頁面UI寫在一起，這樣便于維護和代碼的復用。
我們創(chuàng)建/entry/src/main/ets/MainAbility/utils/numConvertUtil.ets，然后在index.ets頁面中引入。工具包將導出一個工具對象，每個方法實現(xiàn)一個轉(zhuǎn)碼需求，代碼如下：

export default {
  /**
   * 10進制轉(zhuǎn)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進制轉(zhuǎn)10進制
   * @param num
   */
  hex2dex: function (numStr: string) {
    console.log(JS_TAG + 'hex2dex ' + numStr)
    return parseInt(numStr, 16).toString()
  },
  /**
   * 16進制轉(zhuǎn)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進制轉(zhuǎn)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進制轉(zhuǎn)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碼轉(zhuǎn)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組件的事件輸出結(jié)果

引入數(shù)據(jù)轉(zhuǎn)碼工具包

import numConvertUtil from '../utils/numConvertUtil';

綁定按鈕Click事件

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

Textarea數(shù)據(jù)改變事件是onChange，它無法像VUE組件一樣直接通過value綁定獲取，只能通過onChange事件獲取改變后的值。

TextArea()
  .width('100%')
  .height(180)
  .backgroundColor(0x0ffff)
  .borderRadius(0)
  .onChange((value) => {
    this.strInput = value
    console.log(this.strInput)
  })

Click事件直接調(diào)用工具包

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