基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（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>

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; }

js代码

//获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { indicatorDots: true, vertical: false, autoplay: true, interval: 3000, duration: 1200, images2:[], //用于存放远程服务器的广告图片和链接数据，对象数组 xinxis:[], //存放最新资讯 zuixins:[], //最新商品 tuijians:[],//推荐商品 user_id:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //console.log(app.myapp.php); //输出当前php版本的接口网址（调试使用） var that = this //读取用户id的缓存，如果存在则赋值 wx.getStorage({ key: 'u_id', success: function(res) { that.setData({ user_id:res.data}) }, }) //读取远程服务器轮播图片的数据，带连接（php后台数据） wx.request({ //url: 'http://phpshop.yaoyiwangluo.com/wx_lunbo.php', url: app.myapp.php + '/wx_lunbo.php', //php版 //url: app.myapp.jsp + '/wx_lunbo.jsp', //jsp版 success: function (res) { that.setData({ images2: res.data }) } }) //获取最新的信息（3）条 //php版本地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php wx.request({ //url: app.myapp.asp + '/wx_news_list.asp', //asp版 url: app.myapp.php + '/wx_news_list.php', //php版 //url: app.myapp.jsp + '/wx_news_list.jsp', //jsp版 success:function(res){ that.setData({ xinxis:res.data }) } }) //最新上架产品（5）条 //asp版本地址：http://www.yaoyiwangluo.com/wx_CpList_top4.asp //php版本地址：wx_CpList_top4.php wx.request({ //url: app.myapp.asp + 'wx_CpList_top4.asp', //asp版 url: app.myapp.php + '/wx_CpList_top4.php', //php版 //url: app.myapp.jsp + 'wx_CpList_top4.jsp', //jsp版 success:function(res){ that.setData({ zuixins:res.data }) } }) //最新上架产品（5）条 //asp版本地址：http://www.yaoyiwangluo.com/wx_CpList_top4.asp //php版本地址：wx_CpList_tuijian6.php wx.request({ //url: app.myapp.asp + 'wx_CpList_top4.asp', //asp版 url: app.myapp.php + '/wx_CpList_tuijian6.php', //php版 //url: app.myapp.jsp + 'wx_CpList_top4.jsp', //jsp版 success:function(res){ that.setData({ tuijians:res.data }) } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })