微信翻译助手小程序 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.qlet 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.dataif (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.prefixif (prefix && prefix.query && prefix.result&& queryString !== prefix.query|| resultString !== prefix.result) {history.unshift({query: queryString,result: resultString})}}history.length = history.length > 10 ? 10 : history.lengthwx.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才能正式发布使用。

微信翻译助手小程序 day2 -翻译功能页相关推荐

微信翻译助手小程序 day4 -翻译历史页
学习目标主要完成学习目标: (1)通过Storage缓存API,实现数据的存储操作,完成翻译历史页的实现任务3.1 翻译历史页实现任务描述完成如下图所示效果展示: 任务实施 1.为翻译历史页添 ...
小程序使用微信地址or小程序跳转设置页
如果你有使用过小程序需要你授权微信地址的情况,那么正常的逻辑应该是这样的: 点击获取地址后,弹窗: 此时我相信选择拒绝的人应该还是比较多的,毕竟这是敏感数据,拒绝后再看页面相关功能是否有使用地址的合适 ...
小程序毕设作品之微信美食菜谱小程序毕业设计成品（3）后台功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
基于微信预约挂号小程序毕业设计毕设作品（3）后台功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
亚马逊云助手小程序来啦！
服务告警,稍不留神前功弃? 下班途中,腾出手来不容易? 旅游休假,不想和电脑绑定? 亚马逊云助手小程序,拯救你的完美假期! 随时随地,轻松管理亚马逊云资源~ 你可以通过云助手小程序实现: 1.免密码登 ...
（附源码）springboot大学新生小助手小程序毕业设计 060917
目录摘要 1 1 绪论 1 1.1研究意义 1 1.2研究背景 1 1.3系统开发技术的特色 1 1.4论文结构与章节安排 1 2大学新生小助手小程序系统分析 3 2.1 可行性分析 3 2.2 ...
微信小程序开发（一）系统对接微信UGC类小程序内容安全接口JAVA版
系统对接内容安全接口JAVA版文章目录系统对接内容安全接口JAVA版前言一.微信中UGC类小程序是什么? 二.微信内容安全接口是什么? 三.微信内容安全接口能干什么? 四.微信内容安全接口怎么 ...
（已更新）最新打卡抽奖助手小程序源码，带微信通知功能，去授权
源码已经测试,去除授权安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
最新款打卡抽奖助手小程序源码，带微信通知功能，去授权
源码已经测试,去除授权安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
微信小程序：升级版王者荣耀铭文多功能助手小程序源码
这是一个王者铭文小程序支持每一个英雄的铭文出装推荐查看支持铭文组合模拟数据另外还支持游戏重复名生成和空白名生成比之前分享的一款单一铭文好一点吧另外该款小程序还支持多种流量主模式比如:激励视 ...

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

今日学习目标

微信翻译助手小程序 day2 -翻译功能页相关推荐

最新文章

热门文章