口袋翻译 微信小程序
微信搜索:简e翻译
api.js
设置
navigator
等同于 a
链接,通过navigator
跳转到小程序的其他页面
详见
通过引入 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
栏通过 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>
使翻译结果可选择,可复制
请求使用 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 }) } })
request合法域名
<view class="text-result" wx:for="{{result}}" wx:key="index">
类似于 vuejs
的语法格式,进行数组循环展示。
<text selectable="true">{{item.dst}}</text>
设置用户可选择
必须放置在底部"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" } ] }
设置默认语言curlang
,和历史选择过的缓存语言wx.getstoragesync('curlang')
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
选择渲染条件
进行 change 页面渲染的时候,获取当前的语言
onshow: function () { this.setdata({ curlang: app.globaldata.curlang }) }
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)
点击跳转 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 。
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论