首页主要显示：轮播图、菜单、最新资讯、最新上架的图书
效果图
wxml代码
<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】--><view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false--><!--远程数据地址：/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条信息--><!--远程地址：/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'><!--远程数据（对象数组）：/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>
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;}
