OpenHarmony数据转码应用开发实战（中）原创精华

软通动力HOS

发布于 2022-11-7 10:44

浏览

11收藏

背景

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

转码工具包

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

const JS_TAG: string = 'MainAbility/utils/numConvertUtil: ';

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.

绑定UI组件的事件输出结果

引入数据转码工具包

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

绑定按钮Click事件

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

Textarea数据改变事件是onChange，它无法像VUE组件一样直接通过value绑定获取，只能通过onChange事件获取改变后的值

TextArea()
  .width('100%')
  .height(180)
  .backgroundColor(0x0ffff)
  .borderRadius(0)
  .onChange((value) => {
    this.strInput = value
    console.log(this.strInput)
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.

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)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

总结

在编码过程中我们要提前规划好公用方法，这样即降低了维护成本，又能做到代码复用。eTS的组件事件与VUE框架大体相同，但也有略微的差异，比如Textarea的值绑定是通过onChange事件来获取的，在不确定时定可以多看官方组件文档。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2022-11-10 15:08:55修改

4条回复

按时间正序

按时间倒序

红叶亦知秋

实战是提升自己的最好方式

2022-11-7 11:22:19

笨笨的婧婧

多实战，多翻文档

2022-11-8 18:37:02

香菜太难吃了

写代码不提前规划总是会绕很多弯路

2022-11-10 11:30:57

软通动力HOS

感谢大家的支持

2022-11-10 15:29:47

51CTO

51CTO博客

51CTO学堂

OpenHarmony数据转码应用开发实战（中）原创精华

背景

转码工具包

绑定UI组件的事件输出结果

引入数据转码工具包

绑定按钮Click事件

Click事件直接调用工具包

总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

OpenHarmony数据转码应用开发实战（中） 原创 精华

背景

转码工具包

绑定UI组件的事件输出结果

引入数据转码工具包

绑定按钮Click事件

Click事件直接调用工具包

总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

OpenHarmony数据转码应用开发实战（中）原创精华