如何使用Uniapp做购物App？

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时页面中央出现旋转加载的效果。