目录

先看一下做出来的效果：

一、微信开发平台的网址（微信开发者工具的官方使用说明）

二、百度API（文本翻译的API）

三、进入正文，微信小程序的代码部分

---

先看一下做出来的效果：

一、微信开发平台的网址（微信开发者工具的官方使用说明）

基础 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/

 

二、百度API（文本翻译的API）

文本翻译_机器翻译-百度AI开放平台 (baidu.com)https://ai.baidu.com/tech/mt/text_trans

 

1、点击立即使用，然后登录账号（需要实名认证），然后看到下图的界面。

 

2、先点击“去领取”，进入如下页面。

 

3、 点击“去创建”进入下图界面

 

 4、跳转如下界面：

 

 5、点击“查看应用详情”，获取“API Key”和“Secret Key”。这两条key下面步骤需要用。

 

 6、然后点击左侧栏的“技术文档”-->“API文档”-->“文本翻译-通用版”

机器翻译 - 文档 (baidu.com)https://cloud.baidu.com/doc/MT/s/4kqryjku9

 

7、点击蓝色字体跳转页面

 

 8、找到并复制下图网址，进行替换后，在新的页面打卡替换后的网址

 

 ！！！注意“&”符号要保留

 

9、在新的网页输入网址出现下图界面，获取access_token

 

10、进入使用说明，按照文档要求来写。

机器翻译 - 文档 (baidu.com)https://cloud.baidu.com/doc/MT/s/4kqryjku9

 

三、进入正文，微信小程序的代码部分

1、wxml代码

<view></view>
<view class="head"><rich-text>翻译</rich-text>
</view><view class="t_c"><view class="text"><text class="info">请输入翻译内容：</text><!-- 输入的时候就会触发inputInfo函数，{{text}}里的text对应js的data中的text --><textarea class="my_input" rows="8" value="{{text}}" bindinput="inputInfo"></textarea><view class="action"><!-- bindtap里的函数在点击对应图片时被调用 点“译”调用search函数，del函数同理（调用时清空翻译内容和翻译结构） --><image class="search" src="../../icon/翻译.png" bindtap="search"></image><image class="del" bindtap="del" src="../../icon/删除.png"></image></view></view><view class="tran_text"><text class="info">翻译结果：</text><!-- {{translation}}对应data中的translation即翻译结果 --><textarea class="tran_content" rows="8" value="{{translation}}"></textarea></view>
</view>

 2、wxss代码（样式）

Page{background-color: #5f8ae7;
}.head{font-size: 42rpx;text-align: center;background-color: #3d59ab;padding: 10rpx;color: #fff;
}.info{margin-top: 10rpx;margin-left: 10rpx;margin-bottom: 10rpx;color: white;
}.text{width: auto;height: 530rpx;display: flex;justify-content: flex-start;flex-wrap: wrap;border-bottom: 20rpx white solid;
}.my_input{width: 100%;height: 350rpx;margin-left: 1rpx;margin-right: 1rpx;margin-bottom: 15rpx;background-color: white;border: 2rpx solid #292421;color: #292421;
}.action{width: 100%;height: 28rpx;display: flex;margin: 15px;justify-content:space-between;align-items: center;
}
.search{width: 64rpx;height: 64rpx;
}.del{width: 64rpx;height: 64rpx;
}.tran_text{width: auto;height: 480rpx;display: flex;justify-content: flex-start;flex-wrap: wrap;
}.tran_content{width: 100%;height: 390rpx;margin-left: 1rpx;margin-right: 1rpx;background-color: white;border: 2rpx solid #292421;
} 

3、js代码及解释（json文件没改动）

（1）wx.request使用说明如下文档。

RequestTask | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

 

（2）获取下面url的前缀

 

 （3）打印res，找翻译结果，如下图所示

 

js代码

Page({data: {token:'24.14dcdb7e07a794f2ffd736641847f7bf.2592000.1666952487.282335-27674044',//刚刚在百度API网页上获取的access_toknetext: "请输入需要翻译的中文内容",//初始页面展示的文本内容，对应“请输入翻译内容”下面输入框的文本translation: "",//用于接收翻译的结果，然后显示在页面上},// 点击删除图片时，调用del函数del(){// this.setData可以修改data中的数据，并且刷新页面，显示修改好的新数据this.setData({text:'',translation:''})},// 点击“译”时，调用search函数。这里需用调用wx.request来发起 HTTPS 网络请求。// 后附wx.request的说明文档。search(){console.log(this.data.text);wx.request({// https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token= 获取方式见 文章的3.（2）url: 'https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token='+this.data.token,data:{'from':'zh',//源语种方向'to':'en',//目标语种方向'q':this.data.text//输入的要翻译的内容，我这里用this.data.text来取上面输入的文本内容，即需要翻译的文本内容},header:{//请求头'Content-Type':	'application/json;charset=utf-8'},method:'POST',//HTTP 方法success: (res)=>{//函数调用成功的回调函数// 可以打印一下res，然后发现结果存在res.data.result.trans_result[0].dst// console.log(res);let result = res.data.result.trans_result[0].dst//新建一个变量result来存翻译的结果// console.log(res.data.result.trans_result[0].dst)this.setData({translation:result//把结果展示在页面上})},fail:(err)=>{console.log(err);}})},// 输入时触发该函数，用于获取要翻译的内容inputInfo(e){// console.log(e.detail.value)// this.data.text = e.detail.valuethis.setData({text:e.detail.value,})},
})