uni |
您所在的位置：网站首页 › 网店小程序源码 › uni |
uni
|
前面两篇文章介绍了uni-app项目的创建和整体架构的搭建，还有如何使用分包加载和第三方组件等等，从这篇文章开始，我们就要进一步介绍具体的开发过程，做一个简单的微信小程序商城项目。 首先在pages下创建一个index文件夹，再创建一个index.vue文件，用来写主页内容。创建index.vue文件可以选择简单模板，会出现三个模块，如下所示： 然后就可以在里面写相应的内容了，也可以先搭建一下里面的内容模板，如下所示： export default { data() { return { } }, onLoad() { }, methods: { } } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; }我设计的主页效果图如下：
下面是具体的代码： {{goods.goodsName}} ￥{{goods.goodsCPrice}} ￥{{goods.goodsOPrice}} {{goods.goodsIntroductionText}} {{goods.goodsName}} ￥{{goods.goodsCPrice}} ￥{{goods.goodsOPrice}} {{goods.goodsIntroductionText}} export default { data() { return { // 下拉菜单栏 dropdownMenus: [{ text: '全部商品', value: 0 }, { text: '人气商品', value: 1 }, { text: '新品上市', value: 2 }, ], //通告文字 text: '新上架小零食全部九折销售，更有满99减价优惠，数量有限，先到先得！', dropdownValue: 0, searchValue: '', //轮播图配置 lunboData: [], autoplay: true, //是否自动切换 interval: 3000, //自动切换时长 duration: 1200, //滑动动画时长 circular: true, //是否自动采用衔接滑动 //中部导航图 icon: [], //商品实例图 goodsList: [] } }, onLoad() { //轮播图 this.swiperPictures(); //中部导航栏tabBar this.tabBarIcon(); //商品示例 this.goodsData(); }, methods: { /* 下拉跳转 */ toGoodsList(e) { let dropdownValue = ''; for (var i = 0; i < this.dropdownMenus.length; i++) { if (this.dropdownMenus[i].value == e.detail) { dropdownValue = this.dropdownMenus[i].text; } } console.log(dropdownValue) }, /* 搜索onChange */ onChange(e) { let searchData = ''; searchData = e.detail; console.log(searchData) }, /* 取消onSearch */ searchCancel() { console.log("取消搜索") }, /* 轮播图 */ swiperPictures() { var data = { "datas": [{ "id": 1, "imgurl": "../../static/images/lunboimg/ad1.jpg" }, { "id": 2, "imgurl": "../../static/images/lunboimg/ad2.jpg" }, { "id": 3, "imgurl": "../../static/images/lunboimg/ad3.jpg" }, ] }; this.lunboData = data.datas }, /* 中部导航栏 */ tabBarIcon() { var data = { "icons": [{ "photoSrc": "/static/images/tabBarimg/shoucang.png", "text": "新品", "toUrl": "/pagesGoods/goods/index" }, { "photoSrc": "/static/images/tabBarimg/xinpin.png", "text": "收藏", "toUrl": "/pagesGoods/goods/index" }, { "photoSrc": "/static/images/tabBarimg/jingpin.png", "text": "精品", "toUrl": "/pagesGoods/goods/index" }, { "photoSrc": "/static/images/tabBarimg/tuijian.png", "text": "推荐", "toUrl": "/pagesGoods/goods/index" } ] }; this.icon = data.icons }, /* 展示商品列表 */ goodsData() { var data = { "goods": [{ "goodsId": 1, "goodsName": "风味牛轧糖", "goodsOPrice": 45.00, //原价 "goodsCPrice": 35.00, //现价 "goodsIntroductionText": "喜欢吃儿童时期的牛轧糖，也总是想要尝试新奇的，试一试不一样的味道，是新鲜也是回忆。", //介绍 "goodsImg": "../../static/images/goodsimg/goods1.jpg", "toUrl": "/pagesGoods/goods/index" }, { "goodsId": 2, "goodsName": "什锦礼盒", "goodsOPrice": 95.00, //原价 "goodsCPrice": 85.00, //现价 "goodsIntroductionText": "高品质，精选细选，上等原料，精心加工，保持原有味道，好吃到不能自拔。", "goodsImg": "../../static/images/goodsimg/goods2.jpg", "toUrl": "/pagesGoods/goods/index" }, { "goodsId": 3, "goodsName": "多乐士", "goodsOPrice": 185.00, //原价 "goodsCPrice": 135.00, //现价 "goodsIntroductionText": "多乐士油漆，专注健康，无甲醛，无刺激性气味，立刻入住，享受健康生活", "goodsImg": "/static/images/goodsimg/tu750.png", "toUrl": "/pagesGoods/goods/index" }, { "goodsId": 4, "goodsName": "多乐士墙面漆", "goodsOPrice": 245.00, //原价 "goodsCPrice": 205.00, //现价 "goodsIntroductionText": "多乐士油漆，专注健康，无甲醛，无刺激性气味，立刻入住，享受健康生活", "goodsImg": "/static/images/goodsimg/tu750.png", "toUrl": "/pagesGoods/goods/index" }, ] }; this.goodsList = data.goods }, /* 限时秒杀跳转事件 */ seckill(e) { uni.navigateTo({ url: '/pagesGoods/goods/index', }) }, /* 优惠券专区和套餐礼包跳转事件 */ giftPack(e) { uni.navigateTo({ url: '/pagesGoods/goods/index', }) }, } } .content { width: 100%; height: 100%; margin: 0 auto; } .header{ width: 100%; height: 20%; } .header .dropdown{ width: 25%; height: 100%; float: left; } .header .search{ width: 100%; height: 100%; } /*轮播控件*/ .home-swiper { width: 98%; margin: auto; height: 360rpx; } .slide-image { width: 100%; height: 100%; } .arrondi { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 20rpx; } .xsms image { width: 340rpx; height: 280rpx; } .xsmsRight image { width: 360rpx; height: 135rpx; } .title { width: 750rpx; display: flex; justify-content: center; align-items: center; } .title image { height: 64rpx; width: 232rpx; padding: 55rpx 0 30rpx 0; } .van-grid-item__content { padding: 6px 6px !important; } .goods { box-sizing: border-box; overflow: hidden; break-inside: avoid; border: 1px solid #efefef; border-radius: 5rpx; width: 100%; } .goodsNameText { width: 100%; height: 60%; } .goodsName { font-size: 30rpx; line-height: 40rpx; padding: 15rpx 15rpx 5rpx 15rpx; color: #555; } .gname { display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .goodsPriceText { padding: 0 15rpx; } .goodsCPrice { font-size: 28rpx; color: firebrick; font-weight: bold; margin-right: 5rpx } .goodsOPrice { font-size: 30rpx; color: #aaa; text-decoration: line-through; padding-bottom: 10rpx } .goodsIntroductionText { padding: 10rpx 15rpx; border-top: 1px solid #efefef; } .goodsIntroduction { font-size: 22rpx; line-height: 35rpx; color: #999; height: 60rpx; } .introduction { display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }data里面的数据都是本地数据，数据格式是统一的，可以从后台根据此格式传到前端，然后进行数据渲染。 轮播图是使用了原始的uni-app组件swiper，然后再方法里面轮播图所需的组件格式。 页面的设计肯定有很多不足和欠缺的地方，还望斧正，谢谢~ |
【本文地址】