2.配置页面 - 首页
(1).创建 home 分支
运行如下的命令，基于master分支在本地创建home子分支，用来开发和home相关首页相关的功能：
git checkout -b home
(2).配置网络请求
由于平台的限制，小程序项目中不支持 axios，而且原生的wx.reauest() API功能比价简单，不支持拦截器等全局定制的功能。因此，建议在uni-app项目中使用 @escoke/request-miniprogram 等第三方包发起网络请求数据。
官方文档:https://www.npmjs.com/package/@escook/request-miniprogram
- 安装包
1.打开终端并初始化npm
npm init -y
2.安装
npm install @escook/request-miniprogram
3.导入文件
uni是顶级对象，不是作者规定的而是 uni-app规定的
// 按需导入 $http 对象 import { $http } from '@escook/request-miniprogram' // 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用 wx.$http = $http // 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用 uni.$http = $http
main.js Vue的入口文件
// #ifndef VUE3 import Vue from 'vue' import App from './App' // 1.导入网络请求的包 ⭐ import { $http } from '@escook/request-miniprogram' // 2.在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用⭐⭐ uni.$http = $http // 3.请求开始之前做一些事情 (请求拦截器)⭐⭐⭐ $http.beforeRequest = function(options) { // do somethimg... uni.showLoading({ title: '数据加载中...' }) } // 4.请求完成之后做一些事情 (响应拦截器)⭐⭐⭐⭐ $http.afterRequest = function () { // do something... uni.hideLoading() } Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' import App from './App.vue' export function createApp() { const app = createSSRApp(App) return { app } } // #endif
(3).请求轮播图的数据
- 实现步骤
- 在data中定义轮播图的数组。
- 在onload生命周期函数中调用获取轮播图数据的方法。
- 在methods中定义获取轮播图数据的方法。
- 绑定跟URL
主要是为了防止域名混乱的情况-域名地狱
main.js
// ⭐ 设置根路径目的是为了防止 网址混乱 $http.baseUrl = 'https://api-hmugo-web.itheima.net'
// #ifndef VUE3 import Vue from 'vue' import App from './App' // 1.导入网络请求的包 ⭐ import { $http } from '@escook/request-miniprogram' // 2.在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用 ⭐⭐ uni.$http = $http // ⭐⭐⭐ 设置根路径目的是为了防止 网址混乱 $http.baseUrl = 'https://api-hmugo-web.itheima.net' // 3.请求开始之前做一些事情 (请求拦截器) ⭐⭐⭐⭐ $http.beforeRequest = function(options) { // do somethimg... uni.showLoading({ title: '数据加载中...' }) } // 4.请求完成之后做一些事情 (响应拦截器)⭐⭐⭐⭐⭐ $http.afterRequest = function() { // do something... uni.hideLoading() } Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' import App from './App.vue' export function createApp() { const app = createSSRApp(App) return { app } } // #endif
- 实现网络请求
home.vue
export default { data() { return { // 轮播图的数据节点 swiperList: [] }; }, // ⭐ 挂载事件 onLoad() { this.getSwiperList() }, methods: { // ⭐⭐ 请求网络数据 async getSwiperList() { // 通过花括号结构对象，以key:value的形式赋值。引用数据类型赋值穿的是对象的内存地址，该变量可以指向目标对象 {data :res} 将 响应结果的data赋值给res const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata') console.log(res) if (res.meta.status == 200) { // 假如说返回的状态码为 200 说明成功 // ⭐⭐⭐ 赋值数据 this.swiperList = res.message // 正常调用弹窗应该用的是wx 但是在uniapp看i面我们推荐使用 uni return uni.showToast({ title: '数据请求成功', duration: 1500, icon: 'success' }) } else { return uni.showToast({ title: '数据请求失败', duration: 1500, icon: 'error' }) } } } }
<template> <view> <h1>Home</h1> </view> </template> <script> export default { data() { return { // 轮播图的数据节点 swiperList: [] }; }, // ⭐ 挂载事件 onLoad() { this.getSwiperList() }, methods: { // ⭐⭐ 请求网络数据 async getSwiperList() { // 通过花括号结构对象，以key:value的形式赋值。引用数据类型赋值穿的是对象的内存地址，该变量可以指向目标对象 {data :res} 将 响应结果的data赋值给res const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata') console.log(res) if (res.meta.status == 200) { // 假如说返回的状态码为 200 说明成功 // ⭐⭐⭐ 赋值数据 this.swiperList = res.message // 正常调用弹窗应该用的是wx 但是在uniapp看i面我们推荐使用 uni return uni.showToast({ title: '数据请求成功', duration: 1500, icon: 'success' }) } else { return uni.showToast({ title: '数据请求失败', duration: 1500, icon: 'error' }) } } } } </script> <style lang="scss"> </style>
使用花括号赋值之前
使用花括号赋值之后
运行结果:
- 遍历轮播图的数据并渲染数据
home.vue
<template> <view> <!-- 轮播图的区域 快捷键 usw --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper-item v-for="(item,index) in swiperList" :key="index"> <!-- 利用Vue的语法操作, v-bind:src='xx' :src='xx' --> <image :src="item.image_src" mode="widthFix"></image> </swiper-item> </swiper> </view> </template> <style lang="scss"> swiper { height: 330rpx; // 这个意思就是在 swiper里面有一个类名叫做 swiper-item和一个image标签进行操作 .swiper-item, image { width: 100%; height: 100%; } } </style>
