uniapp 电商app 商品列表组件及开发中的规范问题汇总

商品列表组件具体代码

<template>
	<view>
		<view class="solids-bottom padding-xs flex align-center" v-if="showTitle">
			<view class="flex-sub text-center">
				<view class="text-xl padding">
					<text class="text-black text-bold">{{title}}</text>
				</view>
			</view>
		</view>
		<view class="margin-bottom zaiui-goods-list-box show" >
			<view class="flex flex-wrap ">
				<view >
					<block v-for="(item,index) in goodsData" :key="'item'+index">
						<view class="goods" @tap="listTap(item)">
							<view class="goods-img image-200" >
								<image :src="item.pictUrl" lazy-load style="width:100%;"/>
							</view>
							<view class="goods-text" >
								<view class="text-cut-2 text-black">{{item.title}}</view>
								<view class="flex-sub" v-if="item.couponInfo">
									<text class="cu-tag light bg-red radius sm ">{{item.couponInfo}}</text>
								</view>
								<!-- 价格 -->
								<view class="margin-top-xs">
									<view>
										<view class="flex-sub flex justify-between" >
											<text class="text-price text-delete">{{item.reservePrice}}</text>
											<text class="text-price text-red text-xl text-left">{{item.zkFinalPrice}}</text>
										</view>
										<view class="quan">
											<text>销量{{item.tkTotalSales}}</text>
											<view class="image">
												<text class="text-price text-price-after">{{item.couponAmount ? item.couponAmount : 0.00}}</text>
												<image src="../../../static/images/goods/quanxiao.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="cu-load bg-white" :class="!isLoad?'loading':'over'"></view>
	</view>
</template>

<script>
	import {requestTaokeList} from "@/static/api/taoke-controller.js"
	export default {
		name: 'goods-list',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			cate:{
				type:Number,
				default:16
			},
			loadDataEventCount:{
				type:Number,
				default:0
			},
			title:{
				type:String,
				default:'为您推荐'
			},
			showTitle:{
				type:Boolean,
				default:true
			}
		},
		watch: {
			loadDataEventCount() {
				this.setReachBottom();
			}
		},
		data(){
			return{
				goodsData:[],
				pageNo:0,
				isLoad:false
			}
		},
		created(){
			this.getGoodsData();
		},
		methods: {
			listTap(data) {
				uni.navigateTo({
					url: '/pages/goods/goods?content='+encodeURIComponent(JSON.stringify(data))
				});
			},
			getGoodsData(){
				this.isLoad = false
				requestTaokeList(this.cate,this.pageNo).then(res=>{
					if(res.resultList && res.resultList.length>0){
						this.goodsData = this.goodsData.concat(res.resultList)
					}else{
						this.isLoad = true
					}
				}).catch(res =>{
					this.isLoad = true
				})
			},
			//触底了
			setReachBottom() {
				this.pageNo++;
				this.getGoodsData();
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../../static/css/goodslist.scss";
</style>

开发中的规范问题汇总

1. 命名规范问题
   i. 从数据库获取来的数据：
   如果是对象：则用 xxxData命名
   如果是数组或列表：则用xxxList命名
   如果是JSON：则用xxxJson命名
   ii.本地创建的数据
   如果是对象：则用xxxObj命名
   如果是数组或列表：则用xxxArr 或xxxArray命名
   如果是JSON：则用xxxMap命名
   汇总成一句话就是：约定大于配置，配置大于开发
2. 子组件传值问题：
   <moneylist :type="'image'">
<moneylist :type="image">
   以上的两种情况，最好是使用第二种，如果传递的属性为一个字符串（上图中的image），则可以去掉单引号’‘直接书写，而且不需要属性名称前面添加冒号:
   总结：如果父组件往子组件中传值props,
   如果传递的属性值为字符串，则可以：
   i.去掉属性名称前面的：，动态绑定的含义
   ii.属性值不需要添加’'单引号进行包裹
3. 对于不经常改动的数据，如果放到了vuex中，则不能每次调用获取函数，都往vuex中commit数据。这样会导致页面出现逻辑错误。一般都是存储一遍后，直接通过this.$store.state.xxx.xxx或者this.$store.getters.xxx的方式进行获取即可。
4. 代码冗余及无意义的代码问题
   虽然我看不懂为何这么做，但还是将代码贴一下，积累后会看得懂的。。。。（迷之自信）

const goodsCate = {
  state: {
    goodsCate: [],
	cateMap:{},
	parentKey:"root"
  },
  mutations: {
    SET_GOODSCATE: (state, goodsCate) => {
      state.goodsCate = goodsCate
    },
	SET_GOODSCATEBYID:(state,cateArray)=>{
		if(cateArray && cateArray.length>0){
			if(cateArray[0].parentId){
				state.cateMap[cateArray[0].parentId] = cateArray
			}else{
				state.cateMap[state.parentKey] = cateArray
			}
		}
	}
  },
  getters:{
	  GET_GOODSCATE: state => {
		  return state.goodsCate
	  },
	  GET_GOODSCATEBYID:state=> parentId => {
		  if(parentId){
		  	return state.cateMap[parentId]
		  }else{
		  	return state.cateMap[state.parentKey]
		  }
	  }
  }
}
export default goodsCate