怎样在HarmonyOS中调用百度翻译API

先容

通过http哀求和HarmonyOS自带的加密框架，可以为移动应用实现调用百度翻译API的功能。

开辟环境要求
 • DevEco Studio版本：DevEco Studio 3.1 Release
 • HarmonyOS SDK版本：API version 9
工程要求
 • API9
 • Stage模子

正文

▍代码布局

1. main
2. ├─ module.json5
3. ├─ resources
4. │  ├─ zh_CN
5. │  ├─ rawfile        //图片资源目录
6. │  │  ├─ image1.png
7. │  │  └─ image2.png
8. │  └─ base
9. └─ ets
10.    ├─ XL_Modules
11.    │  └─ XL_Translation_Tool.ts    //翻译工具模块
12.    ├─ pages
13.    │  └─ Index.ets          //主页面
14.    └─ entryability
15.       └─ EntryAbility.ts

复制代码

▍添加权限
在本案例中，我们是通过http数据哀求的方式调用百度翻译API的，这意味着应用必须拥有联网权限。所以我们必要在module.json5中申请“name”为"ohos.permission.INTERNET"的权限

1. {
2.   "module": {
3.     "name": "entry",
4.     "type": "entry",
5.     "description": "$string:module_desc",
6.     "mainElement": "EntryAbility",
7.     "deviceTypes": [
8.       "phone"
9.     ],
10.     "deliveryWithInstall": true,
11.     "installationFree": false,
12.     "pages": "$profile:main_pages",
13.     "requestPermissions": [
14.       {
15.         "name": "ohos.permission.INTERNET",
16.         "usedScene": {
17.           "abilities": [
18.             "EntryAbility"
19.           ],
20.           "when": "inuse"
21.         }
22.       }
23.     ],
24.     "abilities": [
25.       {
26.         "name": "EntryAbility",
27.         "srcEntry": "./ets/entryability/EntryAbility.ts",
28.         "description": "$string:EntryAbility_desc",
29.         "icon": "$media:icon",
30.         "label": "$string:EntryAbility_label",
31.         "startWindowIcon": "$media:icon",
32.         "startWindowBackground": "$color:start_window_background",
33.         "exported": true,
34.         "skills": [
35.           {
36.             "entities": [
37.               "entity.system.home"
38.             ],
39.             "actions": [
40.               "action.system.home"
41.             ]
42.           }
43.         ]
44.       }
45.     ]
46.   }
47. }

复制代码

获取百度翻译开放平台的App Id和密钥

开辟者能通过http数据哀求调用百度翻译API的前提是提供一些必要的认证信息，即开辟者在百度翻译开放平台的App Id与密钥。
首先，进入百度翻译开放平台的网址，网页链接为http://api.fanyi.baidu.com。随后，注册个人用户，并在注册完成之后打开开辟者信息的选项，即可查看本身的App Id与密钥。

末了，我们还必要在平台中开通通用文本翻译API(这个是免费申请的)，成功开通后可以进入下一步

▍翻译工具模块
在本案例中，调用百度翻译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格式如下

末了，导出一个XL_Translation_Tool实例

