小程序项目--电商优购
效果如图
搭建目录结构
搭建项目页面目录
引⼊字体图标
1.打开阿⾥巴巴字体图标⽹站
2.选择的图标
3.添加⾄项⽬
4.下载到本地
5.将样式⽂件由.css修改为.wxss
6.⼩程序中引⼊
首页效果
业务逻辑
1.使⽤tabbar实现底部导航功能
2.使⽤⾃定义组件的⽅式实现头部搜索框
3.加载轮播图数据
4.加载导航数据
5.加载楼层数据
接口
1.获取⾸⻚轮播图数据
https://api.zbztb.cn/api/public/v1/home/swiperdata
2.获取⾸⻚分类菜单数据
https://api.zbztb.cn/api/public/v1/home/catitems
3.获取⾸⻚楼层数据
https://api.zbztb.cn/api/public/v1/home/floordata
关键技术
1.⼩程序内置request API
2.es6的 promise
3. ⼩程序swiper 组件
4. ⾃定义组件实现搜索框
Tabbr
app.json文件设置
{
"pages":[
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/search/index",
"pages/user/index",
"pages/feedback/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#EB4450",
"navigationBarTitleText": "海淘优购",
"navigationBarTextStyle":"black"
},
//tabbar
"tabBar": {
"color": "#999",//默认颜色
"selectedColor":"#ff2d4a",//被选中颜色
"backgroundColor":"#FAFAFA",//背景颜色
"list": [{
"pagePath": "pages/index/index",//page路径
"text": "首页",
"iconPath": "./assets/tabbar/home.png",//图标
"selectedIconPath":