WxBit调用阿里云文本翻译API实现——app同声翻译

一、阿里云

1、调用阿里云文本翻译API

登上 阿里云 （或者别的平台，会调用 文本翻译API 就行）

登上后在这里搜索“文本翻译”

然后

然后下翻，找到这个（不一样的需要自己调试）

然后点免费试用

详细看看这些信息

点击获取认证可查到自己的AppCode

这里查看对应API调用方法

详看请求示例：

代码解析，可得

url为——调用地址

即调用地址

app调用网址为

2、解读一下代码中的请求参数——请求头

然后详细看这个代码得请求参数：（上面请求示例代码）

//using System.IO; //using System.Text; //using System.Net; //using System.Net.Security; //using System.Security.Cryptography.X509Certificates; private const String host = "https://trl.market.alicloudapi.com"; private const String path = "/translate/exec"; private const String method = "POST"; private const String appcode = "你自己的AppCode"; static void Main(string[] args) { String querys = ""; String bodys = "source=en&text=As+of+December+24%2C+the+number+of+domestic+flights+booked+for+the+Spring+Festival+holidays+of+2025+%28January+28+to+February+4%2C+2025%29+exceeded+244%2C000%2C+while+the+number+of+domestic+flights+booked+for+the+arrival+and+departure+flights+exceeded+1220%2C000%2C+an+increase+of+about+37+per+cent.+The+last+three+days+before+the+New+Year%27s+Eve+were+the+peak.+As+for+airfare+prices%2C+airline+managers%27+data+showed+that+as+of+December+23%2C+the+average+fares+%28excluding+taxes%29+for+economic+class+domestic+flights+for+the+spring+season+of+2025+fell+by+2.2+per+cent+year-on-year.+The+same-day+travel+data+also+showed+a+slight+decline+in+the+prices+for+airfares+for+major+routes.+For+example%2C+for+airfares+departing+from+Hangzhou%2C+the+lowest+prices+for+hot+cities+such+as+Kunming%2C+Asia%2C+Haikou+and+Guangzhou+ranged+from+200&target=zh"; String url = host + path; HttpWebRequest httpRequest = null; HttpWebResponse httpResponse = null; if (0 < querys.Length) { url = url + "?" + querys; } if (host.Contains("https://")) { ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult); httpRequest = (HttpWebRequest)WebRequest.CreateDefault(new Uri(url)); } else { httpRequest = (HttpWebRequest)WebRequest.Create(url); } httpRequest.Method = method; httpRequest.Headers.Add("Authorization", "APPCODE " + appcode); //根据API的要求，定义相对应的Content-Type httpRequest.ContentType = "application/x-www-form-urlencoded; charset=UTF-8"; if (0 < bodys.Length) { byte[] data = Encoding.UTF8.GetBytes(bodys); using (Stream stream = httpRequest.GetRequestStream()) { stream.Write(data, 0, data.Length); } } try { httpResponse = (HttpWebResponse)httpRequest.GetResponse(); } catch (WebException ex) { httpResponse = (HttpWebResponse)ex.Response; } Console.WriteLine(httpResponse.StatusCode); Console.WriteLine(httpResponse.Method); Console.WriteLine(httpResponse.Headers); Stream st = httpResponse.GetResponseStream(); StreamReader reader = new StreamReader(st, Encoding.GetEncoding("utf-8")); Console.WriteLine(reader.ReadToEnd()); Console.WriteLine("\n"); } public static bool CheckValidationResult(object sender, X509Certificate certificate, X509Chain chain, SslPolicyErrors errors) { return true; }

一、请求整体说明

这是POST表单请求，Content-Type: application/x-www-form-urlencoded，参数放在**请求体（Body）**里，不是URL问号后面。

String bodys = "source=en&text=As+of+December+24%2C+......&target=zh";

bodys就是POST表单参数，格式：key1=value1&key2=value2&key3=value3

三个核心参数

1. source：源语言（原始文本是什么语言）source=en→ en = English 英文
2. target：目标语言（你想要翻译成什么语言）target=zh→ zh = Chinese 中文
3. text：待翻译原文（最重要参数）（语音输入得文字内容）

   text=后面一大串就是要翻译的句子。 里面+代表空格，%2C代表逗号，这叫URL编码。 原因：表单传输时，空格、逗号、&等符号有特殊含义，必须转码，否则接口解析参数错乱。

公式：source=源语种&text=【URL编码后的原文】&target=目标语种

二、URL编码说明（你WxBit踩坑重点）

例子：

• 原文空格 → 编码变成+
• 逗号,→ 编码变成%2C
• &→%26
• 中文也需要URL编码

⚠️ 坑：如果你直接把带空格中文塞进 text= 后面，不做URL编码，接口就会报参数错误！你C#示例里是提前手动编码好的长文本；但是WxBit中，直接拼接&text=+标签文本，没有自动URL编码，遇到空格、中文、&符号就炸。