1. //导入加密框架
2. import cryptoFramework from '@ohos.security.cryptoFramework';
4. //导入http模块
5. import http from '@ohos.net.http';
7. /*
8.  * 函数名: Generate_number_Sequence_10
9.  * 描述: 随机生成携带十个元素的数字序列（此序列的数据类型为字符串）
10.  */
11. function Generate_number_Sequence_10():string{
13.   var ret:string = ''
15.   for(var i = 0; i < 10; ++i){
16.     ret += Math.floor(Math.random()*9.999)
17.   }
19.   console.info('------[Random] '+ret)
20.   return ret
22. }
24. /*
25.  * 函数名: Transform_10_To_16
26.  * 描述: 用于将10进制整数序列（参数的数据类型为Uint8Array）转换为16进制整数序列（输出的数据类型为字符串）的辅助函数
27.  */
28. function Transform_10_To_16(Sign_10:Uint8Array):string{
29.   let Array_16 = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
30.   let Sign_16:string = ''
31.   for(var item of Sign_10) Sign_16 += Array_16[(item-item%16)/16]+Array_16[item%16]
32.   console.info('------[MD5 16]: '+Sign_16.toString())
33.   return Sign_16
34. }
36. /*
37.  * 函数名: Generate_Sign
38.  * 描述: 通过MD5模块进行信息加密, 以生成签名
39.  */
40. async function Generate_Sign(query:string,appId:string, key:string, sequence_10:string){
42.   //预定义输出
43.   let output = {
44.     'ifComplete':false,
45.     'Sign_16':null,
46.   }
48.   //创建md模块
49.   let MD5 = cryptoFramework.createMd('MD5')
51.   //MD5加密的输入值
52.   let sign = appId + query + sequence_10 + key
54.   //数据转换
55.   var arr = []
56.   for(var i = 0 ; i < sign.length ; i++)arr.push(sign.charCodeAt(i))
57.   var dataBlog = {
58.     data:new Uint8Array(arr)
59.   }
60.   console.info('------[MD5 10] dataBlog: '+dataBlog.data.toString())
62.   //开始MD5加密
63.   await MD5.update(dataBlog)
64.   var SecretSign
65.   await MD5.digest().then((mdOutput) => {
66.     SecretSign = mdOutput.data
67.     console.info("------[MD5 10] MD result: " + SecretSign.toString());
68.     output.ifComplete = true
69.     output.Sign_16 = SecretSign
70.   }).catch((err) => console.error("------[MD5 10] err: " + err.code))
72.   output.Sign_16 = Transform_10_To_16(SecretSign)
74.   //输出加密结果
75.   return output
77. }
79. /*
80.  * 枚举名: TranslationForm
81.  * 描述: 用于确定翻译流程的始末
82.  */
83. export enum TranslationForm{
85.   From_En_To_Zh = 0,
87.   From_Zh_To_En = 1
89. }
91. /*
92.  * 数据类型名: TranslationResult
93.  * 描述: 类XL_Translation_Tool的translate方法返回的数据类型
94.  */
95. declare type TranslationResult = {
97.   ifComplete:boolean
99.   result:string
101.   description:string
103. }
105. class XL_Translation_Tool{
107.   private TAG:string = '------[XL_Translation_Tool] '
109.   private Baidu_Translation_API_URL_Prefix:string = 'https://fanyi-api.baidu.com/api/trans/vip/translate'
111.   private Baidu_APPID:string = ''
113.   private Baidu_Key:string = ''
115.   private If_Provide_Developer_Info:boolean = false
117.   /*
118.    * 方法名: provideDeveloperInfo
119.    * 描述: 为XL_Translation_Tool提供百度翻译平台的开发者信息, 这是百度翻译API得以被调用的前提
120.    */
121.   public provideDeveloperInfo(appId:string, key:string){
122.     this.Baidu_APPID = appId
123.     this.Baidu_Key = key
124.     this.If_Provide_Developer_Info = true
125.   }
127.   /*
128.    * 方法名: translate
129.    * 描述: 将输入的字符串信息, 通过百调用度翻译API进行翻译并返回
130.    */
131.   public async translate(message:string, form:TranslationForm):Promise<TranslationResult>{
133.     //预定义返回值
134.     var ret:TranslationResult = {
135.       ifComplete:false,
136.       result:null,
137.       description:''
138.     }
140.     //判断appId和key是否被提供
141.     if(!this.If_Provide_Developer_Info){
142.       ret.description = '请为翻译工具提供百度智能翻译平台的开发者信息'
143.       console.info(this.TAG+'Please provide the appId and key')
144.       return ret
145.     }
147.     //通过http模块实例化HttpRequest
148.     var httpRequest = http.createHttp()
150.     let from:string
151.     let to:string
152.     let query:string = message+''
154.     if(form == TranslationForm.From_En_To_Zh){
155.       from = 'en'
156.       to = 'zh'
157.     }else if(form == TranslationForm.From_Zh_To_En){
158.       from = 'zh'
159.       to = 'en'
160.     }
162.     //生成10位随机整数序列
163.     const RANDOM_SEQUENCE:string = Generate_number_Sequence_10()
165.     var sign:string
167.     //生成签名
168.     let msg = await Generate_Sign(query,this.Baidu_APPID,this.Baidu_Key,RANDOM_SEQUENCE)
169.     if(msg.ifComplete){
170.       sign = msg.Sign_16
171.     }else {
172.       ret.description = '加密过程出错, 请检查相关项'
173.       return ret
174.     }
176.     //拼接URL
177.     let url = this.Baidu_Translation_API_URL_Prefix
178.     +'?q=' + encodeURI(query)
179.     +'&from=' +from
180.     +'&to='+to
181.     +'&appid='+this.Baidu_APPID
182.     +'&salt='+RANDOM_SEQUENCE
183.     +'&sign='+sign
185.     console.info(this.TAG+'url: '+url)
187.     //调用request方法
188.     await httpRequest.request(url,{
189.       method:http.RequestMethod.POST,
190.       header:{
191.         'Content-Type': 'application/x-www-form-urlencoded'
192.       }
193.     }).then((data)=>{
194.       console.info(this.TAG+'Succeed in connecting to Internet')
195.       // @ts-ignore
196.       let trans_result = JSON.parse(data.result).trans_result
197.       console.info(this.TAG+'Result:' + data.result);
198.       console.info(this.TAG+'code:' + JSON.stringify(data.responseCode));
199.       console.info(this.TAG+'Translate output:'+trans_result[0].dst)
200.       ret.ifComplete = true
201.       ret.description = '翻译成功'
202.       ret.result = trans_result[0].dst
203.     }).catch(err => console.error(this.TAG+'err:'+JSON.stringify(err)))
205.     //销毁HttpRequest实例
206.     httpRequest.destroy()
208.     //返回翻译结果
209.     return ret
210.   }
212. }
214. //导出本模块
215. export default new XL_Translation_Tool()

