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