怎样在HarmonyOS中调用百度翻译API
先容通过http哀求和HarmonyOS自带的加密框架，可以为移动应用实现调用百度翻译API的功能。
https://i-blog.csdnimg.cn/blog_migrate/86abe5436412425c6ecfec422d7f8992.gif
开辟环境要求
• DevEco Studio版本：DevEco Studio 3.1 Release
• HarmonyOS SDK版本：API version 9
工程要求
• API9
• Stage模子
https://i-blog.csdnimg.cn/blog_migrate/1edddcdb41c987fe4a46348bb78e0d2a.png
正文
▍代码布局
main
├─ module.json5
├─ resources
│ ├─ zh_CN
│ ├─ rawfile //图片资源目录
│ │ ├─ image1.png
│ │ └─ image2.png
│ └─ base
└─ ets
├─ XL_Modules
│ └─ XL_Translation_Tool.ts //翻译工具模块
├─ pages
│ └─ Index.ets //主页面
└─ entryability
└─ EntryAbility.ts
▍添加权限
在本案例中，我们是通过http数据哀求的方式调用百度翻译API的，这意味着应用必须拥有联网权限。所以我们必要在module.json5中申请“name”为"ohos.permission.INTERNET"的权限
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "inuse"
}
}
],
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
]
}
} 获取百度翻译开放平台的App Id和密钥
开辟者能通过http数据哀求调用百度翻译API的前提是提供一些必要的认证信息，即开辟者在百度翻译开放平台的App Id与密钥。
首先，进入百度翻译开放平台的网址，网页链接为http://api.fanyi.baidu.com。随后，注册个人用户，并在注册完成之后打开开辟者信息的选项，即可查看本身的App Id与密钥。
https://i-blog.csdnimg.cn/blog_migrate/be45dfc3b049fb76d24163e8f60bbd43.png
末了，我们还必要在平台中开通通用文本翻译API(这个是免费申请的)，成功开通后可以进入下一步
https://i-blog.csdnimg.cn/blog_migrate/5b8e25b684b997224fe1d89d3a076b02.png
▍翻译工具模块
在本案例中，调用百度翻译API的关键代码被封装在翻译工具类中，而翻译工具类（ XL_Translation_Tool）则被集成在文件 XL_Translation_Tool.ts中。
在XL_Translation_Tool.ts中，首先必要导入cryptoFramework与http，前者用于MD5数据加密，后者用于http数据哀求。接着编写两个辅助函数，分别为Generate_number_Sequence_10与Transform_10_To_16，前者用于生成十位随机数，后者则用于将10进制整数序列转换为16进制整数序列。随后，将MD5加密的代码封装在异步函数Generate_Sign内，并创建类XL_Translation_Tool。
在类XL_Translation_Tool中，provideDeveloperInfo方法用于获取开辟者在百度翻译开放平台的App Id与密钥，translate方法则是基于上述App Id与密钥，以及待翻译文本，来调用百度翻译API。
调用API必要的URL格式如下
https://i-blog.csdnimg.cn/blog_migrate/0666820b73e39b7f88467fd476795914.png
末了，导出一个XL_Translation_Tool实例
//导入加密框架
import cryptoFramework from '@ohos.security.cryptoFramework';
//导入http模块
import http from '@ohos.net.http';
/*
* 函数名: Generate_number_Sequence_10
* 描述: 随机生成携带十个元素的数字序列（此序列的数据类型为字符串）
*/
function Generate_number_Sequence_10():string{
var ret:string = ''
for(var i = 0; i < 10; ++i){
ret += Math.floor(Math.random()*9.999)
}
console.info('------ '+ret)
return ret
}
/*
* 函数名: Transform_10_To_16
* 描述: 用于将10进制整数序列（参数的数据类型为Uint8Array）转换为16进制整数序列（输出的数据类型为字符串）的辅助函数
*/
function Transform_10_To_16(Sign_10:Uint8Array):string{
let Array_16 = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
let Sign_16:string = ''
for(var item of Sign_10) Sign_16 += Array_16[(item-item%16)/16]+Array_16
console.info('------: '+Sign_16.toString())
return Sign_16
}
/*
* 函数名: Generate_Sign
* 描述: 通过MD5模块进行信息加密, 以生成签名
*/
async function Generate_Sign(query:string,appId:string, key:string, sequence_10:string){
//预定义输出
let output = {
'ifComplete':false,
'Sign_16':null,
}
//创建md模块
let MD5 = cryptoFramework.createMd('MD5')
//MD5加密的输入值
let sign = appId + query + sequence_10 + key
//数据转换
var arr = []
for(var i = 0 ; i < sign.length ; i++)arr.push(sign.charCodeAt(i))
var dataBlog = {
data:new Uint8Array(arr)
}
console.info('------ dataBlog: '+dataBlog.data.toString())
//开始MD5加密
await MD5.update(dataBlog)
var SecretSign
await MD5.digest().then((mdOutput) => {
SecretSign = mdOutput.data
console.info("------ MD result: " + SecretSign.toString());
output.ifComplete = true
output.Sign_16 = SecretSign
}).catch((err) => console.error("------ err: " + err.code))
output.Sign_16 = Transform_10_To_16(SecretSign)
//输出加密结果
return output
}
/*
* 枚举名: TranslationForm
* 描述: 用于确定翻译流程的始末
*/
export enum TranslationForm{
From_En_To_Zh = 0,
From_Zh_To_En = 1
}
/*
* 数据类型名: TranslationResult
* 描述: 类XL_Translation_Tool的translate方法返回的数据类型
*/
declare type TranslationResult = {
ifComplete:boolean
result:string
description:string
}
class XL_Translation_Tool{
private TAG:string = '------ '
private Baidu_Translation_API_URL_Prefix:string = 'https://fanyi-api.baidu.com/api/trans/vip/translate'
private Baidu_APPID:string = ''
private Baidu_Key:string = ''
private If_Provide_Developer_Info:boolean = false
/*
* 方法名: provideDeveloperInfo
* 描述: 为XL_Translation_Tool提供百度翻译平台的开发者信息, 这是百度翻译API得以被调用的前提
*/
public provideDeveloperInfo(appId:string, key:string){
this.Baidu_APPID = appId
this.Baidu_Key = key
this.If_Provide_Developer_Info = true
}
/*
* 方法名: translate
* 描述: 将输入的字符串信息, 通过百调用度翻译API进行翻译并返回
*/
public async translate(message:string, form:TranslationForm):Promise<TranslationResult>{
//预定义返回值
var ret:TranslationResult = {
ifComplete:false,
result:null,
description:''
}
//判断appId和key是否被提供
if(!this.If_Provide_Developer_Info){
ret.description = '请为翻译工具提供百度智能翻译平台的开发者信息'
console.info(this.TAG+'Please provide the appId and key')
return ret
}
//通过http模块实例化HttpRequest
var httpRequest = http.createHttp()
let from:string
let to:string
let query:string = message+''
if(form == TranslationForm.From_En_To_Zh){
from = 'en'
to = 'zh'
}else if(form == TranslationForm.From_Zh_To_En){
from = 'zh'
to = 'en'
}
//生成10位随机整数序列
const RANDOM_SEQUENCE:string = Generate_number_Sequence_10()
var sign:string
//生成签名
let msg = await Generate_Sign(query,this.Baidu_APPID,this.Baidu_Key,RANDOM_SEQUENCE)
if(msg.ifComplete){
sign = msg.Sign_16
}else {
ret.description = '加密过程出错, 请检查相关项'
return ret
}
//拼接URL
let url = this.Baidu_Translation_API_URL_Prefix
+'?q=' + encodeURI(query)
+'&from=' +from
+'&to='+to
+'&appid='+this.Baidu_APPID
+'&salt='+RANDOM_SEQUENCE
+'&sign='+sign
console.info(this.TAG+'url: '+url)
//调用request方法
await httpRequest.request(url,{
method:http.RequestMethod.POST,
header:{
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((data)=>{
console.info(this.TAG+'Succeed in connecting to Internet')
// @ts-ignore
let trans_result = JSON.parse(data.result).trans_result
console.info(this.TAG+'Result:' + data.result);
console.info(this.TAG+'code:' + JSON.stringify(data.responseCode));
console.info(this.TAG+'Translate output:'+trans_result.dst)
ret.ifComplete = true
ret.description = '翻译成功'
ret.result = trans_result.dst
}).catch(err => console.error(this.TAG+'err:'+JSON.stringify(err)))
//销毁HttpRequest实例
httpRequest.destroy()
//返回翻译结果
return ret
}
}
//导出本模块
export default new XL_Translation_Tool() 主页面
在页面Index.ets中，我们必要计划一个自定义弹窗（名为dialog1）。该弹窗有一个用@Link装饰器修饰的变量If_Provide_Developer_Info，表现此自定义弹窗组件与其父组件支持双向数据通报。弹窗中有两个文本输入组件，分别用于输入开辟者的App Id与密钥，而内容为"确定"的文本组件则用于调用XL_Translation_Tool实例的provideDeveloperInfo方法，将开辟者认证信息载入XL_Translation_Tool实例中。
//导入自定义的翻译工具
import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'
//主页面UI
@Entry
@Component
struct Index{
......
}
//自定义弹窗
@CustomDialog
struct dialog1{
dialogController:CustomDialogController
@Link If_Provide_Developer_Info:boolean
@State private Baidu_AppId:string = ''
@State private Baidu_Key:string = ''
build(){
Column(){
Text('APP Id: ')
.fontSize(20)
.fontWeight(600)
.fontColor(Color.Gray)
.margin({
top:20,
bottom:4
})
.width('86%')
TextInput()
.type(InputType.Number)
.width('95%')
.height(40)
.backgroundColor('#eeeeee')
.onChange((value:string) => this.Baidu_AppId = value)
Text('密钥: ')
.fontSize(20)
.fontWeight(600)
.fontColor(Color.Gray)
.margin({
top:20,
bottom:4
})
.width('86%')
TextInput({
text:this.Baidu_Key
})
.type(InputType.Password)
.width('95%')
.height(40)
.backgroundColor('#eeeeee')
.onChange((value:string) => this.Baidu_Key = value)
Row(){
Text('确认')
.fontSize(24)
.fontWeight(700)
.fontColor(Color.Blue)
.onClick(() => {
this.dialogController.close()
this.If_Provide_Developer_Info = true
XL_Translation_Tool.provideDeveloperInfo(this.Baidu_AppId, this.Baidu_Key)
})
Text('取消')
.fontSize(24)
.fontWeight(700)
.fontColor(Color.Red)
.onClick(() => {
this.dialogController.close()
})
}
.width('100%')
.margin({
top:30
})
.justifyContent(FlexAlign.SpaceEvenly)
}
.height(260)
.width('92%')
}
} 末了，编写页面入口Index。dialogController表现自定义弹窗组件dialog1的控制器。
//导入自定义的翻译工具
import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'
//主页面UI
@Entry
@Component
struct Index {
@State private If_Provide_Developer_Info:boolean = false
@State private translation_mode:number = TranslationForm.From_En_To_Zh
@State private translation_content:string = ''
@State private translation_result:string = ''
private dialogController = new CustomDialogController({
builder:dialog1({
If_Provide_Developer_Info:$If_Provide_Developer_Info
})
})
private async Begin_Translate(){
let result = await XL_Translation_Tool.translate(this.translation_content, this.translation_mode)
this.translation_result = result.result
}
build() {
Column() {
Text('百度翻译API')
.fontSize(36)
.fontColor(Color.Pink)
.fontWeight(800)
.margin({
top:20
})
Row(){
Row() {
Text('英译中')
.fontSize(20)
.fontColor('#8099ff')
.fontWeight(800)
Image($rawfile('image2.png'))
.height(30)
.width(30)
}
Text('提供密钥')
.fontSize(20)
.fontColor('#ff6666')
.fontWeight(800)
.onClick(() => this.dialogController.open())
}
.margin({
top:20
})
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
Text('输入')
.fontSize(20)
.fontWeight(600)
.fontColor(Color.Gray)
.margin({
top:30,
bottom:10
})
.width('86%')
TextArea()
.width('90%')
.height(120)
.border({
width:3,
})
.onChange((value:string) => this.translation_content = value)
.fontSize(21)
Text() {
Span('结果')
}
.fontSize(20)
.fontWeight(600)
.fontColor(Color.Gray)
.margin({
top: 30,
bottom: 10
})
.width('86%')
TextArea({
text:this.translation_result
})
.width('90%')
.height(150)
.border({
width:3,
})
.fontSize(21)
Row(){
Image($rawfile('image1.png'))
.height(40)
.width(40)
Text('翻译')
.fontWeight(700)
.fontSize(24)
.fontColor(Color.White)
.margin({
left:20
})
}
.width('93%')
.height(50)
.backgroundColor('#8099ff')
.borderRadius(30)
.justifyContent(FlexAlign.Center)
.margin({
top:50
})
.onClick(() =>{
if(!this.If_Provide_Developer_Info){
this.dialogController.open()
return
}
console.info('------ '+'--'+this.translation_content+'--')
this.Begin_Translate()
})
}
.width('100%')
}
}
//自定义弹窗
@CustomDialog
...... 如许之后，调用百度API的案例便编写完成了，使用模拟器或真机可以查看运行效果。受一些奇怪的bug的影响，本案例中的翻译功能只支持英译中。
总结
通过本次案例，信赖你已经学会怎样在HarmonyOS中调用百度翻译API。
末了
假如你想快速提拔鸿蒙技术，那么可以直接领取这份包含了：【OpenHarmony多媒体技术、Stage模子、ArkUI多端部署、分布式应用开辟、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战】等技术知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙核心技术学习门路
https://i-blog.csdnimg.cn/blog_migrate/7456f0001d5a381cc81b441ac2659b61.png
2.大厂口试必问口试题
https://i-blog.csdnimg.cn/blog_migrate/54545dc24db55664221a0a114662baa7.png
3.鸿蒙南向开辟技术
https://i-blog.csdnimg.cn/blog_migrate/c8692deacd7801cfc886f2aeb5c9de68.png
4.鸿蒙APP开辟必备
https://i-blog.csdnimg.cn/blog_migrate/c510342c258bd907f950db431ae04b02.png
5.HarmonyOS Next 最新全套视频教程
https://i-blog.csdnimg.cn/blog_migrate/19ae670ea2ad8700501902a67431f4cf.png
6.鸿蒙生态应用开辟白皮书V2.0PDF
https://i-blog.csdnimg.cn/blog_migrate/fd3ae1cb27c9387092ad0fe7c45608ee.png
这份全套完备版的学习资料已经全部打包好，朋友们假如必要可以点击→鸿蒙Next全套VIP学习资料免费领取（安全链接，放心点击）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]