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

效果展示图:

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

1.通过百度翻译开放平台,申请百度翻译开发者账号,获取百度翻译中通用翻译API服务的相关信息.
2.构建翻译首页:
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='input-area'>
    <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>
  </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>

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