01初始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 把项目配置运行到微信开发者工具

1. 填写 微信小程序 AppID

2. 配置 微信开发者工具 的安装路径

3. 在微信开发者者工具中，通过 设置-> 安全设置面板，开启 服务端口

4. 点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开放工具

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>