三国志14信息查询小程序（历史武将信息一览）制作更新过程03-主要页面的设计

1，小程序的默认显示

分为三部分，头部的标题、中间的内容区和底部的标签栏。点击标签可以切换不同页面，这是在app.json文件中配置的。代码如下：

//所有用到的页面都需要在 pages 数组中列出，否则小程序可能会出现错误或无法正确加载。
//首页的页面路径放在这个数组的第一个位置。例如，将 pages/index/index 设置为首页。
{
  "pages": [
    "pages/index/index",
    "pages/details/details",
    "pages/my/details",
    "pages/about/about"
  ],
  "subpackages": [
  ],
  //标题文本设置
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#461311",
    "navigationBarTitleText": "三国志14",
    "navigationBarTextStyle": "white"
  },
  //标签，表示小程序的主要功能或页面，用户可以点击切换。
  "tabBar": {
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#381B25",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "武将数据"
      },
      {
        "pagePath": "pages/my/details",
        "iconPath": "image/icon_map.png",
        "selectedIconPath": "image/icon_map_HL.png",
        "text": "综合信息"
      },
      {
        "pagePath": "pages/about/about",
        "iconPath": "image/icon_about.png",
        "selectedIconPath": "image/icon_about_HL.png",
        "text": "关于"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "获取位置，方便按区域分配 "
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2，武将信息页

分为三部分，查询工具栏、表头及数据列表
这是数据列表的代码：

 <!-- 数据列表 -->
  <view wx:for="{{goodsList}}" wx:key="index" class="table">
    <view class="tr bg-g" bindtap="onGoodsDetail" data-all="{{item}}" data-name="{{item.name}}">
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.tongshuai}}</view>
      <view class="td">{{item.wuli}}</view>
      <view class="td">{{item.zhili}}</view>
      <view class="td">{{item.zhengzhi}}</view>
      <view class="td">{{item.meili}}</view>
    </view>
  </view>
1
2
3
4
5
6
7
8
9
10
11

可以看到，数据goodsList以循环的形式显示，每行数据上加入了点击事件onGoodsDetail，即跳转到人物详情页。
再看一下js里的方法：

（1）在页面加载时获取数据

 onLoad: function (options) {
    // 调用获取列表数据的方法
    this.getGoodsList(true)
  },
1
2
3
4

