小程序首页轮播图

配置网络请求

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

参考：官方文档进行安装、配置、使用

先让项目支持 npm ，打开项目根目录使用命令行工具运行 npm init -y 命令会生成一个 package.json 文件

国内镜像 npm config set registry https://registry.npmmirror.com

然后就能运行，npm 命令 npm install @escook/request-miniprogram 来安装 @escook/request-miniprogram

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

// 导入 $http 对象，网络请求的包
import { $http } from '@escook/request-miniprogram'
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

// 请求拦截器
$http.beforeRequest = function (options) {
  uni.showLoading({
	title: "数据加载中..."
  })
}
// 请求完成之后拦截器
$http.afterRequest = function () {
  uni.hideLoading()
}

获取轮播图数据

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swipe-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: []
			};
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
			async getSwiperList() {
				let {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')
				if (res.meta.status !== 200) {
					return uni.showToast({
						title: '请求数据失败！',
						duration: 1500,
						icon: 'none'
					})
				}
				this.swiperList = res.message
			}
		}
	}
</script>

<style lang="scss">
swiper {
	height: 330rpx;
	
	.swipe-item, image {
		width: 100%;
		height: 100%;
	}
}
</style>

配置小程序分包，点击轮播图跳转到分包的详情页面

分包可以减少小程序首次启动时的加载时间。

在项目根目录中，创建分包根目录，命名为 subpkg

在 pages.json 中和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构（加上这个下面步骤才会出现选择App和小程序的分包）：

"subPackages": [
	{
		"root": "subpkg",
		"pages": [
		]
	}
],

在 subpkg 目录上鼠标右键，点击新建页面选项，并填写页面相关信息：

改造 swiper-item -> view 为 navigator 让其可点击

<swiper-item v-for="(item, i) in swiperList" :key="i">
	<navigator class="swipe-item" :url="'/subpkg/course_detail/course_detail?id=' + item.goods_id">
		<image :src="item.image_src"></image>
	</navigator>
</swiper-item>

封装 uni.$showMsg() 方法

当数据请求失败，需要经常调用 uni.$showToast() 方法来提示用户。此时，可以全局封装一个 uni.$showMsg() 方法，来简化 uni.$showToast() 方法的调用。

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法

// 封装 Msg
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
	uni.showToast({
		title,
		duration,
		icon: 'none',
	})
}

使用，直接调用 uni.$showMsg() 方法即可。