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
针对帖子标题“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,