翻译小程序效果演示

关于翻译接口

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

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

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

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

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

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

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

import md5 from './md5.min.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 的样式表

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

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

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

2.3 KiB Raw Permalink Blame History Unescape Escape

翻译小程序效果演示

2.3 KiB

Raw Permalink Blame History