1、創建一個uniapp項目，然后創建云服務空間并使用運行數據庫。
 

 

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

 

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

 

1. 首頁頁面進行logo和登錄搜索按鈕的布局及數據的綁定和接口使用，用內置組件swiper進行輪播圖的設計，設計一個流行、熱的商品4X2的布局flex布局，圓形的商品圖下面是商品的名稱與簡介，再寫三個選項頁推薦、新款和精選對應各自的商品。

 
5、 //查找之前數組中是否有這個商品
        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、 購物車與所有商品進行綁定，給一個判斷當購物車為空時顯示一張圖，圖的意思大概就是沒有商品之類的。
 
8、 data() {
        return {
            //購物車中的商品數據
            cartList: this.$store.state.cartList,
            //當購物車為空時的圖片展示
            img:require('圖片')
        };
}
 
9、我的需要用戶登錄之后才會顯示余額卡包，訂單信息通過css、布局解決。
 

 
10、 最后大家可以引入一些js插件，當進入app時頁面中央出現旋轉加載的效果。