汉字不常用字字典-微信小程序

<view class="container">
  <view class="search-bar">
    <input class="search-input" placeholder="请输入汉字" bindinput="searchChar" />
    <button class="search-btn" bindtap="search">搜索</button>
  </view>
  <view class="char-info">
    <view class="char">{{char}}</view>
    <view class="pinyin">{{pinyin}}</view>
    <view class="radicals">{{radicals}}</view>
    <view class="stroke-count">{{strokeCount}}</view>
  </view>
</view>

Page({
  data: {
    char: '',
    pinyin: '',
    radicals: '',
    strokeCount: '',
  },

  searchChar: function(event) {
    this.setData({
      char: event.detail.value
    });
  },

  search: function() {
    wx.request({
      url: 'https://api.example.com/search',
      data: {
        char: this.data.char
      },
      success: (res) => {
        this.setData({
          pinyin: res.data.pinyin,
          radicals: res.data.radicals,
          strokeCount: res.data.strokeCount,
        })
      }
    })
  }
})

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.search-input {
  width: 50%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ccc;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.search-btn {
  width: 30%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 5rpx;
}

.char-info {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.char {
  font-size: 80rpx;
  font-weight: bold;
}

.pinyin {
  font-size: 40rpx;
  margin-top: 10rpx;
}

.radicals {
  font-size: 30rpx;
  margin-top: 10rpx;
}

.stroke-count {
  font-size: 30rpx;
  margin-top: 10rpx;
}

{
  "navigationBarTitleText": "汉字不常用字字典"
}