??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
背景
對于剛?cè)腴TOpenHarmony開發(fā)的小伙伴來說，如果有一個(gè)合適的實(shí)戰(zhàn)項(xiàng)目來練手，對自身的技術(shù)能力提升是非常有幫助的，本文將以一個(gè)小項(xiàng)目——數(shù)據(jù)轉(zhuǎn)碼應(yīng)用，來講解應(yīng)用開發(fā)全流程。
在《OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應(yīng)用開發(fā)實(shí)戰(zhàn)（上）》中我們講述了項(xiàng)目的需求、設(shè)計(jì)以及項(xiàng)目創(chuàng)建、UI界面開發(fā)，本篇將重點(diǎn)講解轉(zhuǎn)碼工具包的實(shí)現(xiàn)和UI組件數(shù)據(jù)綁定。
轉(zhuǎn)碼工具包
編碼時(shí)推薦單獨(dú)創(chuàng)建包路徑，不要與頁面UI寫在一起，這樣便于維護(hù)和代碼的復(fù)用。
我們創(chuàng)建/entry/src/main/ets/MainAbility/utils/numConvertUtil.ets，然后在index.ets頁面中引入。工具包將導(dǎo)出一個(gè)工具對象，每個(gè)方法實(shí)現(xiàn)一個(gè)轉(zhuǎn)碼需求，代碼如下：
export default {
/**
* 10進(jìn)制轉(zhuǎn)16進(jìn)制,并補(bǔ)零
* @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進(jìn)制轉(zhuǎn)10進(jìn)制
* @param num
*/
hex2dex: function (numStr: string) {
console.log(JS_TAG + 'hex2dex ' + numStr)
return parseInt(numStr, 16).toString()
},
/**
* 16進(jìn)制轉(zhuǎn)2進(jìn)制
* @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進(jìn)制轉(zhuǎn)16進(jìn)制
* @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進(jìn)制轉(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進(jìn)制
* @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)
}總結(jié)
在編碼過程中我們要提前規(guī)劃好公用方法，這樣即降低了維護(hù)成本，又能做到代碼復(fù)用。eTS的組件事件與VUE框架大體相同，但也有略微的差異，比如Textarea的值綁定是通過onChange事件來獲取的，在不確定時(shí)定可以多看官方組件文檔。
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
