微信小程序小项目前端实战内容

1、接口

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

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

 2、搭建项目

1、⽬录结构

2、项⽬⻚⾯

3、字体与图标

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

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

1、头部搜索框

.wxml

   搜索 

.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

.wxss

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