01初始uni-app+tabBar+首页
初始uni-app+tabBar+首页
- 1. uni-app
- 1.1 新建uni-app项目
- 1.2 目录结构
- 1.3 把项目配置运行到微信开发者工具
- 2. tabBar
- 3.1 首页
- 3.1 配置网络请求
- 3.2 轮播图区域
- 3.3 分类导航区域
- 3.4 楼层区域
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 -ynpm 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>