初始uni-app+tabBar+首页
1. uni-app
uni-app 是使用 Vue.js 开发前端应用的框架。开发者编写一套代码，可以发布到ios、Android、H5、以及各种小程序、快应用等多个平台。
1.1 新建uni-app项目
- HBuilder X 创建 uni-app项目（可以用别的），版本 4.66
- 文件 --> 新建 --> 项目
- 画横线的可以个性化设置
1.2 目录结构
一个uni-app项目，默认包晗如下目录及文件：
|- pages 业务页面文件存放的目录
| |- index
| | |_ indxe.vue index页面
| |_ list
| |_ list页面
|- static 存放应用静态资源（如图片、视频等）的目录
|- main.js Vue初始化入口文件
|- App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
|- manifext.json 配置应用名称、appid、logo、版本等打包信息
|- pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面信息
1.3 把项目配置运行到微信开发者工具
- 填写 微信小程序 AppID
- 配置 微信开发者工具 的安装路径
- 在微信开发者者工具中，通过 设置-> 安全设置面板，开启 服务端口
- 点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开放工具
2. tabBar
在 pages创建 目录。
在pages.json 配置文件中新增 tabBar的配置节点
//例 "tabBar": { "selectedColor": "#C00000", //配置当前tabBar页的文本颜色 "list": [ { "pagePath": "pages/home/home", //页面路径 "text": "首页", // 页面文本 "iconPath": "/static/home.png", // 未选中的图片 "selectedIconPath": "/static/home-active.png" //选中的土建 } ] }修改导航条的样式效果，在 pages.json 中修改 globalStyle
"globalStyle": { "navigationBarTextStyle": "white", //标题文本颜色 "navigationBarTitleText": "人民商城", //标题文本 "navigationBarBackgroundColor": "#C00000", // 导航栏背景颜色 "backgroundColor": "#F8F8F8", //窗口的背景颜色 }
3.1 首页
3.1 配置网络请求
因平台限制，小程序项目中不支持 axios，原生的 wx.request() API buzhichi l拦截器等全局定制功能。所以在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络请求。官方文档
配置@escook/request-miniprogram （可以看官方文档）：
npm init -y
npm install @escook/request-miniprogram
在项目的 main.js 入口文件文件中，配置：
// 导入网络请求包
import { $http } from '@escook/request-miniprogram'
// 挂载到 uni 全局对象上
uni.$http = $http
// 设置 base URL
$http.baseUrl = '自己的URL'
// 请求拦截器
$http.beforeRequest = function(options) {
uni.showLoading({
title: '数据加载中...'
})
}
// 响应拦截器
$http.afterRequest = function() {
uni.hideLoading()//关闭拦截器
}
3.2 轮播图区域
请求轮播图数据
在data中定义轮播图数组
在 onLoad生命周期函数中调用获取轮播图数据的方法
在 methods 中定义获取轮播图数据方法
export default { data() { return { //这是轮播图的数据列表 swiperList: [] }; }, onLoad() { //调用方法， 获取轮播图的数据 this.getSwiperList() }, methods: { async getSwiperList() { const {data: res} = await uni.$http.get('URL路径') if (res.meta.status !== 200) return uni.$showMsg() this.swiperList = res.message } } }
渲染轮播图的 UI 结构
<!-- 轮播图的区域 --> <swiper :indicator-dots="true" <!-- 显示面板指示点（小圆点） --> :autoplay="true" <!-- 开启自动播放 --> :interval="3000" <!-- 自动播放间隔时间为 3000 毫秒（即 3 秒） --> :duration="1000" <!-- 滑动动画持续时间为 1000 毫秒（即 1 秒） --> :circular="true" <!-- 启用无缝循环轮播 --> > <!-- 使用 v-for 循环渲染每个轮播项 --> <swiper-item v-for="(item, i) in swiperList" :key="i"> <!-- 每个轮播项是一个导航链接，点击跳转到商品详情页 --> <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id" open-type="navigate" <!-- 默认跳转方式为普通导航 --> > <!-- 展示轮播图片 --> <image :src="item.image_src"></image> </navigator> </swiper-item> </swiper>配置小程序分包
- 在根目录中创建 分包的根目录 ，名为 subpkg (可以自己取名)
- 在 pages.json 中，和pages节点评级的位置声明 subPackages 节点，用来定义分包相关结构
"subPackages": [ { "root": "subpkg", "pages": [{ "path" : "goods_detail/goods_detail", "style" : {} }] } ]- 根据自己需求自己设置
3.3 分类导航区域
获取分类导航区域
在data中定义轮播图数组
在 onLoad生命周期函数中调用获取轮播图数据的方法
在 methods 中定义获取轮播图数据方法
export default { data() { return { //分类导航的数据列表 navList: [] }; }, onLoad() { this.getNavList() }, methods: { async getNavList() { const { data: res } = await uni.$http.get('路径') if (res.meta.status !== 200) return uni.$showMag() this.navList = res.message }, navClickHandler(item) { if (item.name === '分类') { uni.switchTab({ url: '/pages/cate/cate' }) } } }
渲染轮播图的 UI 结构
<!-- 分类导航区域 --> <view class="nav-list"> <!-- 使用 v-for 循环渲染每个分类导航项 --> <view class="nav-item" v-for="(item, i) in navList" :key="i"> <!-- 每个分类导航项包含一个图片，点击图片会触发点击事件处理函数 --> <image :src="item.image_src" class="nav-img" @click="navClickHandler(item)" > </image> </view> </view>
3.4 楼层区域
获取楼层区域
在data中定义轮播图数组
在 onLoad生命周期函数中调用获取轮播图数据的方法
在 methods 中定义获取轮播图数据方法
export default { data() { return { //楼层的数据 floorList: [] }; }, onLoad() { this.getFloorList() }, methods: { async getFloorList() { const {data: res} = await uni.$http.get('自己路径') if (res.meta.status !== 200) return uni.$showMag() //对数据进行处理 res.message.forEach(floor => { floor.product_list.forEach(prod => { //通过 split('?') 方法分割字符串，获取查询参数部分，并将其拼接到自定义的基础路径后 prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1] }) }) this.floorList = res.message } }
渲染轮播图的 UI 结构
<!-- 楼层区域 --> <view class="floor-list"> <!-- 每个楼层 item 项 --> <view class="floor-item" v-for="(item, i) in floorList" :key="i"> <!-- 楼层标题图片 --> <image :src="item.floor_title.image_src" class="floor-title"></image> <!-- 楼层的图片展示区域 --> <view class="floor-img-box"> <!-- 左侧大图盒子 --> <navigator class="left-img-box" :url="item.product_list[0].url" > <!-- 显示第一个商品的大图，并根据 image_width 设置宽度 --> <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix" ></image> </navigator> <!-- 右侧 4 张小图的盒子 --> <view class="right-img-box"> <!-- 循环渲染 product_list 中的商品（除第一个） --> <navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" :url="item2.url" > <!-- 只渲染 index 不为 0 的项（即跳过第一个商品） --> <image :src="item2.image_src" v-if="i2 !== 0" :style="{width: item2.image_width + 'rpx'}" mode="widthFix" ></image> </navigator> </view> </view> </view> </view>