微擎模块开发-微擎小程序商城分类页面分类跳转至商品分类列表页详解（后端篇）

相对于上节课的内容这节课想就行简单的不少，不过设计思路都是一样的，不过这个把这4次循环都写在了不同接口里，思路更明确。

商城分类页面分类数据展示category.wxml

<view class="rec-cate">
	<block wx:for="{{ categorySonId }}" wx:key='id'>
		<navigator url="/shangcheng_xk/pages/category/cateDetail/cateDetail?cateid={{ item['id'] }}&catetype=category" class="cate-item">
				<image src="{{ item.icon }}" mode="widthFix"></image>
				<text>{{ item.cate_name }}</text>
		</navigator>
	</block>
</view>

分类商品列表数据展示cateDetail.wxml

<!--shangcheng_xk/pages/category/cateDetail/categoryDetail.wxml-->
<view class="container">
	<view class="search">
		<image src="http://www.shancloudy.com/attachment/images/2/2020/07/F1ByZZQbWLRByL5Kng1UKDmruLYG3W.png" mode="widthFix"></image>
		<input type="text" placeholder="请输入您要搜索的内容..."></input>
	</view>
	<!-- 商品列表开始 -->
	<view class="goods">
		<view class="special-title">
			<view class="special-rec">为您推荐</view>
			<view class="special-more">查看更多 ></view>
		</view>
		<view class="goods-list">
			<view class="goods-item" wx:for="{{ goods }}" wx:key='id'>
				<navigator url="/shangcheng_xk/pages/goods/goods?goodsid={{ item['id'] }}">
					<view class="goods-thumb">
						<image src="{{ item.image['0'] }}" mode="widthFix"></image>
					</view>
					<view class="goods-info">
						<text class="goods-title">{{ item.goods_name}}</text>
						<text class="goods-desc">{{ item.goods_desc}}</text>
					</view>
					<view class="goods-price">
						<view class="g-price">￥{{ item.now_price }}</view>
						<view class="buynow">立即购买</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
	<!-- 商品列表结束 -->
	<!-- 版权信息开始 -->
	<view class="copyright">
		<image src="http://www.shancloudy.com/attachment/images/2/2020/07/Fsbz5jb4J2J2bq2lyJ7dz5DSfmxiZm.jpg" mode="widthFix"></image>
	</view>
	<!-- 版权信息结束 -->
</view>

分类商品列表数据展示cateDetail.js

// shangcheng_xk/pages/category/cateDetail/categoryDetail.js
var app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		goods : ''
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		if(options.catetype == 'index'){
			this.cateIndex(options)
		}else{
			this.cateCategory(options)
		}
	},

	//获取首页分类数据
	cateIndex:function(options){
		var that = this
		app.util.request({
			url: 'entry/wxapp/cateIndex',
			data: {
				m: 'shangcheng_xk',
				cateid:options.cateid
			},
			success(res) {
				that.setData({goods : res.data.data})
			}
		});
	},

	//获取分类页跳转分类详情页数据
	cateCategory:function(options){
		var that = this
		app.util.request({
			url: 'entry/wxapp/cateCategory',
			data: {
				m: 'shangcheng_xk',
				cateid:options.cateid
			},
			success(res) {
				that.setData({goods : res.data.data})
			}
		});
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {

	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		
	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {

	}
})

以上就是本节课的主要内容，如果有看不懂的同学可以联系小编，还有一个好消息，就是如果文字教程大家看着比较费劲的话，可以关注小编，在8月份小编录制的视频教程就要正式上线了，到时候会对微擎框架进行更有深度的解析，与大家一起交流学习心得。