项目效果
项目技术栈
vue2+uni-app
新建项目
填写自己的微信小程序的 AppID:
运行一下
配置.gitignore
忽略文件
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
在 unpackage 目录下创建一个叫做 .gitkeep
的文件进行占位
把本地项目上传到码云对应的空白仓库
创建 tabBar 页面
在 pages
目录中,创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面
static 文件夹
拷贝一份
去page.json中设置tabbar
删除默认的 index 首页
-
在 HBuilderX 中,把
pages
目录下的index首页文件夹
删除掉 -
同时,把
page.json
中记录的index 首页
路径删除掉 -
重新运行
修改导航条的样式效果
-
打开
pages.json
这个全局的配置文件
删掉单个页面的自定义标题
home页面
配置网络请求
由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request()
API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram
第三方包发起网络数据请求。
cnpm i @escook/request-miniprogram
main.js中
// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'
// 将按需导入的 $http 挂载到 wx 顶级对象之上,方便全局调用
wx.$http = $http
// 在 uni-app 项目中,可以把 $http 挂载到 uni 顶级对象之上,方便全局调用
uni.$http = $http
// 请求拦截器
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...',
})
}
// 响应拦截器
$http.afterRequest = function () {
uni.hideLoading()
}
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// $http.baseUrl = 'https://api-hmugo-web.itheima.net'
轮播图
请求轮播图的数据
渲染轮播图的 UI 结构
调整样式
indicator-color="yellow",表示未播放的图片的小圆圈的颜色
indicator-active-color="yellow",表示正在播放的图片的小圆圈的颜色
配置小程序分包
分包可以减少小程序首次启动时的加载时间
为此,我们在项目中,把 tabBar 相关的 4 个页面放到主包中,其它页面(例如:商品详情页、商品列表页)放到分包中。在 uni-app 项目中,配置分包的步骤如下:
在项目根目录中,创建分包的根目录,命名为 subpkg
在 pages.json
中,和 pages
节点平级的位置声明 subPackages
节点,用来定义分包相关的结构:
subpkg
目录上鼠标右键,点击 新建页面
选项,并填写页面的相关信息:
点击轮播图跳转到商品详情页面
将view改成navigator,并添加url属性
路径
'/subpkg/goods_detail/goods_detail?goods_id='
封装 uni.$showMsg() 方法
当数据请求失败之后,经常需要调用 uni.showToast({ /* 配置对象 */ })
方法来提示用户。此时,可以在全局封装一个 uni.$showMsg()
方法,来简化 uni.showToast()
方法的调用。具体的改造步骤如下:
在 main.js
中,为 uni
对象挂载自定义的 $showMsg()
方法:
分类导航区域
#3.3.1 获取分类导航的数据
实现思路:
-
定义 data 数据
-
在 onLoad 中调用获取数据的方法
-
在 methods 中定义获取数据的方法
渲染分类导航的 UI 结构
点击分类导航跳转到分类页面
wx.navigateTo()跳转到非tabbar页
uni.switchTab()跳转到tabbar页
楼层区域
#3.4.1 获取楼层数据
实现思路:
-
定义 data 数据
-
在 onLoad 中调用获取数据的方法
-
在 methods 中定义获取数据的方法
渲染楼层里的图片
定义楼层图片区域的 UI 结构:
<!-- 楼层区 -->
<view class="floor-list">
<view class="floor-item" v-for="(item, i) in floorList" :key="i">
<!-- 楼层标题 -->
<img :src="item.floor_title.image_src" class="floor-title" alt="">
<!-- 楼层图片 -->
<view class="floor-img-box">
<!-- 左侧大图 -->
<view class="left-img-box"></view>
<!-- 右侧四小图 -->
<view class="right-img-box"></view>
</view>
</view>
</view>
mode="widthFix" 固定宽,高自适应
右侧四个小图flex布局时,图片外要加一层view标签,否则无法换行
点击楼层图片跳转到商品列表页
在 subpkg
分包中,新建 goods_list
页面
'/subpkg/goods_list/goods_list?'
楼层数据请求成功之后,通过双层 forEach
循环,处理 URL 地址:
把图片外层的 view
组件,改造为 navigator
组件,并动态绑定 url 属性
的值: