翻译-小程序

不同功能页思路

首页思路：（小程序的方法类似于Vue的MVVM设计模式）

主要分为三个大功能区：选择语言区，翻译区，底部tabBar。底部tabBar控制首页与历史页的切换功能。

• tabBar：根据小程序文档。tabBar在全局配置中进行配置。全局配置

  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

注：其中当tabBar在底部时，需要添加图标，且icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。

翻译功能：调用百度翻译的API，完成翻译。wx.request

封装一个翻译的组件：（外来组件放置在utils文件夹下）

import md5 from './md5.min.js' //根据百度翻译提供的文档，需要使用到MD5进行加密

const appid ='xxxx'
const key ='xxxx'

function translate(q,{from='auto',to='auto'}={from:'auto',to:'auto'}){
  return new Promise((reslove,reject)=>{//使用Promise函数返回一个函数调用
    let salt=Date.now()
    let sign=md5(`${appid}${q}${salt}${key}`)
    wx.request({//微信发送请求的API
      url: 'xxxx',
      data:{q,from,to,appid,salt,sign},
      success(res){//成功调用函数
        if (res.data && res.data.trans_result){
          reslove(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
        })
      }
    })
  })
}
//最后导出该翻译函数
module.exports.translate=translate

在输入框绑定确认（bindConfirm）和失焦（bindblur）事件，调用翻译函数进行翻译。

历史页：

在首页翻译的时候讲翻译的结果同步将数据存储在本地缓存中指定的 key 中wx.setStorageSync当在tabBar切换翻译页与历史页的时候在历史页使用wx.getStorageSync从本地数据库调用历史记录
当点击历史记录时，使用wx.reLaunch并且使用全局定义的 app.js 将当前历史记录的语言类型带入到翻译页面

语言切换页：

在全局app.js定义语言列表和当前选中语言，当切换tabBar时通过在app.js定义的curLang来实现切换时翻译页语言类型带到切换页面（通过本地数据），在语言类型页选择语言时通过设置本地数据中'language'和全局app.js中实现数据的传递。

• 本项目中使用到的生命周期回调函数：
  • onShow()：页面显示/切入前台时触发。本例中实现页面切换时数据渲染。
  • onLoad(Object query)：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。本例中实现从历史页切换到翻译页时数据的传入。

onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

这里存在一个有关onLaunch和onLoad之间的问题：onLaunch运行后进行异步请求时，程序不会停止，执行onload, 我们希望onLaunch执行完后再执行onload
解决思路：定义一个app回调函数，将onLaunch执行完成后，在执行onload。简单说：就是当去执行onload时发现有一个app的回调函数，然后就回去执行该回调函数而不再执行onload，实现onLaunch中执行完异步再执行onload。