uni-app商城项目(三)首页创建-创建 home 分支

一、创建 home 分支

运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：

git checkout -b home

1.1 配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支 持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram - npm 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用；

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram；

配置 package,json 文件

• 在项目根目录中打开 powershell 编译器，输入 npm init -y 创建 pacjage.json
• 然后输入以下命令安装 

  npm install @escook/request-miniprogram

• 最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

• 
  // 导入网络请求的包
  import { $http } from '@escook/request-miniprogram'
  uni.$http = $http
  
  // 请求拦截器
  // 请求开始之前做一些事情
  $http.beforeRequest = function (options) {
    // do somethimg...
    uni.showLoading({
      title: '数据加载中...'
    })
  }
  
  // 响应拦截器
  // 请求完成之后做一些事情
  $http.afterRequest = function () {
    // do something...
    uni.hideLoading()
  }

1.2 实现轮播图效果

1.2.1 请求轮播图的数据

实现步骤：

1. 在 data 中定义轮播图的数组

2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

3. 在 methods 中定义获取轮播图数据的方法

示例代码：

首先需要在 main.js 中定义一个根路径

$http.baseUrl = 'https://api-hmugo-web.itheima.net'

注：这是黑马程序中的商城地址，仅用来学习使用

在home.vue定义：

 export default {
    data() {
      return {
        // 这是轮播图的数据列表
        swiperList: []
      };
    },
    onLoad() {
      this.getSwiperList()
    },
    methods: {
      async getSwiperList() {
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        // console.log(data);
        // 请求失败
        if(res.meta.status !== 200) {
          return uni.showToast({
            title: "请求数据失败！",
            duration:1500,
            icon: '