09-微信小程序商城分类和产品左右布局框架（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

本章主要讲解产品分类功能和产品详细页面的实现。主要涉及：如何实现左右布局的框架，如何实现产品页面顶部菜单的切换，产品的详情页面、底部菜单、评论页面的实现等。

左右布局框架

左右布局框架效果如图13-1所示。

布局分析

每一个层级使用view或者循环/链接等元素来实现，结构布局分析示意如图13-2所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view class="container">
<!-- 左侧分类 --><view ><block wx:for=""><text >分类名称</text></block>
</view><-- 右侧产品 -->
<view >  <view ><block wx:for=""><view ><navigator url=' ><image /><text>产品名称</text><text>￥：价格</text></navigator></view> </block></view>
</view></view>

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。

功能的实现

左侧分类说明：
 读取对象数组navList的值，循环显示。
 给定分类文本两个样式，普通样式type-nav和选中的样式selected；如果当前选中的分类变量curNav和分类本身的id一致，则表示当前分类选中。
 点击分类的时候触发事件bindtap，调用对应的自定义函数selectNav来处理：设定变量curNav（用于判断当前显示的分类，默认curNav=1显示第一个分类）和变量curIndex（传递给产品数组，用于定义选择了哪个分类；这里是数组的序号，默认curIndex=0，数组是从0开始的）的值。
右侧产品说明：
 dishesList 这里是定义的一个多层嵌套的数组，
 dishesList[ [{对象},{对象},{对象}…] ,…. ]，数组里面嵌套数组，数组里再嵌套对象。
 循环显示数组的内容，我们这里取的是dishesList嵌套的这层数组，也就是dishesList[序号]的数据，我们定义了变量curIndex来表示序号（默认为0，数组下标从0开始，curIndex随着左侧菜单的点击值会变换），也就是我们使用dishesList[curIndex]来作为产品的数组，里面包含多个产品。
wxml文件代码示例如下：

<view class="container"><!-- 左侧分类 --><view class="aside"  style="height:{{winHeight}}px"><block wx:for="{{navList}}"><text class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav"data-index="{{index}}" data-id="{{item.id}}">
{{item.name}}</text></block></view><!-- 右侧产品 --><view class="content">  <view class="cps"><block wx:for="{{dishesList[curIndex]}}"><view class="cp-item" ><navigator url='/pages/fenlei/yemian/01-xiangxi'><image src='{{item.img}}' class="cp-image"/><text>{{item.name}}</text><text>￥：{{item.price}}</text></navigator></view> </block></view></view></view>

.wxss文件样式代码示例如下：

/*整体框架样式：flex模式，左侧菜单，右侧产品*/
.container {height: 100%;box-sizing: border-box;background-color: #f4f4f4;display: flex;flex-direction: row;
}
/*左侧-分类*/
.aside{width:4rem;
border-right: 1px solid #ddd;font-size: .85rem; height: 100%;display: flex;flex-direction: column; /*定义菜单显示方式，从上到下排列*/
}
.type-nav{ /*分类通用样式*/position: relative;padding:.7rem .3rem;text-align: center; /*居中*/border-bottom: 1px solid #ddd; /*每个分类下面的灰色横线*/z-index: 10;
}
.type-nav.selected{/*选中某个分类的样式*/margin-right: -1px;padding-left:-1px;color: #333;background-color: #fff; /*白色背景，选中时候突出显示*/
}/*右侧-1行3列图片*/
.content{/*右侧框架总样式*/background-color: #fff;flex: 1; /*定义产品列表占满所有空间，这里背景都是白色*/
}
.cps {/*右侧产品的总样式*/display: flex; flex-wrap:  wrap; /*自动换行*/
}
.cp-item {width: 30%;/*考虑右侧留点空白，按1行排列3个产品的比例来设计*/display: flex;padding: 2px;
}
.cp-item navigator
{display: flex;flex-direction: column; /*定义产品图片、名称、价格从上到下按行排列*/
}
.cp-image {width: 180rpx;height: 180rpx;
margin: 1px;  padding: 1px;
}
.cp-item text {padding-top: 10rpx;font-size: 25rpx; text-align:  center; /*文字居中显示，默认靠左*/width: 100%;
}

.js文件代码示例如下：

const app = getApp();
Page({/* 页面的初始数据 */data: {winWidth: 0,  /* 手机的宽度，初始化设定为0 */winHeight: 0, /* 手机的高度，初始化设定为0 */hidden: false,curNav: 1,
curIndex: 0,
/* 定义分类的数组信息navList */navList: [{id: 1,name: '分类1'},{id: 2,name: '分类2'},{id: 3,name: '分类3'}
],
/* 定义产品信息dishesList，多层嵌套数组 */dishesList: [[{name: "分类1的产品01",price: 38,num: 1,id: 1,img:"/img/cp01.jpg"},{name: "分类1的产品02",price: 58,num: 1,id: 2,img: "/img/cp02.jpg"},{name: "分类1的产品03",price: 88,num: 1,id: 3,img: "/img/cp03.jpg"},{name: "分类1的产品04",price: 58,num: 1,id: 4,img: "/img/cp04.jpg"},{name: "分类1的产品05",price: 88,num: 1,id: 5,img: "/img/cp05.jpg"},{name: "分类1的产品06",price: 88,num: 1,id: 6,img: "/img/cp06.jpg"},{name: "分类1的产品07",price: 58,num: 1,id: 7,img: "/img/cp07.jpg"},{name: "分类1的产品08",price: 88,num: 1,id: 8,img: "/img/cp05.jpg"}],[{name: "分类2的产品01",price: 18,num: 1,id: 3,img: "/img/cp06.jpg"},{name: "分类2的产品02",price: 58,num: 1,id: 4,img: "/img/cp07.jpg"},{name: "分类2的产品03",price: 58,num: 1,id: 4,img: "/img/cp08.jpg"},{name: "分类2的产品04",price: 58,num: 1,id: 4,img: "/img/cp09.jpg"}],[{name: "分类3的产品01",price: 18,num: 1,id: 5,img: "/img/cp08.jpg"},{name: "分类3的产品02",price: 8,num: 1,id: 6,img: "/img/cp09.jpg"}],[]],
dishes: []
},
/* 点击左侧菜单，自定义处理函数 */
selectNav(event) {let id = event.target.dataset.id,index = parseInt(event.target.dataset.index);this.setData({curNav: id, /* 当前选中的分类变量curNav和分类本身的id一致，则表示当前分类选中 */curIndex: index /* 传递给右侧产品列表的数组下标 */})
},
onLoad() {var that = this;/* 获取系统信息 */wx.getSystemInfo({success: function (res) {that.setData({winWidth: res.windowWidth, /* 手机的宽度*/winHeight: res.windowHeight/* 手机的高度*/});}});
}})

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/