微信小程序(翻译小助手)项目实战

效果展示图:

这个项目主要的难点在于api的调用,只有俩个页面,页面布局相对简单一些.

1.通过百度翻译开放平台,申请百度翻译开发者账号,获取百度翻译中通用翻译API服务的相关信息.
2.构建翻译首页:
index.wxml:

<!--index.wxml-->
<view class='container'><view class='to-change-page'><navigatorurl='/pages/change/change'><text class='lang'>翻译成{{curLang.chinese}}</text><text class='iconfont icon-down'></text></navigator>    </view><view class='input-area'><view class='textarea-container'><textareaplaceholder='请输入要翻译的文本'placeholder-style='color: #8995a1;'value='{{query}}'bindinput='onInput'bindconfirm='onConfirm'></textarea><text class='iconfont icon-close'bindtap='onTapClose'hidden='{{hideCloseIcon}}'></text></view></view><buttonbindtap='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>

index.js:

import {translate} from '../../utils/api.js'const app = getApp()
Page({data: {curLang: {},hideCloseIcon: true,query: '',translateResult: '',},onLoad: function (options) {console.log('options query', options.query)if (options.query) {this.setData({query: options.query})}},onShow: function () {this.setData({curLang: app.globalData.curLang})this.onConfirm();},onInput: function (e) {this.setData({query: e.detail.value})if (this.data.query.length > 0) {this.setData({hideCloseIcon: false})} else {this.setData({hideCloseIcon: true})}},onConfirm: function () {translate(this.data.query,{from: 'auto',to: this.data.curLang.lang}).then(data=> {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 = srclet resultString = dstconsole.log(queryString, resultString)this.setData({translateResult: resultString})})},onTapClose: function () {this.setData({query: '',hideCloseIcon: true,translateResult: ''})}
})

index.wxss:

/**index.wxss**/
view.to-change-page {display: flex;align-items: center;color: #8995a1;font-size: 24rpx;padding: 20rpx 40rpx;
}
navigator .iconfont {font-size: 20rpx;color: #8995a1;
}
/* view.input-area {border-bottom: 1px solid #c7cee0;
} */
view.textarea-container {background: white;position: relative;box-shadow:1px 2px 3px 4px #ccc
}
view.textarea-container textarea {background: white;padding: 30rpx;padding-right: 0;width: calc(100% - 110rpx);font-size: 34rpx;
}
view.textarea-container .iconfont {position: absolute;top: 30rpx; right: 40rpx;z-index: 999;font-size: 40rpx;color: #888;
}view.output-area {min-height: 180rpx;background: white;padding: 40rpx;box-shadow:1px 2px 3px 4px #ccc
}
view.output-area text.title {font-size: 28rpx;color: #8995a1;
}
view.output-area .result-container {padding: 20rpx 0;font-size: 34rpx;
}
view.output-area .result {word-break: break-all;
}button {margin: 20rpx 20rpx;font-size: 32rpx;position: relative;
}
button::after {position: absolute;content: '';display: block;border: 1px solid black;top: 0; left: 0;bottom: 0; right: 0;transform-origin: 0 0;z-index: 2;
}view.copyright {color: #999;display: flex;justify-content: center;flex: 1;align-items: flex-end;font-size: 28rpx;padding-bottom: 20rpx;
}

3.封装api接口:
api.js:

import md5 from './md5.min.js'const appid = "20190217000267988"
const key = "3Y5ZIcch3mbq5fX6Q7EC"
const url = "https://fanyi-api.baidu.com/api/trans/vip/translate"function translate(q, { from = 'auto', to = 'en' } = { from: 'auto', to: 'en' },
)
{return new Promise((resolve, reject)=> {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) {resolve(data)} }})})
}module.exports = {translate: translate
}

3.引入md5.min.js文件:

4.构建change页面:

change.wxml:

<!-- change.wxml -->
<view class='container'><text class='title'>翻译成</text><view class='lang-list'><view class='lang-wrapper'><view class='item'wx:for='{{langList}}'wx:key='index'wx:for-item='langItem'bindtap='onTapItem'data-index='{{index}}'data-lang='{{langItem.lang}}'data-chinese='{{langItem.chinese}}'><view class='lang'>{{langItem.chinese}}</view><text class='iconfont icon-ok'wx:if='{{index===curLang.index}}'></text></view>    </view>  </view>
</view>

change.js:

// pages/change/change.js
const app = getApp();Page({/*** 页面的初始数据*/data: {curLang: {},langList: app.globalData.langList},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({curLang: app.globalData.curLang})},/*** onTapItem--监听 change 页 item 项被 tap*/onTapItem: function (e) {let langObject = e.currentTarget.datasetconsole.log(langObject)// 本地设置this.setData({curLang: langObject})// 全局设置app.globalData.curLang = langObjectwx.switchTab({url: '/pages/index/index'})}
})

change.wxss:

/* change.wxss */
/* change.wxss */
.container {background: #f8f8f8;
}.title {background: white;border-bottom: 1px solid #ececec;padding: 20rpx 40rpx;color: #aaa;font-size: 28rpx;
}.lang-wrapper {padding-left: 40rpx;
}.lang-wrapper .item {padding: 20rpx 40rpx 20rpx 0;background: white;display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #ececec;font-size: 32rpx;
}
.item .lang {flex: 1;
}
.item .iconfont {margin-left: auto;color: #aaa;font-size: 28rpx;
}

