400-800-9385
网站建设资讯详细

如何使用Uniapp做购物App?

发表日期:2023-05-24 15:47:45   作者来源:王熙程   浏览:1714   标签:uniapp开发    
1、创建一个uniapp项目,然后创建云服务空间并使用运行数据库。
 

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、布局解决。
 

商城APP

 
10、 最后大家可以引入一些js插件,当进入app时页面中央出现旋转加载的效果。
如没特殊注明,文章均为方维网络原创,转载请注明来自http://cdpcwl.com/news/6780.html