原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现（1）首页_基于微信小程序的图书借阅系统的设计与实现课设报告

首页主要显示：轮播图、菜单、最新资讯、最新上架的图书

效果图

wxml代码

<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】-->
<view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false-->
<!--远程数据地址：http://phpshop.yaoyiwangluo.com/wx_lunbo.php-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" 
        interval="{{interval}}" duration="{{duration}}" > 
  <block wx:for="{{images2}}" wx:key="a002" style='height:120px;'>
    <!--给每个swiper-item外围添加了链接-->
    <navigator url='{{item.dizhi}}'>
      <swiper-item>
        <image src="{{item.tupian}}" class="slide-image2" />
      </swiper-item>
    </navigator>
  </block>
</swiper>
</view>

<!--快捷菜单-->
<view class='menu'>

  <navigator url='/pages/gongyong/chanpin_list' class='menu-item'>
    <image src='/img/menu01.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>所有图书</text>
  </navigator>

  <navigator url='/pages/fenlei/index'  open-type="switchTab" class='menu-item'>
    <image src='/img/menu02.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>图书分类</text>
  </navigator>

  <!--
    navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
    open-type="navigate"等价于API的　wx.navigateTo　而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="redirect"等价于API的　wx.redirectTo　而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="switchTab"等价于API的　wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    最后一个switchTab事件触发以后　把前面的页面都关闭了  
  -->
  <!--
    原理：判断用户是否登录，登录则链接到用户中心的首页；没有登录则链接到用户登录页面（tabBar页面）
    逻辑：user_id（用户登录的数字id）初始为0；读取缓存中的u_id的值；如果有则赋值给user_id（大于0的数字）
  -->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/index2' class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>
  <!--会员登录页面/pages/huiyuan/index是tabBar页面，所以需要添加 open-type="switchTab"-->
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>

  <!--订单列表的链接 处理同上 用户中心-->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/dingdan/dingdan_list' class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>我的借阅</text>
  </navigator>
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>我的借阅</text>
  </navigator>

  <navigator url='/pages/guanyu/fangkui' class='menu-item'>
    <image src='/img/menu05.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>留言反馈</text>
  </navigator>
  
  <!---php版本下面id对应为 236，237，236-->
  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=236&mc=帮助中心' class='menu-item'>
    <image src='/img/menu06.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>帮助中心</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=237&mc=平台介绍' class='menu-item'>
    <image src='/img/menu07.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>平台介绍</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=241&mc=活动列表' class='menu-item'>
    <image src='/img/menu08.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>最新公告</text>
  </navigator>

</view> 

<!--获取web网站后台发布的最新3条信息-->
<!--远程地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="myid">
  <navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
  </navigator>
</block>

<!--区块标题-最新上架产品; 更多链接到所有产品页面-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>最新上架图书</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view>

<!--最新上架商品-->
<view class='zuixin'>
  <!--远程数据（对象数组）：http://www.yaoyiwangluo.com/wx_CpList_top4.asp-->
  <!--获取的远程数据赋值给数组变量：zuixins；然后循环显示该数组的内容-->
  <block wx:for="{{zuixins}}" wx:key="cp_id">
    <!--每个产品会链接到详细页面，需要的参数：产品id+产品名称-->
    <navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'>
      <image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
      <text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
      <view>
        <text class='zuixin-jiage0'>价格：¥</text>
        <text class='zuixin-jiage1'>{{item.jiage}}</text>
        <text class='zuixin-jiage2'></text>
      </view>
    </navigator>
  </block>
</view>

<!--销售排行-标题区块-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>图书借阅榜</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view>
<!--销售排行-商品列表-->
<block wx:for="{{tuijians}}" wx:key="cp_id">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'>
  <view class='paihang-tupian'>
    <image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
  </view>
  <view class='paihang-xinxi'>
    <text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
    <text class='paihang-jianjie'>产品简介</text>
    <view>
      <text class='paihang-xuhao'>No.{{index+1}}</text>
      <text class='paihang-xiaoshou'> | 456人付款 | </text>
      <text class='paihang-jiage0'> ¥</text>
      <text class='paihang-jiage1'> {{item.jiage}}</text>
    </view>
  </view>
</navigator>
</block>
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

wxss代码

/*广告图样式*/

.ad01 {
  box-shadow: 0px 2px 2px gainsboro; /*阴影*/
  margin: 2px; /*外边距*/
}

.ad01-img {
  width: 100%;
}

/*轮播图样式*/
.slide-image {
  height: 120px;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

.slide-image2 {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

/*快捷菜单*/

.menu {
  display: flex;
  flex-wrap: wrap; /*换行*/
  border-bottom: 1px solid gainsboro; /*菜单最下面线条*/
}

.menu-item {
  width: 25%; /*1行4个菜单*/
  padding: 5px; /*内边距*/
  box-sizing: border-box;
  display: flex;
  justify-content: center; /*左右居中*/
  flex-direction: column; /*从上到下*/
}

.menu-img {
  width: 66%;
  align-self: center;
}

.menu-mc {
  font-size: 14px;
  align-self: center;
}

.xinxi {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #f2f2f2;
}

.xinxi-icon {
  width: 22px;
  height: 22px;
}

.xinxi-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xinxi-arrow {
  width: 13px;
  height: 13px;
}

/*区块标题*/

.qukuai {
  display: flex;
  background-color: aliceblue;
  align-items: center;
}

.y01 {
  width: 3px;
  height: 18px;
  background-color: green;
  margin: 5px;
  box-shadow: 2px 2px 2px gainsboro;
}

.t01 {
  color: gray;
  flex-grow: 1;
  text-shadow: 1px 1px 1px gainsboro;
}

.m01 {
  color: gray;
  margin-right: 5px;
  text-shadow: 2px 2px 2px gainsboro;
}

.zuixin {
  display: flex;
  flex-wrap: wrap;
}

.zuixin-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 1px dotted gainsboro;
}

.zuixin-img {
  width: 100%;
  border: 1px solid #fcfafa;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
  padding: 5px;
  box-sizing: border-box;
}

.zuixin-mc {
  font-size: 12px;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuixin-jiage0 {
  font-size: 10px;
  padding: 3px;
  color: red;
}

.zuixin-jiage1 {
  font-size: 14px;
  padding: 3px;
  color: red;
}

.zuixin-jiage2 {
  font-size: 11px;
  padding: 3px;
  color: gray;
}

/*销售排行*/

.paihang-item {
  display: flex;
  padding: 5px;
  width: 100%;
}

.paihang-tupian {
  width: 25%;
}

.paihang-img {
  width: 100%;
  border: 1px solid gainsboro;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
}

.paihang-xinxi {
  width: 75%;
  margin-left: 5px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.paihang-mingcheng {
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.paihang-jianjie {
  font-size: 11px;
  color: gray;
  margin: 3px 0;
}

.paihang-xuhao {
  color: green;
  font-size: 13px;
}

.paihang-xiaoshou {
  font-size: 11px;
  color: gray;
}

.paihang-jiage0 {
  font-size: 10px;
  color: red;
}

.paihang-jiage1 {
  font-size: 13px;
  color: red;
}
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