HarmonyOS 鸿蒙Next 用eTS搞了一个简单的有道翻译APP

HarmonyOS 鸿蒙Next 用eTS搞了一个简单的有道翻译APP 用的是SDK 3.0 Beta,API 7,HarmonyOS 2.0的是不支持的,主要是有些组件api 6没有,比如TextInput,还有onClick时间,没什么技术含量,主要是熟悉一下eTS怎么搞,自己也不懂JS,都是复制粘贴,参照有道翻译API文档。

效果:

需要配置网络权限:

config.json文件加上:

{
  "reqPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

index.ets文件:

// [@ts-nocheck](/user/ts-nocheck)
import http from '[@ohos](/user/ohos).net.http'
import RequestMethod from '[@ohos](/user/ohos).net.http'
import ResponseCode from '[@ohos](/user/ohos).net.http'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  //APP页面
  [@State](/user/State) title: string = '在线英汉词典'
  input: string = ''
  [@State](/user/State) button: string = ' 翻 译 '
  [@State](/user/State) result: string = ' < 翻译结果 > '
  //有道翻译参数
  [@State](/user/State) YOUDAO_URL: string = 'https://openapi.youdao.com/api/'
  [@State](/user/State) APP_KEY: string = 'XXXXX这里需要向有道翻译申请获得XXXXXX'
  [@State](/user/State) APP_SECRET: string = 'XXXXX这里需要向有道翻译申请获得XXXXXX'
  //注意:暴露appSecret,有被盗用造成损失的风险
  onCancel() {
    console.info('关闭!')
  }

  build() {
    Column({
      space: 10
    }) {
      //APP标题
      Text(this.title)
        .fontColor(Color.Green)
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .width('90%')
        .padding({ top: 20, bottom: 20, left: 20, right: 20 })
        .textAlign(TextAlign.Center)
      //输入框
      TextInput({
        placeholder: '请输入要翻译的内容'
      })
        .fontSize(26)
        .width('90%')
        .padding(10)
        .enterKeyType(EnterKeyType.Done)
        .onChange((value) => {
          this.input = value // 输入框内容改变实时更新到input变量
          this.result = ' < 正在输入... > ';
        })
      //翻译按钮
      Button(this.button)
        .width(150)
        .padding(5)
        .backgroundColor(Color.Green)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .fontSize(26)
        .onClick(() => {
          this.translate(); // 点击执行翻译
        })
      //翻译结果实时显示区
      Text(this.result)
        .fontSize(26)
        .textAlign(TextAlign.Center)
        .backgroundColor("#fff0f5f1")
        .padding(10)
        .width('90%')
    }
      .alignItems(HorizontalAlign.Center)
      .width('100%')
  }

  //翻译方法,绑定到按钮点击事件
  private translate() {
    //有道翻译API必需的参数
    var appKey = this.APP_KEY;
    var key = this.APP_SECRET; // 注意:暴露appSecret,有被盗用造成损失的风险
    var salt = (new Date).getTime(); // uuid,唯一通用识别码
    var curtime = Math.round(new Date().getTime() / 1000); // 当前UTC时间戳(秒)
    var q = this.input; // 要翻译的内容,从输入框获取
    var from2 = 'auto';
    var to = 'auto';
    //签名,sha256(应用ID+input+salt+curtime+应用密钥),每次提交都不同,有道翻译要求相同请求不能多次提交
    var str1 = appKey + truncate(q) + salt + curtime + key;
    var sign = SHA256(str1);

    // 每一个httpRequest对应一个http请求任务,不可复用
    var httpRequest = http.createHttp();
    httpRequest.request(
      this.YOUDAO_URL,
      {
        method: RequestMethod.RequestMethod.GET, // 此处改为POST就不行,不知道为什么,有道翻译API文档显示支持POST
        header: {
          'content-type': 'application/json'
        },
        extraData: { // 必须要提交的数据
          'q': q,
          'appKey': appKey,
          'salt': salt,
          'from': from2,
          'to': to,
          'sign': sign,
          'signType': 'v3',
          'curtime': curtime
        },
        readTimeout: 15000,
        connectTimeout: 15000
      },
      (error, data) => {
        if (error) { // 代码为>0,代表翻译失败
          console.info('发成了错误,error:' + JSON.stringify(error));
          // 当该请求使用完毕时,调用destroy方法主动销毁。
          httpRequest.destroy();
        } else { // 代码为0,代表翻译成功
          let code = data.responseCode
          if (ResponseCode.ResponseCode.OK == code) {
            // 取出有用的数据
            var obj = JSON.parse(data.result.toString());
            var translation = obj.translation;
            // 显示结果
            var rs = '';
            for (var i = 0; i < translation.length; i++) {
              rs = rs + translation[i] + '\n';
              this.result = rs;
            }
          } else {
            console.info('response code:' + code);
          }
        }
      }
    )
    // 处理输入的内容
    function truncate(q) {
      var len = q.length;
      if (len <= 20) return q;
      return q.substring(0, 10) + len + q.substring(len - 10, len);
    }
    // SHA256函数,没什么好说的,复制粘贴过来的,不知道鸿蒙有没有内置的函数
    function SHA256(s) {
      const chrsz = 8
      const hexcase = 0
      function safe_add(x, y) {
        const lsw = (x & 0xFFFF) + (y & 0xFFFF)
        const msw = (x >> 16) + (y >> 16) + (lsw >> 16)
        return (msw << 16) | (lsw & 0xFFFF)
      }
      function S(X, n) {
        return (X >>> n) | (X << (32 - n))
      }
      function R(X, n) {
        return (X >>> n)
      }
      function Ch(x, y, z) {
        return ((x & y) ^ ((~x) & z))
      }
      function Maj(x, y, z) {
        return ((x & y) ^ (x & z) ^ (y & z))
      }
      function Sigma0256(x) {
        return (S(x, 2) ^ S(x, 13) ^ S(x, 22))
      }
      function Sigma1256(x) {
        return (S(x, 6) ^ S(x, 11) ^ S(x, 25))
      }
      function Gamma0256(x) {
        return (S(x, 7) ^ S(x, 18) ^ R(x, 3))
      }
      function Gamma1256(x) {
        return (S(x, 17) ^ S(x, 19) ^ R(x, 10))
      }
      function core_sha256(m, l) {
        const K = [0x428A2F98, 0x71374491, 0xB5C0FBCF, 0xE9B5DBA5, 0x3956C25B, 0x59F111F1, 0x923F82A4, 0xAB1C5ED5, 0xD807AA98, 0x12835B01, 0x243185BE, 0x550C7DC3, 0x72BE5D74, 0x80DEB1FE, 0x9BDC06A7, 0xC19BF174, 0xE49B69C1, 0xEFBE4786, 0xFC19DC6, 0x240CA1CC, 0x2DE92C6F, 0x4A7484AA, 0x5CB0A9DC, 0x76F988DA, 0x983E5152, 0xA831C66D, 0xB00327C8, 0xBF597FC7, 0xC6E00BF3, 0xD5A79147, 0x6CA6351, 0x14292967, 0x27B70A85, 0x2E1B2138, 0x4D2C6DFC, 0x53380D13, 0x650A7354, 0x766A0ABB, 0x81C2C92E, 0x92722C85, 0xA2BFE8A1, 0xA81A664B, 0xC24B8B70, 0xC76C51A3, 0xD192E819, 0xD6990624, 0xF40E3585, 0x106AA070, 0x19A4C116, 0x1E376C08, 0x2748774C, 0x34B0BCB5, 0x391C0CB3, 0x4ED8AA4A, 0x5B9CCA4F, 0x682E6FF3, 0x748F82EE, 0x78A5636F, 0x84C87814, 0x8CC70208, 0x90BEFFFA, 0xA4506CEB, 0xBEF9A3F7, 0xC67178F2]
        const HASH = [0x6A09E667, 0xBB67AE85, 0x3C6EF372, 0xA54FF53A, 0x510E527F, 0x9B05688C, 0x1F83D9AB, 0x5BE0CD19]
        const W = new Array(64)
        let a, b, c, d, e, f, g, h, i, j
        let T1, T2
        m[l >> 5] |= 0x80 << (24 - l % 32)
        m[((l + 64 >> 9) << 4) + 15] = l
        for (i = 0; i < m.length; i += 16) {
          a = HASH[0]
          b = HASH[1]
          c = HASH[2]
          d = HASH[3]
          e = HASH[4]
          f = HASH[5]
          g = HASH[6]
          h = HASH[7]
          for (j = 0; j < 64; j++) {
            if (j < 16) {
              W[j] = m[j + i]
            } else {
              W[j] = safe_add(safe_add(safe_add(Gamma1256(W[j - 2]), W[j - 7]), Gamma0256(W[j - 15])), W[j - 16])
            }
            T1 = safe_add(safe_add(safe_add(safe_add(h, Sigma1256(e)), Ch(e, f, g)), K[j]), W[j])
            T2 = safe_add(Sigma0256(a), Maj(a, b, c))
            h = g
            g = f
            f = e
            e = safe_add(d, T1)
            d = c
            c = b
            b = a
            a = safe_add(T1, T2)
          }
          HASH[0] = safe_add(a, HASH[0])
          HASH[1] = safe_add(b, HASH[1])
          HASH[2] = safe_add(c, HASH[2])
          HASH[3] = safe_add(d, HASH[3])
          HASH[4] = safe_add(e, HASH[4])
          HASH[5] = safe_add(f, HASH[5])
          HASH[6] = safe_add(g, HASH[6])
          HASH[7] = safe_add(h, HASH[7])
        }
        return HASH
      }
      function str2binb(str) {
        const bin = []
        const mask = (1 << chrsz) - 1
        for (let i = 0; i < str.length * chrsz; i += chrsz) {
          bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i % 32)
        }
        return bin
      }
      function Utf8Encode(string) {
        string = string.replace(/\r\n/g, '\n')
        let utfText = ''
        for (let n = 0; n < string.length; n++) {
          const c = string.charCodeAt(n)
          if (c < 128) {
            utfText += String.fromCharCode(c)
          } else if ((c > 127) && (c < 2048)) {
            utfText += String.fromCharCode((c >> 6) | 192)
            utfText += String.fromCharCode((c & 63) | 128)
          } else {
            utfText += String.fromCharCode((c >> 12) | 224)
            utfText += String.fromCharCode(((c >> 6) & 63) | 128)
            utfText += String.fromCharCode((c & 63) | 128)
          }
        }
        return utfText
      }
      function binb2hex(binarray) {
        const hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef'
        let str = ''
        for (let i = 0; i < binarray.length * 4; i++) {
          str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) +
            hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF)
        }
        return str
      }
      s = Utf8Encode(s)
      return binb2hex(core_sha256(str2binb(s), s.length * chrsz))
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 用eTS搞了一个简单的有道翻译APP的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不错不错

