小程序项目--电商优购day01

效果如图

搭建目录结构

搭建项目页面目录

引⼊字体图标

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": "./assets/tabbar/home-o.png"//选中图标
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "./assets/tabbar/category.png",
      "selectedIconPath": "./assets/tabbar/category-o.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "./assets/tabbar/cart.png",
      "selectedIconPath": "./assets/tabbar/cart-o.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "./assets/tabbar/my.png",
      "selectedIconPath": "./assets/tabbar/my-o.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss全局样式配置

@import "./styles/iconfont.wxss";//引入阿里巴巴字体图片样式文件
/* 微信小程序不支持通配符* */
page,view,text,swiper,swiper-item,image,navigator{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
/* 主题颜色通过变量来实现
1.less中存在变量这个知识
2.原生的css和wxss也是支持变量 */

page{
  /* 定义主题颜色 */
  --themeColor:#eb4450;
  /* 统一字体大小 假设设计稿字体大小是375px
  1px=2rpx
  14px=28rpx */
  font-size: 28rpx;
}
image{
  width: 100%;
}

实现头部搜索框(自定义组件)

1.component文件夹下面创建search-input文件夹
再创建组件文件

search-input.wxml代码

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

search-input.wxss代码

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

首页index.wxml引入组件

<!--index.wxml-->
<view class="pyg_index">
	<!-- 搜索框开始 -->
	<search-input></search-input>
	<!-- 搜索框结束 -->

实现轮播图swiper

1. 封装promise请求
在request文件夹下面单独存放封装的promise文件

   export const request=(options)=>{
   //定义公共的url   
     const baseURL='https://api-hmugo-web.itheima.net/api/public/v1'
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseURL + options.url,
            method: options.method || 'get',
            data: options.data || {},
            success: resolve,
            fail: reject
            })
     }

2.首页的JS文件中发起请求获取数据并保存到data中

//index.js
//获取应用实例
const app = getApp()
import {request} from '../../request/index'
Page({
  data: {
  //轮播图数组
  swiperList:[],
  },
  //事件处理函数
  onLoad: function (options) {
  this.getSwiperList()
  } ,  
  //发起异步请求
  方法一: getSwiperList(){
      request({
        url:'/home/swiperdata'
      }).then(result=>{
        this.setData({
         swiperList:result.data.message
        })
      })
    },
   方法二:使用async+await更加简洁
   async getSwiperList(){
    const{data:res} await request({url:'/home/swiperdata'})
    this.setData({
     swiperList:res.message
    })
  }
  })   

3.保存轮播图数据后,进行页面的渲染

//代码接在搜索框后面
<!-- 轮播图开始 -->
	<view class="index_swiper">
		<!-- swiper标签默认的宽度和高度是100%*150px
  image标签默认宽高是320*240px -->
		<swiper
		 autoplay //这个属性是自动播放
		 indicator-dots //面板指示点
		 circular //衔接滑动
		>
			<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
				<navigator>
					<image mode="widthFix" src="{{item.image_src}}" />
				</navigator>
			</swiper-item>
		</swiper>
	</view>
	<!-- 轮播图结束 -->

轮播图尺寸设置index.less文件

.index_swiper{
    swiper{
        //轮播图原图的大小是750rpx*340rpx
        width: 750rpx;
        height: 340rpx;      
    }
}

实现nav导航栏

步骤跟轮播图一样
1.在js中先发起请求获取导航栏数据保存

Page({
  data: {
  //轮播图数组
  swiperList:[],
  //导航栏数组
  navList:[],
  },
  onLoad: function (options) {
  this.getNavList()
  },
    getNavList(){
      request({
        url:'/home/catitems'
      }).then(result=>{
        this.setData({
          navList:result.data.message
        })
      })
    },
    ---------------------------------------
    或使用async+await 
   async  getNavList(){
    const{data:res} await request({url:'/home/catitems'})
    this.setData({
     navList:res.message
    })
  }
   })

2.index.wxml文件接上轮播图

	<!-- 导航栏开始 -->
	<view class="index_nav">
		<navigator wx:for="{{navList}}" :key="name">
			<image mode="widthFix" src="{{item.image_src}}" />
		</navigator>
	</view>
	<!-- 导航栏结束 -->

3.index.less样式

.index_nav{
    display: flex;
    navigator{
        padding:20rpx;
        flex:1;
    }
}

实现楼层区floor

步骤同轮播图,导航栏一样,结构样式有点不同而已
1,js中获取楼层区数据保存data中

Page({
  data: {
  //轮播图数组
  swiperList:[],
  //导航栏数组
  navList:[],
  //保存楼层数组数据
  floorList:[]
  },
  //事件处理函数
  onLoad: function (options) {
  this.getFloorList()
  },
   getFloorList(){
      request({
        url:'/home/floordata'
      }).then(result=>{
        this.setData({
          floorList:result.data.message
        })
      })
    }
     ---------------------------------------
    或使用async+await 
   async getFloorList(){
    const{data:res} await request({url:'/home/floordata'})
    this.setData({
      floorList:res.message
    })
  }
    })

2.index.wxml文件渲染floorList数据

	<!-- 楼层区域开始 -->
	<view class="index_floor">
		<view
		 class="floor_ground"
		 wx:for="{{floorList}}"
		 :key="floor_title"
		 wx:for-item="item1"
		 wx:for-index="index1"
		>
			<!-- 标题 -->
			<view class="floor_title">
				<image mode="widthFix" src="{{item1.floor_title.image_src}}" />
			</view>
			<!-- 内容 -->
			<view class="floor_list">
				<navigator
				 wx:for="{{item1.product_list}}"
				 :key="name"
				 wx:for-item="item2"
				 wx:for-index="index2"
				>
					<image mode="{{index2===0?'widthFix': 'scaleToFill'}}" src="{{item2.image_src}}" />
				</navigator>
			</view>
		</view>
	</view>
	<!-- 楼层区域结束 -->

3.index.wxss中写样式

.floor_list{
    navigator{
        float:left;
        width: 33.33%;

        // 后四个链接
        &:nth-last-child(-n+4){
        // 原图的宽高 232*386
        // 232/386=33.33vm/height
        height: 33.33vw*386 / 232 /2;
        border-left: 10rpx solid #fff;
        }
        image{
            width: 100%;
            height: 100%;
        }
    }
}