介紹

口袋翻譯

口袋翻譯 微信小程序

翻譯功能
含7類語言的相互翻譯
包含最近10條的翻譯歷史回溯功能

微信搜索：簡e翻譯

功能展示

使用百度翻譯api
需要申請(qǐng) appid 與 key 并在api.js設(shè)置

項(xiàng)目相關(guān)

index 頁

navigator

navigator等同于a鏈接，通過navigator跳轉(zhuǎn)到小程序的其他頁面
詳見navigator

iconfont

通過引入iconfont.wxss,使用外鏈的 icon-font 圖標(biāo)，引入與使用方法和 HTML 幾乎無分別

在app.wxss公共樣式當(dāng)中@import "./assets/iconfont/iconfont.wxss";引入iconfont.wxss
將iconfont.wxss內(nèi)容修改為如下代碼(iconfont中css鏈接使用瀏覽器打開后得到下列代碼)，將url地址改為https后綴為ttf：

@font-face {font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_811118_f7oh8iao9yd.ttf') format('truetype')
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-down:before { content: "e600"; }

.icon-close:before { content: "e78f"; }

.icon-arrow-right:before { content: "e682"; }

.icon-duihao:before { content: "e601"; }

.icon-right:before { content: "e790"; }

input

input欄通過hidden="{{hideClearIcon}}"控制 iconfont 的X是否隱藏

hideClearIcon: true隱藏
hideClearIcon: false展示

事件綁定為bindtap='onTapClose': 當(dāng)用戶點(diǎn)擊的時(shí)候，執(zhí)行onTapClose

textarea中bindinput='onInput' bindconfirm='onConfirm' bindblur='onConfirm'為用戶做了什么操作之后，進(jìn)行翻譯操作

<textarea placeholder='請(qǐng)輸入要翻譯的文本' placeholder-style='color: #8995a1'  bindinput='onInput' bindconfirm='onConfirm' bindblur='onConfirm'  value="{{query}}"></textarea>

使用<text selectable="true">{{item.dst}}</text>使翻譯結(jié)果可選擇，可復(fù)制

翻譯api

請(qǐng)求使用wx.request()
wx.request

翻譯api 使用百度的接口

wx.request({
  url: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
  data: {
    q,  //輸入文本
    from,  //需要翻譯的
    to,   //翻譯為
    appid,
    salt,
    sign   //拼接 MD5進(jìn)行加密
  },
  success(res) {
    if (res.data && res.data.trans_result) {
      resolve(res.data)
    } else {
      reject({ status: 'error', msg: '翻譯失敗' })
      wx.showToast({
        title: '翻譯失敗',
        icon: 'none',
        duration: 3000
      })
    }
  },
  fail() {
    reject({ status: 'error', msg: '翻譯失敗' })
    wx.showToast({
      title: '網(wǎng)絡(luò)異常',
      icon: 'none',
      duration: 3000
    })
  }
})

設(shè)置百度翻譯api之前需要先到微信小程序設(shè)置request合法域名

text-area 翻譯結(jié)果

<view class="text-result" wx:for="{{result}}" wx:key="index">

類似于Vuejs的語法格式，進(jìn)行數(shù)組循環(huán)展示。

<text selectable="true">{{item.dst}}</text>

設(shè)置用戶可選擇

tabBar

必須放置在底部"position": "bottom",，才能使用 icon 圖標(biāo)。
用"iconPath"和"selectedIconPath"設(shè)置 tabBar 圖標(biāo)和被選中的圖標(biāo)。

"tabBar": {   
  "borderStyle": "white",
  "position": "bottom",
  "color": "#bfbfbf",
  "selectedColor": "#1c1b21",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "翻譯",
      "iconPath": "imgs/icon-1.png",
      "selectedIconPath": "imgs/sel-icon-1.png"
    },
    {
      "pagePath": "pages/history/history",
      "text": "歷史",
      "iconPath": "imgs/icon-2.png",
      "selectedIconPath": "imgs/sel-icon-2.png"
    }
  ]
}

change 頁

globalData

設(shè)置默認(rèn)語言curlang，和歷史選擇過的緩存語言wx.getStorageSync('curLang')

item 列表

change頁的item語言列表當(dāng)中，綁定bindtap='onTapItem'事件

onTapItem: function (e) {
  let langObj = e.currentTarget.dataset
  wx.setStorageSync('language', langObj)
  this.setData({ 'curLang': langObj })
  app.globalData.curLang = langObj
  wx.switchTab({ url: '/pages/index/index' })   //使用 switchTab 回到 tabBar
}

使用hover-class="view-hover"設(shè)置選擇之后的樣式效果

使用<text class="iconfont icon-duihao" wx:if="{{index===curLang.index}}"></text>添加選擇語言后 ✅ 字體圖標(biāo)并通過wx:if選擇渲染條件

onShow

進(jìn)行 change 頁面渲染的時(shí)候，獲取當(dāng)前的語言

onShow: function () {
    this.setData({ curLang: app.globalData.curLang })
  }

history 頁

index.js 中有關(guān)history存儲(chǔ)的

let history = wx.getStorageSync('history') || []
history.unshift({ query: this.data.query, result: res.trans_result[0].dst })
history.length = history.length > 10 ? 10 : history.length
wx.setStorageSync('history', history)

onTapItem

點(diǎn)擊跳轉(zhuǎn)index頁，并附帶 query

onTapItem: function (e) {
  wx.reLaunch({
    url: `/pages/index/index?query=${e.currentTarget.dataset.query}`
  })
}

因?yàn)槭褂昧?code>reLaunch，所以index頁會(huì)重新加載，使用index.js的onLoad

onLoad: function (options) {  //翻譯歷史頁通過 reLaunch 跳轉(zhuǎn)，重新加載
  console.log('onload..')
  console.log(options)
  if (options.query) {
    this.setData({ query: options.query })
    this.setData({ 'hideClearIcon': false })   //讓icon-close顯現(xiàn)
  }
}

項(xiàng)目代碼

該項(xiàng)目已開源到Github。歡迎 star 與 fork 。

總結(jié)

以上是生活随笔為你收集整理的百度翻译api 实现简易微信翻译小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。