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

 

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

 

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

 

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

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

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