文章目录RVZ拜客生活常识网

一、新建tabBar分支（选读*）RVZ拜客生活常识网

二、配置网络请求（挂载$http)RVZ拜客生活常识网

三、轮播图区域RVZ拜客生活常识网

四、注意事项RVZ拜客生活常识网

五、渲染轮播图UI结构RVZ拜客生活常识网

六、轮播图点击页面跳转RVZ拜客生活常识网

一、新建tabBar分支（选读*）

之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条
也可以跳过本节内容，不影响阅读观感RVZ拜客生活常识网

在根目录下，右键打开bash
基于 master 分支在本地创建 home 子分支，用来开发和 home 相关的功能：RVZ拜客生活常识网

git checkout -b home
1

查看分支（前面有*代表着当前分支）RVZ拜客生活常识网

git branch
1

RVZ拜客生活常识网

二、配置网络请求（挂载$http)

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

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档：https://www.npmjs.com/package/@escook/request-miniprogramRVZ拜客生活常识网

RVZ拜客生活常识网

按照官方流程，我们首先安装对应包，使用命令行工具cmd进入到项目根目录下 进行初始化一个package.json文件RVZ拜客生活常识网

npm init -y
1

RVZ拜客生活常识网

复制官网的导入命令输入RVZ拜客生活常识网

npm install @escook/request-miniprogram
1

RVZ拜客生活常识网

在入口文件进行相关配置main.js
导入对应包并进行挂载，以及定义 响应拦截器和请求响应器
(在uni-app开发中，尽量都是以uni作为顶级对象）RVZ拜客生活常识网

//导入网络请求包
import {
  $http
} from '@escook/request-miniprogram'
//挂载
uni.$http = $http
//设置请求地址的域名
$http.baseUrl = 'https://www.uinav.com'
// 请求拦截器
$http.beforeRequest =  function() {
  uni.showLoading({
    title: '数据加载中...',
  });
}
// 响应拦截器
$http.afterRequest = function(){
  uni.hideLoading()
}

12345678910111213141516171819

三、轮播图区域

请求轮播图的数据
实现步骤：RVZ拜客生活常识网

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

相关阅读: