1、接口

此处教学视频视频中已给出，无需要自己去学习

还有其他接口，就不一一展示了。

 2、搭建项目

1、⽬录结构

2、项⽬⻚⾯

3、字体与图标

在网站里面选择字体与图标，添加到项目，选择是否下载到本地，若下载至本地需要把样式文件由 css 修改为 wxss，最后在小程序中引入。

3、关键组件的学习与应用

1、头部搜索框

.wxml

<view class="search_input">
  <navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator>
</view>

.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;
}

2、轮播图

.js

Page({
    data: {
        swiperList: [],
        catesList: []
    },
    //options(Object)
    onLoad: function (options) {
        var reqTask = wx.request({
            url: https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata,
            header: {content-type:application/json},
            success: (result)=>{
                this.setData({
                    swiperList:result.data.message
                })
            }
        });
        var reqTask = wx.request({
            url: https://api-hmugo-web.itheima.net/api/public/v1/home/catitems,
            header: {content-type:application/json},
            success: (result)=>{
                this.setData({
                    catesList:result.data.message
                })
            }
        });
)}

.wxml

<view class="index_swiper">
        <swiper autoplay="{
         
  {true}}" indicator-dots="{
         
  {true}}" circular="{
         
  {true}}">
            <swiper-item wx:for="{
         
  {swiperList}}" wx:key="goods_id">
                <navigator>
                    <image src="{
         
  {item.image_src}}" mode="widthFix"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>

.wxss

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}