更多关于HarmonyOS 鸿蒙Next 用eTS搞了一个简单的有道翻译APP的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不错,支持下

针对帖子标题“HarmonyOS 鸿蒙Next 用eTS搞了一个简单的有道翻译APP”的问题,以下是专业且直接的回答:

在HarmonyOS鸿蒙Next系统中,使用eTS(Extensible TypeScript)语言开发了一个简单的有道翻译APP,这体现了鸿蒙系统对现代化前端技术的支持。eTS作为鸿蒙系统的声明式开发语言,允许开发者以更高效、简洁的方式构建用户界面,并处理用户交互。

在开发过程中,你可能利用了eTS提供的组件库和API来实现APP的基本功能,如输入框、按钮和结果显示区域。同时,为了与有道翻译API进行交互,你可能在eTS中使用了网络请求库,如Fetch API或Axios等(假设鸿蒙系统支持这些库或提供了类似的网络请求功能)。

有道翻译API的集成可能涉及在APP中配置API密钥,并编写代码来处理API返回的翻译结果。这些结果随后被显示在APP的用户界面上,为用户提供翻译服务。

请注意,实际开发中可能还涉及到错误处理、用户输入验证、APP性能优化等方面的问题。如果你在这些方面遇到了困难,或者对鸿蒙系统的eTS开发有更深入的问题,建议查阅鸿蒙系统的官方文档或相关教程。

如果问题依旧没法解决请联系官网客服,官网地址是: https://www.itying.com/category-93-b0.html

回到顶部