1、創(chuàng)建一個(gè)uniapp項(xiàng)目，然后創(chuàng)建云服務(wù)空間并使用運(yùn)行數(shù)據(jù)庫(kù)。
 

 

1. 然后在pages文件子目錄里面的tabbar，新建四個(gè)頁(yè)面分別是首頁(yè)、分類、購(gòu)物車和我的，并勾選在pages.json里面注冊(cè)，在pages.json里面寫pages里面navigationBarTitleText(header)頭部命名，也可以在頁(yè)面里面進(jìn)行添加將navigationBarTitleText元素取消就行了，和tabBar語(yǔ)句四個(gè)頁(yè)面分別對(duì)應(yīng)各自的路徑與命名，iconPath和selectedIconPath引入訪問(wèn)時(shí)和訪問(wèn)后的效果圖，selectedColor和borderStyle之類的元素可以設(shè)定底部footer樣式。

 

1. get_label 云函數(shù)編寫，引用數(shù)據(jù)庫(kù)數(shù)據(jù)，我們需要在methods里面定義函數(shù)來(lái)獲取云函數(shù)返回的值，讓將值賦值給定義的變量，再傳給組件，組件里使用props來(lái)接收父組件傳過(guò)來(lái)的值，統(tǒng)一管理云函數(shù)請(qǐng)求，我們?cè)诟夸浵?common/api里面進(jìn)行封裝請(qǐng)求，在api/index.js編寫，在main.js中引入，在掛載至$api上供全局使用。

 

1. 首頁(yè)頁(yè)面進(jìn)行l(wèi)ogo和登錄搜索按鈕的布局及數(shù)據(jù)的綁定和接口使用，用內(nèi)置組件swiper進(jìn)行輪播圖的設(shè)計(jì)，設(shè)計(jì)一個(gè)流行、熱的商品4X2的布局flex布局，圓形的商品圖下面是商品的名稱與簡(jiǎn)介，再寫三個(gè)選項(xiàng)頁(yè)推薦、新款和精選對(duì)應(yīng)各自的商品。

 
5、 //查找之前數(shù)組中是否有這個(gè)商品
        for(let item of context.state.cartList){
            if(item.iid===obj.iid){
                oldProduct = item;
            }
        }
//商品推薦接口請(qǐng)求
         getRecommend().then((res)=>{
            const {list} = res.data;
            // this.recommend = list;
            // console.log(this.recommend)
            let temp = [];
            for(let i in list){
                temp.push(list[i])
            }
            this.recommend = temp;
        });
 
6、分類頁(yè)主要左右布局左邊放主目錄右邊放子目錄。
 
7、 購(gòu)物車與所有商品進(jìn)行綁定，給一個(gè)判斷當(dāng)購(gòu)物車為空時(shí)顯示一張圖，圖的意思大概就是沒(méi)有商品之類的。
 
8、 data() {
        return {
            //購(gòu)物車中的商品數(shù)據(jù)
            cartList: this.$store.state.cartList,
            //當(dāng)購(gòu)物車為空時(shí)的圖片展示
            img:require('圖片')
        };
}
 
9、我的需要用戶登錄之后才會(huì)顯示余額卡包，訂單信息通過(guò)css、布局解決。
 

 
10、 最后大家可以引入一些js插件，當(dāng)進(jìn)入app時(shí)頁(yè)面中央出現(xiàn)旋轉(zhuǎn)加載的效果。