复制代码

主页面

在页面Index.ets中，我们必要计划一个自定义弹窗（名为dialog1）。该弹窗有一个用@Link装饰器修饰的变量If_Provide_Developer_Info，表现此自定义弹窗组件与其父组件支持双向数据通报。弹窗中有两个文本输入组件，分别用于输入开辟者的App Id与密钥，而内容为"确定"的文本组件则用于调用XL_Translation_Tool实例的provideDeveloperInfo方法，将开辟者认证信息载入XL_Translation_Tool实例中。

1. //导入自定义的翻译工具
2. import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'
4. //主页面UI
5. @Entry
6. @Component
7. struct Index{
8.   ......
9. }
11. //自定义弹窗
12. @CustomDialog
13. struct dialog1{
15.   dialogController:CustomDialogController
16.   @Link If_Provide_Developer_Info:boolean
17.   @State private Baidu_AppId:string = ''
18.   @State private Baidu_Key:string = ''
20.   build(){
21.     Column(){
23.       Text('APP Id: ')
24.         .fontSize(20)
25.         .fontWeight(600)
26.         .fontColor(Color.Gray)
27.         .margin({
28.           top:20,
29.           bottom:4
30.         })
31.         .width('86%')
33.       TextInput()
34.         .type(InputType.Number)
35.         .width('95%')
36.         .height(40)
37.         .backgroundColor('#eeeeee')
38.         .onChange((value:string) => this.Baidu_AppId = value)
40.       Text('密钥: ')
41.         .fontSize(20)
42.         .fontWeight(600)
43.         .fontColor(Color.Gray)
44.         .margin({
45.           top:20,
46.           bottom:4
47.         })
48.         .width('86%')
50.       TextInput({
51.         text:this.Baidu_Key
52.       })
53.         .type(InputType.Password)
54.         .width('95%')
55.         .height(40)
56.         .backgroundColor('#eeeeee')
57.         .onChange((value:string) => this.Baidu_Key = value)
59.       Row(){
60.         Text('确认')
61.           .fontSize(24)
62.           .fontWeight(700)
63.           .fontColor(Color.Blue)
64.           .onClick(() => {
65.             this.dialogController.close()
66.             this.If_Provide_Developer_Info = true
67.             XL_Translation_Tool.provideDeveloperInfo(this.Baidu_AppId, this.Baidu_Key)
68.           })
70.         Text('取消')
71.           .fontSize(24)
72.           .fontWeight(700)
73.           .fontColor(Color.Red)
74.           .onClick(() => {
75.             this.dialogController.close()
76.           })
77.       }
78.       .width('100%')
79.       .margin({
80.         top:30
81.       })
82.       .justifyContent(FlexAlign.SpaceEvenly)
85.     }
86.     .height(260)
87.     .width('92%')
88.   }
90. }

复制代码

末了，编写页面入口Index。dialogController表现自定义弹窗组件dialog1的控制器。

