一、配置小程序分包
分包可以减少小程序首次启动时的加载时间。为此,我们在项目中,把 tabBar 相关页面放到主包中,其它页面放到分包中。在 uni-app 项目中,配置分包的步骤如下:
1. 在项目根目录中,创建分包的根目录,命名为 subpkg
2. 在 pages.json 中,和 pages 节点平级的位置声明 subPackages 节点,用来定义分包相关的结构
{
"pages": [ // tabBar 相关页面
{
"path": "pages/home/home",
"style": {}
}... ...
],
"subPackages": [ // 分包相关页面
{
"root": "subpkg",
"pages": []
}
]
}
3. 在 subpkg 目录上右键,点击 新建页面 选项,并填写页面的相关信息
二、小程序中发起请求
1. 配置网络请求
由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。在项目的 main.js 入口文件中,通过如下的方式进行配置:
请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
官方文档: @escook/request-miniprogram - npm
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.xxxxxx.com'
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
2. 请求轮播图的数据
2.1 实现步骤
-
在 data 中定义轮播图的数组
-
在 onLoad 生命周期函数中调用获取轮播图数据的方法
-
在 methods 中定义获取轮播图数据的方法
2.2 示例代码
export default {
data() {
return {
swiperList: [],
}
},
onLoad() {
this.getSwiperList()
},
methods: {
async getSwiperList() {
const { data: res } = await uni.$http.get('/api/public/...')
if (res.meta.status !== 200) {
return uni.showToast({
title: '数据请求失败!',
duration: 1500,
icon: 'none',
})
}
this.swiperList = res.message
},
},
}
2.3 渲染 UI 结构
<template>
<view>
<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<!-- 循环渲染轮播图的 item 项 -->
<swiper-item v-for="(item, i) in swiperList" :key="i">
<view class="swiper-item">
<!-- 动态绑定图片的 src 属性 -->
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
3. 调用需要携带参数的接口get/post
async login() {
const data/param = {
phone:this.phone,
password:this.password,
};
const res = await uni.$http.get/post('/api/public/...', data/param)
if (res.code == '200') {
// 其他操作或调用其他方法
return uni.showToast({
title: '登录成功!',
duration: 1500,
icon: 'success',
})
} else {
return uni.showToast({
title: '登录失败,请重试!',
duration: 1500,
icon: 'none',
})
}
},
三、封装 uni.$showMsg() 方法
当数据请求失败或成功时,经常需要调用 uni.showToast({ }) 方法来提示用户。此时,可以在全局封装一个 uni.$showMsg() 方法,来简化 uni.showToast() 方法的调用。具体的改造步骤如下:
1. 在 main.js 中,为 uni 对象挂载自定义的 $showMsg() 方法
uni.$showErrorMsg = function (title = '失败!', duration = 1500) {
uni.showToast({
title,
duration,
icon: 'none'
})
}
uni.$showSuccMsg = function (title = '成功!', duration = 1500) {
uni.showToast({
title,
duration,
icon: 'success'
})
}
2. 在需要提示消息的时候,直接调用 uni.$showMsg() 方法
async login() {
const data = {
phone:this.phone,
password:this.password,
};
const res = await uni.$http.get('/admin/login', data)
if (res.data.code == '200') return uni.$showSuccMsg('登陆成功!')
if (res.data.data == '登陆失败') return uni.$showErrorMsg('登陆失败!')
},
三、小程序的跳转方式
navigateTo:保留当前页,跳转到另一个页面,有返回按键
redirectTo:关闭当前页,重定向到其他页面,没有返回按键
switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
navigateBack:返回一级或多级
uni.switchTab({ // 底部tabbar页面跳转
url: '/pages/home/home'
})
uni.navigateTo({ // 其他页面跳转
url: `/subpkg/mingxi/mingxi`
})
getItem() {
money = this.money
time = this.time
uni.navigateTo({ // 携带参数跳转
url: `/subpkg/mingxi/mingxi?money=${money}&time=${time}`
})
}