在开发乒乓球线上积分记录和修改微信小程序时，前端开发是打造良好用户体验的关键环节。接下来，我将结合具体实例，带你深入了解小程序前端各功能的实现过程。

积分记录页面搭建

积分记录页面需要提供选择对手、记录比赛结果和填写比赛信息的功能。首先，在 wxml 文件中构建基础页面结构：

<view class="record-container">
  <view class="opponent-select">
    <picker bindchange="bindOpponentChange" value="{{selectedOpponentIndex}}" range="{{opponentList}}">
      <view class="picker-view">
        选择对手：{{opponentList[selectedOpponentIndex]}}
      </view>
    </picker>
  </view>
  <view class="result-radio">
    <radio-group bindchange="bindResultChange">
      <label><radio value="win">胜</radio></label>
      <label><radio value="lose">负</radio></label>
    </radio-group>
  </view>
  <view class="input-item">
    <label>比赛时间：</label>
    <input type="date" bindinput="bindMatchTimeInput" value="{{matchTime}}"/>
  </view>
  <view class="input-item">
    <label>比赛地点：</label>
    <input bindinput="bindMatchPlaceInput" value="{{matchPlace}}"/>
  </view>
  <button bindtap="submitRecord">提交记录</button>
</view>

在对应的 wxss 文件中，添加样式美化页面：

.record-container {
  padding: 20rpx;
}
.opponent-select,.result-radio,.input-item {
  margin-bottom: 20rpx;
}
.picker-view {
  border: 1rpx solid #ccc;
  padding: 10rpx;
}

在 js 文件中，定义相关数据和事件处理函数：

Page({
  data: {
    opponentList: ['石哥', '张哥', '臧哥'],
    selectedOpponentIndex: 0,
    result: '',
    matchTime: '',
    matchPlace: ''
  },
  bindOpponentChange: function(e) {
    this.setData({
      selectedOpponentIndex: e.detail.value
    });
  },
  bindResultChange: function(e) {
    this.setData({
      result: e.detail.value
    });
  },
  bindMatchTimeInput: function(e) {
    this.setData({
      matchTime: e.detail.value
    });
  },
  bindMatchPlaceInput: function(e) {
    this.setData({
      matchPlace: e.detail.value
    });
  },
  submitRecord: function() {
    // 收集数据并通过 API 发送给后端
    const { selectedOpponentIndex, result, matchTime, matchPlace } = this.data;
    const opponent = this.data.opponentList[selectedOpponentIndex];
    // 这里模拟数据发送，实际需使用 wx.request
    console.log('提交数据：', { opponent, result, matchTime, matchPlace });
  }
});

通过上述代码，实现了积分记录页面的基本功能，用户可以选择对手、记录比赛结果和填写比赛信息，点击提交按钮后，相关数据会被收集（实际开发中需发送给后端）。

积分记录页面搭建

积分查询页面要展示用户的历史积分记录和当前积分排名。在 wxml 文件中展示积分数据：

<view class="history-record">
  <view class="record-item" wx:for="{{historyRecords}}" wx:key="index">
    <view>比赛时间：{{item.matchTime}}</view>
    <view>对手：{{item.opponent}}</view>
    <view>结果：{{item.result}}</view>
    <view>积分变动：{{item.scoreChange}}</view>
  </view>
</view>
<view class="rank">
  <view>当前积分：{{currentScore}}</view>
  <view>排名：{{rank}}</view>
</view>

在 js 文件中，模拟从后端获取数据并展示：

Page({
  data: {
    historyRecords: [],
    currentScore: 0,
    rank: 0
  },
  onLoad: function() {
    // 模拟从后端获取数据，实际需使用 wx.request
    const historyRecords = [
      { matchTime: '2024-01-01', opponent: '张三', result: 'win', scoreChange: 5 },
      { matchTime: '2024-01-05', opponent: '李四', result: 'lose', scoreChange: -2 }
    ];
    const currentScore = 10;
    const rank = 3;
    this.setData({
      historyRecords,
      currentScore,
      rank
    });
  }
});
            

如此一来，积分查询页面就能够展示用户的历史积分变动和当前积分排名情况。

通过这些具体实例，我们可以清晰看到乒乓球积分微信小程序前端开发的细节。后续还有积分变化趋势图表的展示，等我找出空闲的时间再写一些，在小程序项目中引入 ECharts 相关文件，然后在 wxml 文件中添加图表容器就可以开始着手编写前端的代码。