(4).配置小程序分包
分包可以减少小程序首次启动时的加载时间
为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：
- 在项目根目录中，创建分包的根目录，命名为
subpkg
- 在
pages.json中，和pages节点平级的位置声明subPackages节点，用来定义分包相关的结构：
// 配置分包 ⭐ "subPackages": [{ "root": "subpkg", //指定分包的根路径在那 "pages": [ //配置在这个根路径下 有几个分包.. xxxx ] }],
3.在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：
(5).点击轮播图跳转到商品的详情页面
将节点内的view组件，改造为 navigator导航组件，并动态绑定 url属性的值。
1. 改造之前的UI界面
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>
2.改造之后的UI界面
<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' --> <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id"> <image :src="item.image_src" mode="widthFix"></image> </navigator> </swiper-item> </swiper> </view> </template>
运行之后的结果是:
(6).分装uni.$showMsg()方法
当数据请求失败之后，经常需要调用uni.showToast({配置对象})方法来提示用户。此时，可以在全局封装一个 uni.$showMsg()方法，来简化uni.showToast()方法的调用。具体的改造步骤如下:
1.在main.js中，为uni对象挂载自定义的 $showMsg()方法:
为uni挂载一个方法。调用的方式是 : uni.$showMsg
原有的方法是:
uni.showToast({ title: '数据请求失败', duration: 1500, icon: 'error' })
改造之后的方法
// 封装的展示消息提示的方法 uni.$showMsg = function (title = '数据加载失败！', duration = 1500) { uni.showToast({ title, duration, icon: 'none', }) }
(7).分类导航区域 💱
- 获取分类导航的区域
实现思路:
- 定义data数据。
- 在onLoad区域挂载调用获取的方法。
- 在methods区域获取数据的方法。
home.vue
// 分类导航区 async getNavList() { const { data: res } = await uni.$http.get('/api/public/v1/home/catitems') console.log('分类导航区->', res) if (res.meta.status == 200) { this.navList = res.message } else { uni.$showMsg() } }
<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' --> <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id"> <image :src="item.image_src" mode="widthFix"></image> </navigator> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { // 轮播图的数据节点 swiperList: [], // 分类导航栏的数据列表 navList: [] }; }, onLoad() { this.getSwiperList() this.getNavList() }, 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 } else { // 正常调用弹窗应该用的是wx 但是在uniapp看i面我们推荐使用 uni uni.$showMsg() } }, // 分类导航区 async getNavList() { const { data: res } = await uni.$http.get('/api/public/v1/home/catitems') console.log('分类导航区->', res) if (res.meta.status == 200) { this.navList = res.message } else { uni.$showMsg() } } } } </script> <style lang="scss"> swiper { height: 330rpx; // 这个意思就是在 swiper里面有一个类名叫做 swiper-item和一个image标签进行操作 .swiper-item, image { width: 100%; height: 100%; } } </style>
- 渲染分类的导航区域
home.vue
// 分类导航的样式 .nav-list { display: flex; // 分布在一行 justify-content: space-around; margin: 30rpx 0; .nav-img { width: 120rpx; height: 140rpx; } }
<!-- 分类的导航区域 --> <view class="nav-list"> <view v-for="(item,index) in navList" :key="index" class="nav-item"> <image :src="item.image_src" class="nav-img"></image> </view> </view>
(8).点击第一项跳转到分类页面
- 为
nav-item绑定点击事件处理函数
<view class="nav-list"> <view v-for="(item,index) in navList" :key="index" class="nav-item"> <!-- 编写点击事件 并->传递每行的item这个项 --> <image :src="item.image_src" class="nav-img" @click="navClickHandler(item)"></image> </view> </view>
2.定义事件处理函数
switchTab 这个函数是切换到 tabbar标签页的
// 分类点击图片事件 navClickHandler(item) { if (item.name === '分类') { uni.switchTab({ url: '/pages/cate/cate' }) } }