1. //导入自定义的翻译工具
2. import XL_Translation_Tool, { TranslationForm } from 'ets/XL_Modules/XL_Translation_Tool'
4. //主页面UI
5. @Entry
6. @Component
7. struct Index {
9.   @State private If_Provide_Developer_Info:boolean = false
10.   @State private translation_mode:number = TranslationForm.From_En_To_Zh
12.   @State private translation_content:string = ''
13.   @State private translation_result:string = ''
15.   private dialogController = new CustomDialogController({
16.     builder:dialog1({
17.       If_Provide_Developer_Info:$If_Provide_Developer_Info
18.     })
19.   })
22.   private async Begin_Translate(){
23.     let result = await XL_Translation_Tool.translate(this.translation_content, this.translation_mode)
24.     this.translation_result = result.result
25.   }
27.   build() {
28.       Column() {
30.         Text('百度翻译API')
31.           .fontSize(36)
32.           .fontColor(Color.Pink)
33.           .fontWeight(800)
34.           .margin({
35.             top:20
36.           })
39.         Row(){
41.           Row() {
42.             Text('英译中')
43.               .fontSize(20)
44.               .fontColor('#8099ff')
45.               .fontWeight(800)
47.             Image($rawfile('image2.png'))
48.               .height(30)
49.               .width(30)
50.           }
52.           Text('提供密钥')
53.             .fontSize(20)
54.             .fontColor('#ff6666')
55.             .fontWeight(800)
56.             .onClick(() => this.dialogController.open())
58.         }
59.         .margin({
60.           top:20
61.         })
62.         .width('100%')
63.         .justifyContent(FlexAlign.SpaceEvenly)
65.         Text('输入')
66.           .fontSize(20)
67.           .fontWeight(600)
68.           .fontColor(Color.Gray)
69.           .margin({
70.             top:30,
71.             bottom:10
72.           })
73.           .width('86%')
76.         TextArea()
77.           .width('90%')
78.           .height(120)
79.           .border({
80.             width:3,
81.           })
82.           .onChange((value:string) => this.translation_content = value)
83.           .fontSize(21)
85.         Text() {
86.           Span('结果')
87.         }
88.         .fontSize(20)
89.         .fontWeight(600)
90.         .fontColor(Color.Gray)
91.         .margin({
92.           top: 30,
93.           bottom: 10
94.         })
95.         .width('86%')
98.         TextArea({
99.           text:this.translation_result
100.         })
101.           .width('90%')
102.           .height(150)
103.           .border({
104.             width:3,
105.           })
106.         .fontSize(21)
109.         Row(){
111.           Image($rawfile('image1.png'))
112.             .height(40)
113.             .width(40)
115.           Text('翻译')
116.             .fontWeight(700)
117.             .fontSize(24)
118.             .fontColor(Color.White)
119.             .margin({
120.               left:20
121.             })
123.         }
124.         .width('93%')
125.         .height(50)
126.         .backgroundColor('#8099ff')
127.         .borderRadius(30)
128.         .justifyContent(FlexAlign.Center)
129.         .margin({
130.           top:50
131.         })
132.         .onClick(() =>{
133.           if(!this.If_Provide_Developer_Info){
134.             this.dialogController.open()
135.             return
136.           }
137.           console.info('------[ArkUI] '+'--'+this.translation_content+'--')
138.           this.Begin_Translate()
139.         })
142.       }
143.       .width('100%')
144.   }
145. }
147. //自定义弹窗
148. @CustomDialog
149. ......

复制代码

如许之后，调用百度API的案例便编写完成了，使用模拟器或真机可以查看运行效果。受一些奇怪的bug的影响，本案例中的翻译功能只支持英译中。
总结

通过本次案例，信赖你已经学会怎样在HarmonyOS中调用百度翻译API。
末了

假如你想快速提拔鸿蒙技术，那么可以直接领取这份包含了：【OpenHarmony多媒体技术、Stage模子、ArkUI多端部署、分布式应用开辟、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战】等技术知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙核心技术学习门路

2.大厂口试必问口试题

3.鸿蒙南向开辟技术

 4.鸿蒙APP开辟必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开辟白皮书V2.0PDF

这份全套完备版的学习资料已经全部打包好，朋友们假如必要可以点击→鸿蒙Next全套VIP学习资料免费领取（安全链接，放心点击）


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。