百度翻译api 实现简易微信翻译小程序
介绍
口袋翻译
口袋翻译 微信小程序
- 翻译功能
- 含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 。
转载于:https://www.cnblogs.com/evenyao/p/9605326.html
百度翻译api 实现简易微信翻译小程序相关推荐
- 【新手】基于C++Qt5通过调用百度翻译API制作简易翻译工具
基于C++Qt5通过调用百度翻译API制作简易翻译工具 目录 基于C++Qt5通过调用百度翻译API制作简易翻译工具 写在前面 步骤: 1.注册百度翻译开放平台账号并开通翻译服务 2.下载安装Qt5和 ...
- 基于调用百度翻译API的简易翻译器(python)
基于调用百度翻译API的简易翻译器 一.使用自己的百度账号登录百度翻译开放平台获取百度翻译API 使用您的百度账号登录百度翻译开放平台(http://api.fanyi.baidu.com): 注册成 ...
- 基于百度翻译和有道翻译api的一款翻译Demo
基于百度翻译和有道翻译api的一款翻译Demo Translation-Voice 一个整合百度翻译(支持多种语言)跟科大讯飞的口语翻译app 百度翻译界面 科大讯飞语音识别跟语音合成界面 S ...
- 微信读书登陆界面java_(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 一.环境搭建 相关环境软件:JDK1 ...
- 微信weixin小程序开发源码资源学习教程汇总
微信weixin小程序开发源码资源学习教程汇总 目录 官方文档 工具 插件 教程 视频教程 文章 组件 Demo 置顶 WePY:组件化的小程序开发框架 ? WePY 开发资源汇总 ? 官方文档 小程 ...
- web api接口开发实例_小程序开发如何调用 API 接口,以豆瓣电影为例
API 调用是开发者在小程序开发过程中经常会遇到的问题,本期我们以为调用豆瓣电影 API 为例具体来看 API 的调用过程以及常见的一些问题. 测试用到的小程序是「电影周周看」,内容来自清华大学软件学 ...
- 小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
- 搭建一款开源的微信商城小程序:海风小店
搭建一款开源的微信商城小程序:海风小店 准备工作 申请小程序账号 申请小程序账号只需要按照官网文档说明操作即可,这里我就不展开说了,地址:https://developers.weixin.qq.co ...
- android微信下拉出现小程序,仿新版微信的小程序下拉栏
原标题:仿新版微信的小程序下拉栏 本项目会对金融交易软件中存在的各种View进行模仿绘制,提供详细的实现思路,收集整理相关算法.文档以及专业资料. https://github.com/scsfwgy ...
最新文章
- 就很突然,电脑里多出了一个文件......
- java中需要用equals来判断两个字符串值是否相等
- 微信小程序横向图片左右滑动
- 这样合并Python字典,可以让程序的运行效率提高4倍
- 新的JEP草案将简化Java中的撰写
- 前端生态混乱,AMPMIP在努力做标准化工作
- 低秩矩阵完备_矩阵之芯 SVD: 基本应用以及与其他分解的关系
- vdbench的作用_vdbench
- Python少儿编程入门篇(1)基本数据类型
- 树莓派使用433Mhz射频无线收发
- arcpy实现注记合并
- Davinci的异构多核间通信基础组件SysLink
- (十二)系统集成中级-质量管理
- 特殊格式的时间读取并排序
- Java实现合并word文档并打开合并后文档
- 写一个工具来了解ELF文件(一)
- Python数据可视化学习笔记:第一章 关联图 第四节 使用Python绘制一般气泡图
- 万花筒写轮眼画法_纯canvas来画出斑的万花筒写轮眼
- 佳能hdr_(摄影后期)在佳能DPP中制造HDR,改善照片画质转载
- spring mvc校验部分属性,springmvc校验属性,java.lang.ClassNotFoundException: com.fasterxml.classmate.Filter