【通用文本翻译API】微信小程序实战演示，保姆级教程，亲测可用！

本文链接：https://blog.youkuaiyun.com/orbit4/article/details/143875744

一、事前准备

微信开发者工具微信开发者工具下载地址与更新日志 | 微信开放文档

（无需多言,有需要请自行下载工具和开通微信小程序账号，网上教程多，请自行搜索）

百度翻译开放平台百度翻译开放平台

根据流程：登录，注册，认证，开通

开通翻译API服务

由于本人已经申请，所以显示这种情况。

如果还没有开通，自行按要求进行申请开通即可。

点击这里，查看你的开发者信息（一些信息、申请、认证情况等等）

注意注意！！以下画框的三个内容在开发过程中会非常重要！

在代码部分会讲解。

二、如何使用

当你看到这一步，就默认你走完上述的流程。以下是代码部分。

（一）页面部分：

//html

<div>
    <div>一个测试百度翻译api的案例</div>
    <div>
        <input style="border: 1px black solid;" type="text" id="query" bind:change="inputQuery" />
        <button bindtap="setTranslateApi">文本翻译</button>
    </div>
    <div wx:if="transResult">翻译结果:{
  
  {transResult}}</div>
</div>

（二）JS部分：

引入第三方库（需要下载，下文有教程）

import md5 from 'js-md5';

案例用到的数据

  data: {
    query: '', //存储输入的文本内容
    transResult:'',  //存储翻译生成的结果
  },

获取并存储文本框的输入内容

  inputQuery: function (e) {
    this.setData({
      query: e.detail
    });
  },

生成数字随机码

generateRandomString: function (length) {
    var result = '';
    var characters = '0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  },

发送翻译请求

setTranslateApi: function () {
    var that=this;
    let query = this.data.query.value;
    if (query) {
      console.log("预翻译文本是", query);
    } else {
      console.log("输入内容不能为空");
    }
    let appid = "xxxx";  //替换成你自己的百度appid
    let secertKey='xxx'; //替换成你自己的百度密钥
    var salt = this.generateRandomString(10);  //生成随机数字字符串，传的参数表示生成多少位
    console.log('生成的10位随机码,',salt);
    let sign=md5(appid+query+salt+secertKey);
    console.log("生成的sign签名是,",sign);
    wx.request({
      url: "https://fanyi-api.baidu.com/api/trans/vip/translate",
      data: {
        q: query,
        from: 'zh',
        to: 'en',
        appid: appid,
        salt: salt,
        sign: sign
      },
      success(res) {
        var result = res;
        console.log("得到的翻译结果",res.data, res.data.trans_result);
          that.setData({
              transResult:res.data.trans_result[0].dst
        })
      },
      fail() {
        uni.showModal({
          title: "错误!",
          content: "网络错误!",
          complete() {
            this.translate_source = ""
          }
        })
      }
    })
  },