（2）获取数据方法：

  //获取列表数据并赋值给goodsList
  getGoodsList(reachBottom) {
      ...
      wx.request({
      url: url_get,//你的后台url地址
      data: {
        order: this.data.order,
        key: this.data.key,
        page: this.data.queryObj.pagenum,
        intPageSize: this.data.queryObj.pagesize,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: "GET",
      success(result) {
        if (reachBottom) {
          that.setData({
            goodsList: [...that.data.goodsList, ...result.data.response.data],
            total: result.data.response.dataCount,
          })
        }
      },
      fail(error) {
        console.log('request fail', error);
      },
      // 无论获取数据是否成功都会执行该方法
      complete: () => {
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading: false
        })
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

查询，排序也是在改变条件后执行getGoodsList方法。

（3）稍微需要说明的是页面上拉获取数据的方法：

 /**
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
    // 判断是否还有下一页数据
    if (this.data.queryObj.pagenum * this.data.queryObj.pagesize >= this.data.total) {
      wx.showLoading({
        title: '数据加载完毕！',
      })
      wx.hideLoading() // 关闭loading
      return
    }
    // 判断是否正在请求其它数据，如果是，则不发起额外的请求
    if (this.data.isLoading) return
    let pagenum = this.data.queryObj.pagenum
    this.setData({
      queryObj: {
        pagenum: pagenum += 1// 让页码值自增 +1
      }
    })
    this.getGoodsList(true)// 重新获取列表数据
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（4）及点击跳转到武将武将详情页的方法

 // 点击详情
  onGoodsDetail: function (e) {
    var name = e.currentTarget.dataset.name
    var data = JSON.stringify(e.currentTarget.dataset)
    wx.navigateTo({
      url: '../details/details?name=' + name + '&data=' + data
    })
  },
1
2
3
4
5
6
7
8

3，综合信息页

这个页面没有什么好说的，一个个内容摆下来就是了，很多不知道放在哪里的东西都先放在这里了。

4，关于页

与综合信息页结构相同

5，人物详情页

（1）基本详情

（2）更多详情

（3）评论评分

评论评分的页面代码：
wxml文件：

<!-- components/star-rating/star-rating.wxml -->
<view >
<!-- 人物总评分 -->
  <view class="star-rating-center">
  {{initialName}}：
  <block wx:for="{{stars_total}}" wx:key="index">
    <text class="star {{item.selected ? 'selected' : ''}}" data-index="{{index}}">{{item.type}}</text>
  </block>
  [{{goal}}分]
</view>
<!-- 评分&评论 -->
  <view class="reviews-container">
  <block wx:for="{{ratingsAndComments}}" wx:key="index" >
    <view class="single-review">
      <!-- 这里添加显示单个评分的代码 -->
      <view class="star-container">
        <block wx:for="{{item.stars}}" wx:key="index">
      <text class="star {{item.selected ? 'selected' : ''}}" data-index="{{index}}">{{item.type}}</text>
    </block>
    <!-- <view style=" justify-content: center;align-items: center;margin-left;20rpx;margin-top:15rpx">{{item.createTime}}</view> -->
      </view>
      <!-- 评论 -->
      <text class="comment">{{item.comment}}</text>
    </view>
  </block>
  </view>
</view>
<!-- 评分提交 -->
<view class="rating-editor">
 <!-- 评分 -->
<view class="flex-container">
  <text class="label">评分：</text>
  <view class="star-container-editor">
    <block wx:for="{{stars}}" wx:key="index">
      <text class="star {{item.selected ? 'selected' : ''}}" bindtap="onStarClick" data-index="{{index}}">{{item.type}}</text>
    </block>
  </view>
</view>

<!-- 评论 -->
<view class="flex-container">
  <text class="label">评论：</text>
  <view class="textarea-container">
    <textarea style="height:100rpx" type="text" name="biography" value="{{biography}}" placeholder="" maxlength="5000" bindinput="onTextareaInput"></textarea>
  </view>
</view>

  <button class="submit-button" bindtap="onSubmitRating">提交评分</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

js文件：

// components/star-rating/star-rating.js
import { BASE_URL2 } from '../../component/config.js';
Component({
  properties: {
    // 初始星级
    initialRating: {
      type: Number,
      value: 0
    },
    initialId: {
      type: String,
      value: ''
    },
    lastClickedTime:0,
    initialName: {
      type: String,
      value: ''
    },
  },
  data: {
    stars: [],
    stars_total: [],
    goal: '暂无评',
    name: '',
    ratingsAndComments: [],
    biography: ''
  },
  observers: {
    'initialRating': function (newVal) {
      this.setStars(newVal);
    },
  },
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
      console.log('组件实例进入页面节点树');
    },
    ready() {
      var that = this
      let id = this.data.initialId
      // 在组件在视图层布局完成后执行
      wx.request({
        url: BASE_URL2 + 'GetAllGoal',  //你的后台url地址
        data: {
          key: id
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: "GET",
        success(result) {
          let dataList = result.data.response;
          let num = 0;
          if (dataList.length > 0) {
            for (let i = 0; i < dataList.length; i++) {
              let stars = [];
              num += dataList[i].goal
              for (let j = 1; j <= 5; j++) {
                stars.push({
                  type: j <= dataList[i].goal ? '★' : '☆',
                  selected: j <= dataList[i].goal
                });
              }
              const currentRatingsAndComments = that.data.ratingsAndComments;
              that.data.ratingsAndComments.push({
                stars: stars,
                createTime: dataList[i].createTime,
                comment: dataList[i].comment
              })
              // 更新数组中特定元素的值
              currentRatingsAndComments[i].stars = stars;
              currentRatingsAndComments[i].comment = dataList[i].comment != null ? dataList[i].comment : ""
              // 使用 setData 更新数据并重新渲染
              that.setData({
                ratingsAndComments: currentRatingsAndComments
              });
            }
            num = num / dataList.length
            //人物评星
            let star = [];
            for (let j = 1; j <= 5; j++) {
              star.push({
                type: j <= num ? '★' : '☆',
                selected: j <= num
              });
            }
            //人物得分
            num = parseFloat(num.toFixed(2));
            console.log(num)
            that.setData({
              stars_total: star,
              goal: num
            })
          }
        },
        fail(error) {
          console.log('request fail', error);
        },
      })
    },
  },
  methods: {
    //评分显示
    setStars(rating) {
      let stars = [];
      for (let i = 1; i <= 5; i++) {
        stars.push({
          type: i <= rating ? '★' : '☆',
          selected: i <= rating
        });
      }
      this.setData({ stars });
    },
    //修改评分
    onStarClick(e) {
      const index = e.currentTarget.dataset.index;
      const rating = index + 1;
      this.setStars(rating);

      this.triggerEvent('ratingChanged', { rating });
    },
    //评论
    onTextareaInput: function (e) {
      this.setData({
        biography: e.detail.value
      });
    },
    //提交评分
    onSubmitRating() {
      var that = this
      let goal = 0;
      for (let i = 0; i < 5; i++) {
        if (this.data.stars[i].selected) {
          goal += 1
        }
      }
      wx.showModal({
        title: '确认提交', // 确认框标题
        content: '您确定要提交吗？', // 确认框内容
        success(res) {
          const now = new Date().getTime();
          if (now - that.data.lastClickedTime < 5000) { // 5秒内不允许重复点击
            wx.showToast({
              title: '操作过于频繁',
              icon: 'none'
            });
            return;
          }
          if (res.confirm) { // 用户点击了确定按钮
            wx.request({
              url: BASE_URL2 + 'PostGoal',//你的后台url地址
              data: {
                Id: that.data.initialId,
                goal: goal,
                comment: that.data.biography,
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              method: "GET",
              success(result) {
                that.setStars(5);
                that.setData({
                  ratingsAndComments: [],
                  biography: "",
                  lastClickedTime:now
                });
                let id = that.data.initialId
                // 在组件在视图层布局完成后执行
                wx.request({
                  url: BASE_URL2 + 'GetAllGoal',//你的后台url地址
                  data: {
                    key: id
                  },
                  header: {
                    'content-type': 'application/x-www-form-urlencoded'
                  },
                  method: "GET",
                  success(result) {
                    let dataList = result.data.response;
                    let num = 0;
                    if (dataList.length > 0) {
                      for (let i = 0; i < dataList.length; i++) {
                        let stars = [];
                        num += dataList[i].goal
                        for (let j = 1; j <= 5; j++) {
                          stars.push({
                            type: j <= dataList[i].goal ? '★' : '☆',
                            selected: j <= dataList[i].goal
                          });
                        }
                        const currentRatingsAndComments = that.data.ratingsAndComments;
                        that.data.ratingsAndComments.push({
                          stars: stars,
                          createTime: dataList[i].createTime,
                          comment: dataList[i].comment
                        })
                        // 更新数组中特定元素的值
                        currentRatingsAndComments[i].stars = stars;
                        currentRatingsAndComments[i].comment = dataList[i].comment != null ? dataList[i].comment : ""
                        // 使用 setData 更新数据并重新渲染
                        that.setData({
                          ratingsAndComments: currentRatingsAndComments
                        });
                      }
                      num = num / dataList.length
                      //人物评星
                      let star = [];
                      for (let j = 1; j <= 5; j++) {
                        star.push({
                          type: j <= num ? '★' : '☆',
                          selected: j <= num
                        });
                      }
                      //人物得分
                      num = parseFloat(num.toFixed(2));
                      that.setData({
                        stars_total: star,
                        goal: num
                      })
                    }
                  },
                  fail(error) {
                    console.log('request fail', error);
                  },
                })
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

css文件：

/* components/star-rating/star-rating.wxss */
.star-container {
  display: flex;
}

.star {
  font-size: 32rpx;
  color: #ccc;
  margin-right: 8rpx;
  cursor: pointer;
}

.star.selected {
  color: yellow;
}
/* 容纳所有评论的容器 */
.reviews-container {
  display: flex;
  flex-direction: column;
}

/* 单个评论的容器 */
.single-review {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc; /* 添加边界分隔每个评论 */
  margin-bottom: 10rpx;
  padding: 10rpx;
}

/* 星级评分的容器 */
.star-container {
  display: flex;
  margin-bottom: 5rpx;
}

/* 星星的样式 */
.star {
  font-size: 50rpx;
  margin-right: 5rpx;
}

.star.selected {
  color: gold;
}

/* 评论文本的样式 */
.comment {
  font-size: 32rpx;
  color: #333;
}
/* 用于编辑和提交评分的固定容器 */
.rating-editor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10rpx;
  border-top: 1px solid #ccc;
  z-index: 999;
}

/* 评分编辑器的星级容器 */
.star-container-editor {
  display: flex;
  margin-bottom: 10rpx;
  align-items: center;
  justify-content: center;
}

/* 提交按钮 */
.submit-button {
  padding: 10rpx;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4rpx;
  text-align: center;
}
.reviews-container {
  padding-bottom: 350rpx; /* 根据 .rating-editor 的高度来调整这个值 */
}
.star-rating-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.textarea-container {
  border: 1px solid #ccc; 
  margin-bottom:15rpx;
  border-radius: 4px;
  padding: 5rpx;
  flex: 1; /* 增加 flex 属性 */
}

/* 定义一个 flex 容器并垂直居中其内容 */
.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

/* 为“评分：”和“评论：”文本设置样式 */
.label {
  margin-right: 5px; /* 右侧外边距 */
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

6，自定义武将页