<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": "漢字不常用字字典"
}