介紹
口袋翻譯
口袋翻譯 微信小程序
- 翻譯功能
- 含7類語言的相互翻譯
- 包含最近10條的翻譯歷史回溯功能
微信搜索：簡e翻譯
功能展示
- 使用百度翻譯api
需要申請 appid 與 key 並在api.js設置
項目相關
index 頁
navigator
navigator 等同於 a鏈接，通過navigator跳轉到小程序的其他頁面
詳見 navigator
iconfont
通過引入 iconfont.wxss ,使用外鏈的 icon-font 圖標，引入與使用方法和 HTML 幾乎無分別
- 在
app.wxss公共樣式當中@import "./assets/iconfont/iconfont.wxss";引入iconfont.wxss - 將
iconfont.wxss內容修改為如下代碼(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': 當用戶點擊的時候，執行 onTapClose
textarea 中 bindinput='onInput' bindconfirm='onConfirm' bindblur='onConfirm'為用戶做了什么操作之后，進行翻譯操作
<textarea placeholder='請輸入要翻譯的文本' placeholder-style='color: #8995a1' bindinput='onInput' bindconfirm='onConfirm' bindblur='onConfirm' value="{{query}}"></textarea> 使用 <text selectable="true">{{item.dst}}</text> 使翻譯結果可選擇，可復制
翻譯api
-
請求使用
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進行加密 }, 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: '網絡異常', icon: 'none', duration: 3000 }) } }) - 設置百度翻譯api之前需要先到微信小程序設置
request合法域名
text-area 翻譯結果
<view class="text-result" wx:for="{{result}}" wx:key="index">
類似於 Vuejs 的語法格式，進行數組循環展示。
<text selectable="true">{{item.dst}}</text>
設置用戶可選擇
tabBar
必須放置在底部"position": "bottom",，才能使用 icon 圖標。
用"iconPath"和"selectedIconPath"設置 tabBar 圖標和被選中的圖標。
"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
設置默認語言curlang，和歷史選擇過的緩存語言wx.getStorageSync('curLang')
item 列表
change頁的item語言列表當中，綁定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" 設置選擇之后的樣式效果
使用 <text class="iconfont icon-duihao" wx:if="{{index===curLang.index}}"></text> 添加選擇語言后 ✅ 字體圖標並通過 wx:if 選擇渲染條件
onShow
進行 change 頁面渲染的時候，獲取當前的語言
onShow: function () { this.setData({ curLang: app.globalData.curLang }) }
history 頁
index.js 中有關history存儲的
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
點擊跳轉 index頁，並附帶 query
onTapItem: function (e) { wx.reLaunch({ url: `/pages/index/index?query=${e.currentTarget.dataset.query}` }) } 因為使用了reLaunch，所以index頁會重新加載，使用 index.js 的 onLoad
onLoad: function (options) { //翻譯歷史頁通過 reLaunch 跳轉，重新加載 console.log('onload..') console.log(options) if (options.query) { this.setData({ query: options.query }) this.setData({ 'hideClearIcon': false }) //讓icon-close顯現 } }
項目代碼
該項目已開源到 Github。歡迎 star 與 fork 。