第1层：整个产品列表公用的框架。
第2层：用于定义搜索总区块的背景颜色，下划线之类。
第3层：定义详细。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
.wxml文件代码示例如下：
.wxss文件代码示例如下：
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
第1层的框架，我们沿用上小节的。
.wxml文件代码示例如下：
Bindchange：点击里面的文字触发；内容通过range来绑定到内容数组。
.wxss文件代码示例如下：
.js文件代码示例如下：
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
.wxml文件代码示例如下：
.wxss文件代码示例如下：
小程序商城配备了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