微信翻译助手小程序 day2 -翻译功能页

今日学习目标

主要完成学习目标：
（1）tab效果页构建。
（2）翻译页面绘制。
（3）翻译功能实现。

任务1.1 tab效果页构建
1． 构建顶部tab效果页效果。

导入相关信息资源库
整理初始代码，删除部分文件及代码。
1.1 打开app.js文件，删除自带代码，只保留以下代码。

//app.js
App({
})

1.2 删除logs文件包。
1.3 打开app.json文件，删除"pages/logs/logs"，保留以下代码。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#1c1b21",
    "navigationBarTitleText": "翻译小助手",
    "navigationBarTextStyle": "white"
  },
}

1.4 删除index.wxml和index.wxss中所有代码。
1.5 打开index.js文件，删除自带代码，只保留以下代码。

//index.js
//获取应用实例
const app = getApp()
Page({
})

2.构造顶部tab页效果
2.1新建pages/history目录，在该目录下新建history页面。项目结构如下图：

2.2 相同办法，新建change页面，项目结构如下图：

2.3打开app.json文件，添加tab页设置，顺序添加如下代码：

"tabBar": {
    "position": "top",
    "color": "#595959",
    "selectedColor": "#1c1b21",
    "borderStyle": "white",
    "list": [
      {
        "text": "翻译",
        "pagePath": "pages/index/index"
      },
      {
        "text": "历史",
        "pagePath": "pages/history/history"
      }
    ]
  }

3.导入项目需要的资源包。
3.1 在项目目录下创建assets/iconfont文件夹，将资源文件包中的iconfont.wxss资源文件放入其中，目录结构如下：

3.2 打开app.wxss文件，修改文档内容代码，引入iconfont.wxss文件，替换如下所有代码：

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

.container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5fafe;
} 

任务2.2 翻译页面绘制

完成如下图所示效果展示：

任务实施
1.为翻译页面添加页面渲染，打开index.wxml文件，添加如下代码：

<!--index.wxml-->
<view class='container'>
  <view class='to-change-page'>
    <navigator url='/pages/change/change'>
      <text class='lang'>翻译成{{curLang.chinese}}</text>
      <text class='iconfont icon-down'></text>
    </navigator>
  </view>

  <view class='textarea-container'>
    <textarea placeholder='请输入要翻译的文本' placeholder-style='color: #8995a1;' value='{{query}}' bindinput='onInput' bindconfirm='onConfirm'></textarea>
    <text class='iconfont icon-close' bindtap='onTapClose' hidden='{{hideCloseIcon}}'></text>
  </view>

  <button bindtap='onConfirm'>点击翻译</button>

  <view class='output-area'>
    <text class='title'>译文</text>
    <view class='result-container'>
      <view class='result' wx:if='{{translateResult}}'>{{translateResult}}</view>
    </view>
  </view>

  <view class='copyright'>
    <text>© 2019 strugglebak</text>
  </view>
</view>

2.为翻译页面添加样式文件，打开index.wxss文件，添加如下代码：

/**index.wxss**/
.to-change-page {
  display: flex;
  align-items: center;
  color: #8995a1;
  font-size: 24rpx;
  padding: 20rpx 40rpx;
}
navigator .iconfont {
  font-size: 20rpx;
  color: #8995a1;
}
.textarea-container {
  background: white;
  position: relative;
}
.textarea-container textarea {
  background: white;
  font-size: 34rpx;
  padding: 30rpx;
}
.textarea-container .iconfont {
  position: absolute;
  top: 30rpx; right: 40rpx;
  z-index: 999;
  font-size: 40rpx;
  color: #888;
}

.output-area {
  min-height: 80rpx;
  background: white;
  padding: 40rpx;
}
.output-area text.title {
  font-size: 28rpx;
  color: #8995a1;
}
.output-area .result-container {
  padding: 20rpx 0;
  font-size: 34rpx;
}
.output-area .result {
  word-break: break-all;
}

button {
  margin: 20rpx 20rpx;
  font-size: 32rpx;
  position: relative;
}

.copyright {
  color: #999;
  display: flex;
  justify-content: center;
  flex: 1;
  align-items: flex-end;
  font-size: 28rpx;
  padding-bottom: 20rpx;
}

3.为翻译页添加页面绑定数据，打开index.js文件，在Page对象中添加如下代码：

data: {
    curLang: {},
    hideCloseIcon: true,
    query: '',
    translateResult: '',
    prefix: {}
  },

