鸿蒙上实现翻译功能

　　本章节我们来制作中文翻译成英文的实例（运行在 HarmonyOS 上），通过 HTTP 去配合 API 进行实现。
　　需求分析如下：文字输入HTTP协议使用文字翻译
　　控件介绍 ①HTTP 数据请求官方文档
　　请求行：代表使用 POST 或者 GET；请求头：主要的一些设定参数；请求体：数据。
　　场景介绍
　　应用通过 HTTP 发起一个数据请求，支持常见的 GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT 方法。
　　接口说明
　　HTTP 数据请求功能主要由 http 模块提供。
　　使用该功能需要申请 ohos.permission.INTERNET 权限。
　　权限申请请参考访问控制（权限）开发指导： https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/security/accesstoken-guidelines.md/
　　涉及的接口如下表，具体的接口说明请参考 API 文档。 https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/apis/js-apis-http.md/
　　使用例程 如下：import http from ＂@ohos.net.http＂;  // 每一个httpRequest对应一个http请求任务，不可复用 let httpRequest = http.createHttp();  // 用于订阅http响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息 // 从API 8开始，使用on(＂headersReceive＂, Callback)替代on(＂headerReceive＂, AsyncCallback)。8+ httpRequest.on(＂headersReceive＂, (header) => {     console.info(＂header: ＂ + JSON.stringify(header)); });  httpRequest.request(     // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定     ＂EXAMPLE_URL＂,     {         method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET         // 开发者根据自身业务需要添加header字段         header: {             ＂Content-Type＂: ＂application/json＂         },         // 当使用POST请求时此字段用于传递内容         extraData: {             ＂data＂: ＂data to send＂,         },         connectTimeout: 60000, // 可选，默认为60s         readTimeout: 60000, // 可选，默认为60s     }, (err, data) => {         if (!err) {             // data.result为http响应内容，可根据业务需要进行解析             console.info(＂Result:＂ + data.result);             console.info(＂code:＂ + data.responseCode);             // data.header为http响应头，可根据业务需要进行解析             console.info(＂header:＂ + JSON.stringify(data.header));             console.info(＂cookies:＂ + data.cookies); // 8+         } else {             console.info(＂error:＂ + JSON.stringify(err));             // 该请求不再使用，调用destroy方法主动销毁。             httpRequest.destroy();         }     } );输入框官方文档：https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md/
　　TextInput({ placeholder: ＂input your word...＂, controller: this.controller })         .placeholderColor(Color.Grey)         .placeholderFont({ size: 14, weight: 400 })         .caretColor(Color.Blue)         .width(400)         .height(40)         .margin(20)         .fontSize(14)         .fontColor(Color.Black)         .onChange((value: string) => {           this.text = value         })
　　UI 设计 ①输入框
　　首先创建变量,作为输入框的控制器，并且创建一个 string 数组，用来接收输入框中的变量。 @State IN_Value: string = ＂＂  controller: TextInputController = new TextInputController()
　　此时屏幕中出现一个输入框：
　　②按钮
　　Button(＂翻  译＂)           .width(＂60%＂)           .height(60)           .fontSize(30)③显示框
　　在这里把要输出的幅值给 TEXT： Text(this.Out_Value)           .fontSize(25)           .width(＂80%＂)           .height(100)           .textAlign(TextAlign.Center)           .border({ width: 1 })
　　功能设计 ①联网权限
　　②HTTP 功能
　　先把最基本的实现，包括包的导入，基本函数的创建： import http from ＂@ohos.net.http＂;   // 每一个httpRequest对应一个http请求任务，不可复用 let httpRequest = http.createHttp();   // 用于订阅http响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息 // 从API 8开始，使用on(＂headersReceive＂, Callback)替代on(＂headerReceive＂, AsyncCallback)。 8+ httpRequest.on(＂headersReceive＂, (header) => {   });
　　再编写功能模块： httpRequest.request(               // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定               ＂http://fanyi.youdao.com/translate?&doctype=json&type=AUTO&i=＂ + this.IN_Value,               {                 method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET                 connectTimeout: 60000, // 可选，默认为60s                 readTimeout: 60000, // 可选，默认为60s               }, (err, data) => {               if (!err) {                 // data.result为http响应内容，可根据业务需要进行解析                  var Get_Return = data.result.toString()                 var Begin_Num =  Get_Return.indexOf(＂＂tgt＂:＂＂)                 var Last_Num = Get_Return.lastIndexOf(＂＂}＂)                 var Get_char = Get_Return.substring(Begin_Num+7,Last_Num)                 console.log(JSON.stringify(Get_char));                 this.Out_Value = Get_char                  //console.log(＂hello world＂.lastIndexOf(＂o＂));                  } else {                 // 该请求不再使用，调用destroy方法主动销毁。                 httpRequest.destroy();               }             }             );③数据处理函数substring()：console.log(＂JavaScript＂.substring(0, 4)); // ＂Java＂ console.log(＂JavaScript＂.substring(4)) // ＂Script＂
　　用于从原字符串取出子字符串并返回，不改变原字符串，跟 slice 方法很相像。
　　它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果）不含该位置。 indexOf()：console.log(＂hello world＂.indexOf(＂o＂)); // 4 console.log(＂JavaScript＂.indexOf(＂script＂)); // -1
　　用于确定一个字符串在另一个字符串中 第一次出现 的位置，返回结果是匹配开始的位置。如果返回 -1，就表示不匹配。 lastIndexOf()：console.log(＂hello world＂.lastIndexOf(＂o＂)); // 7
　　从尾部开始遇到的第一次出现的位置，这个位置的返回结果是 从左边开始算起，而不是从右边开始算起。
　　程序验证
　　如上图所示，已经实现了翻译功能，在下个章节会加入翻译后发音功能。