三、请求头里的鉴权参数（不属于表单bodys，但属于HTTP请求参数）

2.1两个请求头：！！！

第一个：

httpRequest.Headers.Add("Authorization", "APPCODE " + appcode);

• Header：Authorization
• 值：APPCODE 你的AppCode字符串这是身份认证，告诉阿里云这个请求是谁，没有这个头直接401鉴权失败。

第二个：

还有一个Header：

httpRequest.ContentType = "application/x-www-form-urlencoded; charset=UTF-8";

告诉服务器：请求体是表单格式，字符集UTF-8。少这个头，服务器无法正确解析bodys里的参数。

四、querys（URL查询参数，本例为空）

String querys = ""; if (0 < querys.Length) { url = url + "?" + querys; }

querys是URL上?后面的参数，比如[https://xxx.com?a=1&b=2](https://xxx.com?a=1&b=2)。当前代码querys是空，所以没有URL参数，全部参数都放在POST请求体bodys里面。

五、完整请求结构汇总

• 请求地址：[https://trl.market.alicloudapi.com/translate/exec](https://trl.market.alicloudapi.com/translate/exec)
• 请求方法：POST
• 请求头：
  1. Authorization: APPCODE xxxxxx
  2. Content-Type: application/x-www-form-urlencoded; charset=UTF-8
• 请求体（表单参数）：source=en&text=URL编码后的原文&target=zh

六、对应到我们的WxBit项目

WxBit HTTP客户端 POST请求：

1. 请求头必须添加两行：

   • Authorization：APPCODE 你的appcode
   • Content-Type：application/x-www-form-urlencoded; charset=UTF-8

2. POST文本内容：source=en&text=xxxx&target=zh

   ⚠️ WxBit原生拼接字符串不会自动URL编码！ 当原文包含空格、逗号、中文、&符号时，就会出现参数错误。 解决方案：WxBit里需要先用【URL编码】积木处理标签_原文.文本，再拼接到text=后面。

2.2、WxBit可视化积木操作步骤

app模块积木（参考）

（上面看懂了这个可不用看）

3、WxBit 阿里云翻译API HTTP请求头详细讲解（！！！）

接口：阿里云市场机器翻译trl.market.alicloudapi.com/translate/exec请求方式：POST，表单提交application/x-www-form-urlencoded需要两个请求头，缺一不可，下面逐个拆解。

3.1、请求头1：Authorization

• Header名称：Authorization
• Header值模板：APPCODE 你的AppCode

  ⚠️ 注意：APPCODE后面有一个空格，不能丢！

作用

这是接口的身份凭证，相当于登录密码。阿里云服务器收到请求，就读这个请求头里的APPCODE，校验：

1. APPCODE是否存在
2. 这个接口包是否已经购买开通
3. 调用次数额度是否充足

常见错误

• 少空格：写成APPCODExxxxxx→ 鉴权失败，返回401
• 多空格、前后多余换行、不可见空白字符 → 401
• AppCode复制错，多一位少一位 → 401
• 放到POST请求体里面，不是放到请求头 → 鉴权失败

✅ 正确示例：Authorization: APPCODE 789abc123456789abc

3.2、请求头2：Content-Type

• Header名称：Content-Type
• Header值：application/x-www-form-urlencoded; charset=UTF-8

作用

告诉后端服务器：

本次POST请求体的数据格式是URL编码表单，字符集是UTF-8。

服务器拿到这个头之后，才知道怎么解析POST里面的source=en&text=xxx&target=zh这一串参数。 如果缺少这个请求头，服务器不知道数据是什么格式，无法正确拆分source、text、target三个参数，直接报参数异常。

字段拆分理解

1. application/x-www-form-urlencoded标准网页表单提交格式，key=value用&分隔；特殊字符（空格、逗号、中文）要URL编码。
2. charset=UTF-8指定编码。如果不写UTF-8，中文文本传输会乱码，翻译结果出错。

常见错误

• 写成application/json：完全错！这个接口不是JSON接口，不能用json格式传参。
• 漏写charset=UTF-8：中文乱码。
• 大小写问题：Content-type小写一般兼容，但规范写法首字母大写Content-Type。

搭配POST请求体（表单）完整配套说明

请求头 + POST请求体，两者配合使用。 POST请求体格式：

source=en&text=URL编码后的待翻译文本&target=zh

• source：源语言，en英文 /zh中文
• target：目标语言，zh中文 /en英文
• text：必须先URL编码，再拼接进去！

重点：请求头是HTTP头部信息，和POST正文是分开两块！ 请求头不存放业务参数（source/text/target）；业务参数全部放在POST正文。

二、WxBit

1、主要组件：

1.1、下拉框（Spinner）：WxBit 下拉框完整使用教程

一、界面设计器里配置（右侧组件属性面板）

选中下拉框1，右侧属性面板：

1. 元素字符串：用来填写下拉选项，多个选项用英文逗号分隔示例：zh,en

   界面下拉列表就会出现两个选项：zh、en 如果你想显示中文：中文,英文，后续逻辑里再映射成zh/en

2. 选中项：设置APP打开时默认选中的值，你现在填的zh，打开APP默认选中zh
3. 是否显示、是否启用：勾选启用

⚠️ 注意：逗号必须是英文半角逗号，中文逗号会识别成选项文本的一部分。

如下面所示：

zh,en,ja,ko,de,fr,es,ru,pt,ar,hi,it,tr,vi,ur,nl,th,pl,sv,id,fa,ms,te,ta,az,bn,xh,sw,hr,mr,my,mk,gl,he,fi,cs,lt,lv,sl,ka,km,si,ro,nl,ne

二、逻辑积木（逻辑设计页）核心用法

1. 获取用户选中的文本

积木：下拉框1.选中项

• 用户选en→ 积木返回文本en

• 用户选zh→ 积木返回文本zh直接拿去拼接HTTP POST参数：source=下拉框1.选中项&text=xxx&target=下拉框2.选中项，完美适配你的翻译接口！

2. 下拉框选中事件下拉框1 当选择后

当用户点击下拉框切换选项时，触发这个积木内代码。 例：切换语言后，立刻更新标签提示文字。

3. 动态修改下拉选项（代码里动态增删）

下拉框1.设置元素列表为 [列表积木]或者下拉框1.设置元素字符串为 "zh,en,ja"适合程序运行时动态加载语种。

4. 获取选中序号

下拉框1.选中项索引，从1开始；选第一项返回1，第二项返回2。一般语言选择不需要索引，优先用【选中项】。

三、结合你的翻译项目完整示例

目标：两个下拉框，下拉框1=源语言，下拉框2=目标语言

1. 下拉框1【元素字符串】：zh,en，默认选中en
2. 下拉框2【元素字符串】：zh,en，默认选中zh
3. 【翻译按钮点击事件】积木逻辑：

拼接POST文本 = "source=" + 下拉框1.选中项 + "&text=" + URL编码(标签_原文.文本) + "&target=" + 下拉框2.选中项 HTTP客户端1.POST(地址, 请求头列表, 拼接POST文本)

这样用户在APP下拉框随便切换中英互译，自动替换API里source、target参数！

四、常见坑

1. 中文逗号分隔选项：zh，en（中文逗号），会当成一个选项文本，列表错乱。必须英文逗号zh,en
2. 元素字符串带多余空格：zh , en，选项文本会带空格，拿到的值变成zh，传给接口参数错误。
3. 混淆【选中项】和【选中索引】：索引是数字，不能直接放到source=参数，要用选中项（文本）
4. 初始默认值不在元素列表内：比如元素是zh,en，选中项填jp，会异常。

1.2、图像框和百度语音识别：

WxBit可视化积木操作

1.3、WxBit 提取 JSON 字段的核心积木

返回的JSON：

{"status": 200, "msg": "请求成功", "data": {"text": "I come from China.", "time": "2026-10-20 02:24:45", "language": "en"}}

1. JSON：轻量级键值对数据格式，API 接口返回数据的标准格式，用来在服务器和小程序 / WxBit 之间传递信息。
2. JSON 对象：大括号{}包裹的整体就是一个 JSON 对象。
3. 键 (key) / 值 (value)："status":200，status是键，200是对应的值。
4. 嵌套对象：data这个键的值，又是一个子 JSON 对象，里面包含text、time、language。

层级关系：根对象 →data对象 →text字段，我们要提取的就是data里面text的值：I come from China.

WxBit 提取 JSON 字段的核心积木

WxBit 里处理 JSON 的核心组件：JSON 解析积木（JSON 转字典）

原理：把文本字符串格式的 JSON，转换成 WxBit 内部的字典（Map / 键值对集合），字典可以通过【键名】读取对应数据。

JSON 转字典输入：JSON 字符串。 作用：解析文本，把 JSON 文本转换成 WxBit 运行环境里的字典对象。

字典：一种键值对容器，支持通过键(key)查询对应值(value)。没有这一步，后续获取字典的值积木会报错。

综上，想要提取返回的JSON文本字符串

{"status": 200, "msg": "请求成功", "data": {"text": "I come from China.", "time": "2026-10-20 02:24:45", "language": "en"}}

里面的data这个键的值中的又一个子 JSON 对象，里面包含text、time、language

WxBit可视化积木操作

2、布局效果：

3、实现效果：

点击输入框下拉框，先选择输入的语言，然后再选择输出的语言，选择完成之后，点击下面的麦克风图标可以语音输入，松开后，语音输入完成，同时语音文本显示到“原文”位置。然后点击翻译，可以将上面的文本翻译成对应的语言。点击朗读，可以朗读这些翻译内容。最下面的话是网站返回的JSON格式的纯文本字符串