# 翻译小程序效果演示



**关于翻译接口**

在制作翻译小程序的时候，我们会用到第三方翻译接口，本例中采用的是百度翻译 API。

首先搜索【百度翻译开放平台】

<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-063224.png" alt="image-20230112143224000" style="zoom:50%;" />

如果你没有百度的账号，需要注册一个百度的账号

接下来选择【产品服务】-【通用翻译】

![image-20230112143332418](https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-063332.png)

接下来需要去阅读【接入文档】

- 当注册成为百度翻译开发者之后，会给你提供一个 APPID
- 注意，这个 APPID 不是微信小程序的 APPID，该 APPID 会在每次调用翻译接口的时候都需要传入的
- 另外，需要在微信小程序后台配置百度翻译的域名

![image-20230112143836524](https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-063836.png)

<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-063926.png" alt="image-20230112143926722" style="zoom:50%;" />

在进行翻译的时候，需要对内容进行 md5 加密，可以从 md5.min.js 中引入 md5 方法

```js
import md5 from './md5.min.js'
```

在进行翻译的时候，有几个参数是必填：

<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-064150.png" alt="image-20230112144150625" style="zoom:50%;" />

示例如下：

```js
const appid = ''  // 注册百度翻译api
const key = ''    // 注册百度翻译api
let salt = Date.now()  //随机数
let sign = md5(`${appid}${q}${salt}${key}`)  //拼接 MD5进行加密
wx.request({
  url: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
  data: {
    q,  //待翻译文本
    from,  //待翻译的原始语言
    to,   //待翻译成的目标语言
    appid,
    salt,  //随机数
    sign   //拼接 MD5进行加密
  },
  success(res) {
    // ...
  },
```



**关于 iconfont 的使用**

整个翻译小程序中是有一些图标的，这些图标来源于 iconfont

接下来大家需要做的事情，就是在全局的 wxss 中引入这个 iconfont 的样式表

```css
@import "./assets/iconfont/iconfont.wxss";
```

之后，在书写页面时，就可以直接使用了

```wxml
<text class="iconfont icon-down"></text>
```