[移动开发]做毕设|墨墨背单词+单词本（小程序）01

今天下午，花了点时间做了“复习”的前端页面，效果和代码如下，为了方便运行，数据用的都是死数据。这个项目的进度我会经常更新，另外，有想要这个项目的可加我qq：626703291。

效果图

?

js代码

// pages/recite.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "words" : "bridge",
    "symbols": "[br?d?]"
  },

  selectNav(num){
    console.log(this.data.words)
  }
})

wxml代码

<view class="container">
  <view class="top">
    <view class="font_father">
      <text>{{words}}</text>
    </view>
    <view class="font_son">
      <text>英 {{symbols}} 🔈</text>
    </view>
  </view>
  <view class="middle" bindtap="selectNav">
    <text>请把英文发音和中文释义说出口</text>
    <text class="font_down">点击屏幕显示答案</text>
  </view>
</view>

wxss代码

.container{
  height: 100%;
  width: 100%;
}
.top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150rpx;
  background-color: #06ae56;
}

.font_father{
  font-size: 20px;
  font-weight: 500;
}

.font_son{
  font-size: 10px;
}

.middle{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f7f7f7;
}

.font_down{
  color: #06ae56;
}

?