任务2.3 翻译功能实现
任务描述
为该页面添加翻译功能，并且将翻译记录存储到缓存中。
任务实施
1.打开index.js,为文本输入框添加键盘输入onInput监听事件，根据输入值修改hideCloseIcon属性，控制删除小图标的显示与隐藏。在Page对象下添加如下代码：

onInput: function (e) {
    this.setData({
      query: e.detail.value
    })
    if (this.data.query.length > 0) {
      this.setData({
        hideCloseIcon: false
      })
    } else {
      this.setData({
        hideCloseIcon: true
      })
    }
  },

2.封装翻译功能网络请求函数
2.1将资源包中的md5.min.js复制进项目utils目录中，该js文件为MD5加密封装，项目目录结构如下：

2.2在utils目录下新建baidu-translate-api.js文件，用来封装翻译功能的网络请求。项目目录结构如下：

2.3打开baidu-translate-api.js文件，导入md5.min.js，添加如下代码：

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

2.4 添加临时变量appid，key，url。前2个值在百度开放平台中可以获取到，在任务1.3中获取。url值为通用翻译的网络请求地址。在baidu-translate-api.js文件按顺序添加如下代码：

const appid = "20200407000413648"
const key = "BsvxVTxFxOA5fD7wUNYv"
const url = "https://fanyi-api.baidu.com/api/trans/vip/translate"

2.5 封装translate函数，传入参数为params对象，对象中包括q请求翻译的内容，from翻译源语言（设置默认值为auto），to译文语言（设置默认值为en），appid，salt随机数（使用当前时间作为随机数），sign签名（利用MD5加密）。添加如下代码：

function translate(param) {
  let q = param.q
  let from = param.from ? param.from : 'auto';
  let to = param.to ? param.to : 'en';
  let salt = Date.now()
  let sign = md5(`${appid}${q}${salt}${key}`)
  wx.request({
    url,
    data: {
      q,
      from,
      to,
      appid,
      salt,
      sign
    },
    success(response) {
      let data = response.data
      if (data && data.trans_result) {
        param.success(data)
      } else {
        param.fail({
          status: 'error',
          message: '翻译失败'
        })
        wx.showToast({
          title: '翻译失败',
          icon: 'none',
          duration: '3000'
        })
      }
    },
    fail(response) {
      param.fail({
        status: 'error',
        message: '翻译失败'
      })
      wx.showToast({
        title: '网络异常',
        icon: 'none',
        duration: '3000'
      })
    }
  })
}

2.6 添加文件引用入口，按照顺序添加如下代码：

module.exports = {
  translate: translate
}

3.打开index.js文件，添加baidu-translate-api.js文件的引用代码，在页面最顶部添加如下代码：

import {translate} from '../../utils/baidu-translate-api.js'

4.打开index.js文件，为确认按钮添加onConfirm单击事件，添加如下代码：

onConfirm: function () {
    if (!this.data.query) { return }
    translate({
      q: this.data.query,
      from: 'auto',
      to: this.data.curLang.lang,
      success: (data)=>{
        let history = wx.getStorageSync('history') || []
        if (history.length) {
          this.setData({
            prefix: history[0]
          })
        }
        let resultArray = []
        for (let i = 0; i < data.trans_result.length; i++) {
          resultArray.push(data.trans_result[i])
        }
        console.log('resultArray', resultArray)
        let src = []
        let dst = []
        resultArray.forEach(key => {
          src.push(key['src'])
          dst.push(key['dst'])
        })
        let queryString = src.join('\n')
        let resultString = dst.join('\n')
        console.log(queryString, resultString)

        this.setData({
          translateResult: resultString
        })

        if (history.length === 0) {
          history.unshift({
            query: queryString,
            result: resultString
          })
        } else {
          let prefix = this.data.prefix
          if (prefix && prefix.query && prefix.result
            && queryString !== prefix.query
            || resultString !== prefix.result) {
            history.unshift({
              query: queryString,
              result: resultString
            })
          }
        }

        history.length = history.length > 10 ? 10 : history.length
        wx.setStorageSync('history', history)
      },
      fail: (error)=>{
        console.log(error)
      }
    })
}

5为清除按钮添加onTapClose单击事件，隐藏清除小按钮及清空输入框信息等，添加如下代码：

onTapClose: function () {
    this.setData({
      query: '',
      hideCloseIcon: true,
      translateResult: ''
    })
  }

6．域名信息设置
6.1 按照如图打开开发者工具本地设置，勾选不校验域名信息等。

6.2 小程序控制台，将fanyi-api.baidu.com配置进request合法域名列表中，服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，详细请参考如下图所示：

注意：以上两个方法任选其一即可实现效果，但是只有方法2才能正式发布使用。