微信小程序 通过百度API接口实现汉译英翻译

目录

先看一下做出来的效果：

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

二、百度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_tokne
    text: "请输入需要翻译的中文内容",//初始页面展示的文本内容，对应“请输入翻译内容”下面输入框的文本
    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.value
    this.setData({
      text:e.detail.value,
    })
  },
})