vue2+uni-app

 运行一下

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面

在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉

同时，把 page.json 中记录的 index 首页 路径删除掉

打开 pages.json 这个全局的配置文件

 删掉单个页面的自定义标题

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

main.js中

请求轮播图的数据 

调整样式

 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.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

实现思路：

定义 data 数据

在 onLoad 中调用获取数据的方法

在 methods 中定义获取数据的方法

渲染分类导航的 UI 结构

点击分类导航跳转到分类页面

wx.navigateTo（）跳转到非tabbar页

uni.switchTab（）跳转到tabbar页

实现思路：

定义 data 数据

在 onLoad 中调用获取数据的方法

在 methods 中定义获取数据的方法

定义楼层图片区域的 UI 结构：

mode="widthFix" 固定宽，高自适应

右侧四个小图flex布局时，图片外要加一层view标签，否则无法换行

在 subpkg 分包中，新建 goods_list 页面

'/subpkg/goods_list/goods_list?'

 楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：

把图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性 的值：