翻译小程序毕设

1.公共样式

在app.wxss中可以写一些公共的样式，这些样式可以在各个样页面都可以引用，只要加上对应的class就可以引用了。并且可以已在wxss也引入iconfont，之后就可以在页面其他地方引用了。

@import "./assets/iconfont/iconfont.wxss";

.container {
  padding: 0;
  background-color: #f5fefa;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #333;
}

iconfont引用
打开网址，把里面带的东西复制到某个wxss，再在app.wxss里面引用就可以了了

---

index页面

 <view class="input-area">
    <!-- x是否展示或隐藏,通过hidden对应的变量，如果是true就隐藏false就展示 -->
    <text class="iconfont icon-close" hidden="{{hideClearIcon}}" bindtap="onTapClose"></text>
    <view class="textarea-wrap">
      <textarea placeholder="请输入翻译的文本" placeholder-style="color: #8995a1" bindinput="onInput" bindconfirm="onConfirm" bindblur="onConfirm" value="{{query}}"></textarea>
      <!-- value:输入框的内容。输入的信息都在query里面 -->
    </view>

    <view class="text-area">
      <view class="text-title">译文</view>
      <view class="text-result" wx:for="{{result}}" wx:key="index">
        <text selectable="true">{{item.dst}}</text>
      </view>
    </view>
  </view>

  onLoad: function (options) {
    console.log('lonload..')
    console.log(options)
    if (options.query) {
      this.setData({ query: options.query })
    }

  },
  onShow: function () {
    //作用是每次点击切换另一种翻译语言的时候都会执行一次翻译函数，进行一次翻译
    if (this.data.curLang.lang !== app.globalData.curLang.lang) {
      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({ 'hideClearIcon': false })
    } else {
      this.setData({ 'hideClearIcon': true })
    }
    console.log('focus')
  },
  onTapClose: function () {
    this.setData({ query: '', hideClearIcon: true })
  },
  onConfirm: function () {
    if (!this.data.query) return
    translate(this.data.query, { from: 'auto', to: this.data.curLang.lang }).then(res => {
      this.setData({ 'result': res.trans_result })
      //为后面历史页面渲染，在本地存储一个历史的数组，然后历史页面拿这个数据进行渲染
      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)
    })
  }

1. 控制按钮的出现和关闭。点击X按钮时清空输入框的内容
2. 输入完成后，点击空白地方或者点击小键盘的完成键即可执行一次翻译
3. 调用api进行翻译，将翻译的好的结果存储到本地，最多十条历史记录。然后在历史页面拿到这数据进行渲染

---

change页面

<view class="item" 
  data-chs="{{language.chs}}" data-lang="{{language.lang}}" data-index="{{index}}" 
  wx:for="{{langList}}"  wx:key="index" wx:for-item="language" bindtap='onTapItem'
hover-class="view-hover">

const app = getApp()
Page({
  data: {
    curLang: {},
    langList: app.globalData.langList
  },
  onShow: function () {
    this.setData({ curLang: app.globalData.curLang })
  },
  onTapItem: function (e) {
    let langObj = e.currentTarget.dataset //存储所有data自定义属性的值
    wx.setStorageSync('language', langObj)
    this.setData({ 'curLang': langObj })
    app.globalData.curLang = langObj
    wx.switchTab({ url: '/pages/index/index' }) //切换到对应页面
  }
})

通过getAPP拿到里面globalData的数据进行渲染，然后将数据存到对应的data里面。每次点击都修改一下app.globalData.curLang·的数据然后然后跳回到主页来。

---

history页面

<view class="item" wx:for="{{history}}" wx:key="index" bindtap='onTapItem' data-query="{{item.query}}" data-langId="{{item.langIndex}}">
   <view class="query">{{item.query}}</view>
   <view class="result">{{item.result}}</view>
 </view>

Page({
  data: {
    history: []
  },
  onShow: function () {
    this.setData({ history: wx.getStorageSync('history') })
  },

  onTapItem: function (e) {
    //跳转到index页面并且传递{query： e.currentTarget.dataset.query}的值
    wx.reLaunch({
      url: `/pages/index/index?query=${e.currentTarget.dataset.query}`
    })
  }
}