小程序三级分类展示及右侧商品展示代码解析

这段代码是一个小程序的页面展示和数据处理的部分。具体来说，它包括了三级分类展示和右侧商品的展示。

在三级分类展示的部分，先使用了'wx:for'循环遍历所有的大分类，然后对于每个大分类，再使用'wx:for'循环遍历它的小分类，从而将三级分类展示出来。在展示的过程中，使用了'navigator'组件将每个小分类链接到对应的商品列表页面。

在右侧商品展示的部分，使用了WXS模块来处理商品链接的生成。根据不同的商品来源，选择不同的链接生成方式，从而保证了点击商品可以跳转到正确的页面。

三级分类展示代码

<!-- 三级级分类展示-->
<!-- <view wx:for="llcategories" wx:key="id" wx:if="l(item.pid == categorySelected.id)">

<navigator url="/pages/goods/list?categoryId=(item.id)">

<view class="no-data medium-category">

<view class="line"></view>

<view class="txt">(item.name)</view>

<view class="line"></view>

</view>

</navigator>

<view class="small-category-box">

<navigator wx:for="l(categories)" wx:for-item="small" wx:key="id" wx:if="(small.pid == item.id)" url="/pages/goods/list?categoryId=(small.id)"><view class="small-category">

<image mode="aspectFill" src="(small.icon)"></image>

<view>(small.name)</view>

</view>

</navigator>

</view>

</view> -->

右侧商品展示代码

<!--显示右侧商品-->
<WXS module="goodsDetailPage">

module.exports = {

url: function(item) {

if (item.supplyType == 'cps jd') {

return "/packageCps/pages/goods-details/cps-jd?id=' + item.id

} else if (item.supplyType == 'vop jd') {

return '/pages/goods-details/vop?id=' +item.yyId + '&goodsId=' +item.id

} else if (item.supplyType == 'cps_pdd') {

return '/packageCps/pages/goods-details/cps-pdd?id=' + item.id

} else if (item.supplyType == 'cps_taobao') {

return '/packageCps/pages/goods-details/cps-taobao?id=' +item.id

} else {

return '/pages/goods-details/index?id=' + item.id

}

}

}

代码解析:

使用wx:for循环遍历所有的大分类和小分类，并使用navigator组件将每个小分类链接到对应的商品列表页面。
使用WXS模块处理商品链接的生成，根据不同的商品来源，选择不同的链接生成方式。

优化建议:

可以使用更具描述性的变量名，例如将llcategories改为allCategories，将small改为subCategory。
可以使用函数封装代码逻辑，提高代码可读性和可维护性。
可以使用第三方库来帮助处理数据和页面渲染，例如lodash和react。
可以使用代码规范工具来规范代码风格，例如eslint和prettier。

总结:

本代码展示了一个小程序页面的三级分类展示和右侧商品展示功能的实现，包括使用wx:for循环遍历分类数据、navigator组件链接到商品列表页面以及WXS模块处理商品链接生成。您可以参考本代码实现类似功能，并根据实际需求进行优化和调整。