80 lines
2.3 KiB
Markdown
80 lines
2.3 KiB
Markdown
# 翻译小程序效果演示
|
||
|
||
|
||
|
||
**关于翻译接口**
|
||
|
||
在制作翻译小程序的时候，我们会用到第三方翻译接口，本例中采用的是百度翻译 API。
|
||
|
||
首先搜索【百度翻译开放平台】
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-12-063224.png" alt="image-20230112143224000" style="zoom:50%;" />
|
||
|
||
如果你没有百度的账号，需要注册一个百度的账号
|
||
|
||
接下来选择【产品服务】-【通用翻译】
|
||
|
||
|
||
|
||
接下来需要去阅读【接入文档】
|
||
|
||
- 当注册成为百度翻译开发者之后，会给你提供一个 APPID
|
||
- 注意，这个 APPID 不是微信小程序的 APPID，该 APPID 会在每次调用翻译接口的时候都需要传入的
|
||
- 另外，需要在微信小程序后台配置百度翻译的域名
|
||
|
||
|
||
|
||
<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>
|
||
```
|
||
|
||
|