前后端分离项目—小程序首页的创建及常用工具类的配置(三)

6.使用weui组件库和iconfont

WeUI组件库简介 | wechat-miniprogram / weui

6.1引入weui组件

  "useExtendedLib": {
    "weui": true
  },

在app.json页面中有引入weui组件库

6.2引入iconfont矢量图标

6.2.1 添加代码

在pages同级目录下创建文件并添加从阿里巴巴矢量图标库生成的代码

@font-face {
  font-family: "iconfont"; /* Project id 3771021 */
  src: url('//at.alicdn.com/t/c/font_3771021_derfqxiw88.woff2?t=1668477747883') format('woff2'),
       url('//at.alicdn.com/t/c/font_3771021_derfqxiw88.woff?t=1668477747883') format('woff'),
       url('//at.alicdn.com/t/c/font_3771021_derfqxiw88.ttf?t=1668477747883') format('truetype');
}


.iconfont {
  font-family: "iconfont" !important;
  font-size: 40px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ziyuan:before {
  content: "\e6a6";
  color: #6b8770;
}

获取代码步骤：

点击即可跳转至代码生成页面，将其复制进iconfont.wxss文件中

6.2.2 全局引入iconfont样式

@import "./styles/iconfont.wxss"

7.封装请求工具类

7.1创建requestUtils.js

封装请求类，以达到解耦的目的。

// 定义请求根路径baseUrl
const baseUrl="http://localhost:8080";
/**
* 返回请求根路径baseUrl
*/
export const getBaseUrl=()=>{
return baseUrl;
}


/**
* 后端请求工具类
*/
export const requestUtil=(params)=>{
  return new Promise((resolve,reject)=>{
  wx.request({
  ...params,
  url:baseUrl+params.url,
  success:(result)=>{
  resolve(result.data)
  },
  fail:(err)=>{
  reject(err)
  }
  })
  });
  }

最后在需要的界面进行工具类的引入即可

// 导入request请求工具类
import {getBaseUrl,requestUtil} from '../../utils/requestUtil.js';

7.3后端统一返回类

前后段达成协议，使用统一的数据返回格式

package com.customer.common;
/**
*
*@author Minster
*date:2022-11-14
*/
import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Result {
    /**
    *代表成功
    *
    */
    private boolean success;
    /**
    *代表编码
    *
    */
    private int code;
    /**
    *
    *代表返回的信息
    */
    private String msg;
    /**
    *
    *代表返回的数据
    */
    private Object data;

    /**
    *
    *成功的方法
    */
    public static  Result success(Object data){
        return new Result(true,200,"success",data);
    }
    /**
    *
    *失败的方法
    */
    public static  Result fail(int code,String msg){
        return new Result(false,code,msg,null);
    }
}

8.搜索框

8.1引入搜索框组件

  "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  }

在首页的json文件中添加

8.2使用mp-searchbar

<!-- 搜索框 -->
  <mp-searchbar > </mp-searchbar>

首页搭建完成后再添加逻辑

9.轮播图

9.1wxml代码

  <!-- 轮播图 -->
  <swiper autoplay indicator-dots circular>
  <swiper-item
  wx:for="{{swiperList}}"
  wx:for-item="swiper"
  wx:key="id"
  >
    <image class="swiperImg" mode="widthFix" src="{{swiper.slideshowImg}}"></image>
  </swiper-item>
  </swiper>

9.2wxss代码

swiper{
  width: 750rpx;
  height: 375rpx;
}
.swiperImg{
  width: 100%;
}

9.3js代码

 data: {
    swiperList:[]
  },
  async getSwiper(){
    const res = await requestUtil({
      url:'/slideshow/findSwiper',
      method:'GET'
    });
    this.setData({
      swiperList:res.data
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    this.getSwiper()
  },

9.4后端controller代码

@RestController
@RequestMapping("/slideshow")
public class SlideshowController {

    @Autowired
    private ISlideshowService slideshowService;

    @GetMapping("/findSwiper")
    public Result findSwiper(){
        List<Slideshow> slideshow = slideshowService.list(new QueryWrapper<Slideshow>().eq("slideshow_status",1));
        return Result.success(slideshow);
    }
}

9.5完成界面

10.物品添加图标

10.1 wxml代码

  <!-- 添加物品图标 -->
  <view class="addButton">
    <navigator class="iconfont icon-ziyuan" url="/pages/add/add">  
    </navigator>
  </view>

10.2 wxss代码

.icon-ziyuan{
  position: fixed;
  right: 50rpx; 
  bottom: 50rpx;

}

10.3完成界面