项目搭建

后端接口:https://www.showdoc.com.cn/128719739414963/2516997897914014

{"pages": ["pages/index/index","pages/category/category","pages/goods_list/goods_list","pages/goods_detail/goods_detail","pages/cart/cart","pages/collect/collect","pages/order/order","pages/search/search","pages/user/user","pages/feedback/feedback","pages/login/login","pages/auth/auth","pages/pay/pay","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#eb4450","navigationBarTitleText": "碰磕Shop","navigationBarTextStyle": "white"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home-o.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "icons/category.png","selectedIconPath": "icons/category-o.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "icons/cart.png","selectedIconPath": "icons/cart-o.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my-o.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

项目结构

编写整个项目中需要用到的功能

request.js

用于ajax请求接口,封装成方法…

//promise 发送ajax
export const request=(path,data)=>{return new Promise((resolve,reject)=>{wx.request({url: "https://api-hmugo-web.itheima.net/api/public/v1/"+path,data:data,success:ret=>{resolve(ret);},//失败fail:err=>{reject(err);}})})
};

全局样式

此处icon用了阿里巴巴的矢量库，可自行选择性下载

@import './style/iconfont.wxss';page,view,text,swiper,swiper-item,image,navigator{padding:0;margin:0;box-sizing: border-box;
}image{width: 100%;
}

组件(搜索框)

SearchInput

界面xml

<!--components/SearchInput/SearchInput.wxml-->
<view class=".search_input"><navigator url="/pages/search/search" open-type="navigate">搜索</navigator>
</view>

样式wxss

.search_input{height: 90rpx;padding: 10rpx;background-color: var(--themeColor);color: #666666;
}
.search_input navigator{height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border-radius: 10rpx;
}

这样别的页面就可以使用该组件了,不过使用前记得要配置组件…

首页

index

代码编写

使用searchinput搜索框组件时需要配置…
json

{"usingComponents": {"search-input":"../../components/SearchInput/SearchInput"}
}

界面

<view>
<!-- 首页搜索框 --><search-input></search-input><!-- 轮播图默认:320*240  原图 750*340图片 宽 100% 高 自适应--><view class="index_swiper"><swiper indicator-dots autoplay circular><swiper-item wx:for="{{swiperList}}" wx:key="goods_id"><navigator><image src="{{item.image_src}}" mode="widthFix" /></navigator></swiper-item></swiper></view><!-- 导航条 --><view class="index_cate"><navigator wx:for="{{catesList}}" wx-key="name"><image src="{{item.image_src}}" mode="widthFix" /></navigator></view><!-- 楼层信息 --><view class="index_floor"><view class="floor_group" wx:for="{{FloorList}}" wx:for-item="f" wx:for-index="i" wx-key="f.floor_title.name"><!-- 标题 --><view class="floor_title"><image src="{{f.floor_title.image_src}}" mode="widthFix" /></view><!-- 图片 --><view class="floor_list"><navigator wx:for="{{f.product_list}}" wx-key="item.name"><image src="{{item.image_src}}" mode="widthFix"></image></navigator></view></view></view>
</view>

样式wxss


.index_swiper swiper{width: 750rpx;height: 340rpx;
}
.index_swiper swiper image{width: 100%;
}
/* 导航条 */
.index_cate{display: flex;
}
.index_cate navigator{flex: 1;padding: 25rpx;
}
.index_cate navigator image{width:100%;
}
/* 楼层 */
.index_floor .floor_group .floor_title {padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {width: 100%;
}
.index_floor .floor_group .floor_list {overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {float: left;width: 33.33%;/* 后四个超链接 *//* 2 3 两个超链接 */
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {/* 原图的宽高 232 *386 */height: 27.7vw;border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {width: 100%;height: 100%;
}

第一步:引入request（用于获取接口数据）

第二步:创建三个数组用于存放对应的数据

第三步:编写三个方法得到数据,并且赋值给数组,页面加载时调用…

//index.js
import {request} from '../../utils/request.js'
Page({data:{//轮播图数据swiperList:[],//导航信息catesList:[],//楼层信息FloorList:[]},onLoad(){this.getSwiperList();this.getCatesList();this.getFloorList();},//获取轮播图async getSwiperList(){//发送请求let ret= await request("home/swiperdata",null);// console.log(ret);this.setData({swiperList:ret.data.message})},//获取导航信息async getCatesList(){//发送请求let ret= await request("home/catitems",null);this.setData({catesList:ret.data.message})},//获取楼层信息async getFloorList(){//发送请求let ret= await request("home/floordata",null);this.setData({FloorList:ret.data.message})}
})

效果图

项目的搭建与首页的编写就完成了,需要图标资源的评论区可找我要

微信小程序商城项目实战(第一篇:项目搭建与首页)相关推荐

《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买
编辑推荐在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位,据相关统计,微信月活跃用户已达10亿之多,且占据着中国用户30%以上的应用时间, ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...
gitee提交代码_在Gitee获8.5k Star，做微信小程序商城看这一个开源项目就够了
商城系统是小程序中比较热门的类型,许多开发者在寻找商城类小程序项目时,都会遇到一些声称「开源」但是并不是完全开源,有时候还会收费的项目.今天 Gitee 介绍的这款微信小程序商城项目就是一款从前端到后 ...
在Gitee获8.5k Star，做微信小程序商城看这一个开源项目就够了
商城系统是小程序中比较热门的类型,许多开发者在寻找商城类小程序项目时,都会遇到一些声称「开源」但是并不是完全开源,有时候还会收费的项目.今天 Gitee 介绍的这款微信小程序商城项目就是一款从前端到后 ...
ebs开发入门 oracle 知乎_微信小程序云开发入门第一篇---开发准备事项
在开始本文的正式内容之前,先允许我做一个简单的自我介绍,我是一名嵌入式软件开发人员,目前在一家音视频处理芯片公司做linux系统下音视频开发的相关工作,算是嵌入式软件开发行业的老人了,如果您对嵌入式行 ...
微信小程序云开发入门第一篇---开发准备事项
在开始本文的正式内容之前,先允许我做一个简单的自我介绍,我是一名嵌入式软件开发人员,目前在一家音视频处理芯片公司做linux系统下音视频开发的相关工作,算是嵌入式软件开发行业的老人了,如果您对嵌入式行 ...
微信小程序插件---表单验证篇
微信小程序插件---表单验证篇项目下载地址 WxValidate - 表单验证插件介绍该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电 ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
微信小程序商城怎么在线制作
今天珍奶bb给大家简单唠唠微信小程序商城怎么在线制作的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接 ...

微信小程序商城项目实战(第一篇:项目搭建与首页)

商城项目第一篇

项目搭建

项目结构

编写整个项目中需要用到的功能

request.js

全局样式

组件(搜索框)

首页

代码编写

效果图

微信小程序商城项目实战(第一篇:项目搭建与首页)相关推荐

最新文章

热门文章