一、创建 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: 'none'