5.构建翻译历史页面(history)

history.wxml:

<!-- history.wxml -->
<view class='container'><text class='history-title {{state}}'>翻译历史</text><scroll-view scroll-y class='history-result-list'><view class='history-result'wx:for='{{history}}'wx:for-item='historyItem'wx:key='index'bindtap='onTapReLaunch'data-query='{{historyItem.query}}'><view class='orign-text'>{{historyItem.query}}</view><view class='tanslate-text'>{{historyItem.result}}</view></view> </scroll-view></view>

history.js:

// pages/history/history.js
const app = getApp()Page({/*** 页面的初始数据*/data: {history: [],state: ''},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({history: wx.getStorageSync('history')})let history = this.data.historyif (history && history.length > 0) {this.setData({state: 'stiky'})} else {this.setData({state: ''})}},onTapReLaunch: function (e) {console.log('data-set', e.currentTarget.dataset)let url = `/pages/index/index?query=${e.currentTarget.dataset.query}`wx.reLaunch({url})}
})

history.wxss:

/* history.wxss */
view.container {padding: 40rpx 0;display: flex;height: 100vh;
}
.history-title {font-size: 26rpx;line-height: 38rpx;color: #8995a1;position: fixed;top: 0; left: 0;padding: 40rpx;overflow: hidden;width: 100%;z-index: 999;transition: all 0.3s;
}
.history-title.stiky {background-color: white;
}
scroll-view.history-result-list {margin-top: 50rpx;background-color: #f5fafe;
}
view.history-result {margin-top: 40rpx;display: flex;flex-direction: column;
}
view.history-result:last-child {margin-bottom: 40rpx;
}
.orign-text {color: #8995a1;padding: 0 40rpx;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tanslate-text {margin-top: 16rpx;padding: 0 40rpx;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

app.js:

//app.js
App({onLaunch: function () {// 展示本地存储能力this.globalData.curLang = wx.getStorageSync('curLang') || this.globalData.langList[0]},globalData: {curLang: {},langList: [{'lang': 'en','index': 0,'chinese': '英文'},{'lang': 'zh','index': 1,'chinese': '中文'},{'lang': 'jp','index': 2,'chinese': '日语'},{'lang': 'kor','index': 3,'chinese': '韩语'},{'lang': 'fra','index': 4,'chinese': '法语'},{'lang': 'spa','index': 5,'chinese': '西班牙语'},{'lang': 'ara','index': 6,'chinese': '阿拉伯语'}]}
})

app.json:

{"pages": ["pages/index/index","pages/history/history","pages/change/change"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#1c1b21","navigationBarTitleText": "翻译小助手","navigationBarTextStyle": "white"},"tabBar": {"position": "top","color": "#595959","selectedColor": "#1c1b21","borderStyle": "white","list": [{"text": "翻译","pagePath": "pages/index/index"},{"text": "历史","pagePath": "pages/history/history"}]},"sitemapLocation": "sitemap.json"
}

微信小程序(翻译小助手)项目实战相关推荐

微信小程序之网易云项目实战(一)
微信小程序之网易云项目实战(一) 1.全局app.json 配置 {"pages": ["pages/index/index","pages/logs ...
微信小程序（二）-- 项目实战
技术选型小程序的第三方框架: 腾讯wepy 语法类似vue 美团mpvue 语法类似vue 京东taro 语法类似react 滴滴 chameleon uni-app 语法类似vue 原生框架 MI ...
微信小程序仿抖音项目实战说明
功能说明短视频管理后台: 1.bgm管理(增删改查.文件上传.点击播放) 2.用户列表 3.举报管理 4.用户视频管理因为微信端Api接口管理后台是围绕微信端功能做的,所以这里我就将功能列举到一起 ...
微信小程序“帮取快件”项目实战总结
距离项目结束已经五个月左右了,时间久远,很多细节已经记不清了,但还是做个总结,算是对自己的总结吧. 一. 前期准备 1.云服务器微信小程序需要用到服务器,比较后选择了使用阿里云的ECS云服务器,因为 ...
微信小程序快速入门+四个实战小程序（一）——入门准备
一)系列达成目标介绍二)小程序创建的准备 1)注册开发者账号 2)下载编译器 ------------------------------------------------------ 一)系列达 ...
计算机毕业设计ssm+vue基本微信小程序的执法助手平台
项目介绍一线执法民警工作移动性强.突发性强.任务紧迫性强.同时微信小程序操作简单,便于使用,应用广泛.基于这一背景计划设计一款基于微信小程序的执法助手.该微信小程序的执法助手平台分为前端和Java后 ...
微信小程序（一）初步，包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）
文章目录前言一微信小程序 1. 小程序与普通网页开发的区别 2. 注册小程序开发帐号 3. 安装开发者工具 4. 创建小程序项目 5. 查看项目效果 6. 主界面的 5 个组成部分二项目结构 ...
php后台微信小程序考勤签到助手
下载地址:https://download.csdn.net/download/a13689028602/20665932 项目介绍 php后台微信小程序考勤签到助手系统说明 Client 文件 ...
微信小程序（应用号）实战课程之记账软件开发
http://git.oschina.net/dotton/finance [2016-10-12] 更新缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持dat ...
微信小程序开发教程：项目一微信小程序入门课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简述微信开发者工具中调试器功能. 2.请简述微信小 ...