文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

OpenHarmony数据转码应用开发实战(中)

2024-12-01 12:20

关注

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

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

背景

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

转码工具包

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

export default {

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

hex2dex: function (numStr: string) {
console.log(JS_TAG + 'hex2dex ' + numStr)
return parseInt(numStr, 16).toString()
},

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

bin2hex: function (numStr: string) {
let num: number = parseInt(numStr, 2)
let result: string = Number(num).toString(16)
result = this.addZero(result)
return result
},

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('')
},

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​

来源:51CTO开源基础软件社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