??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
背景
對于剛入門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??
