微信小程序（黑马优购项目）

项目效果

  

 

 

 

项目技术栈

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 首页

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

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

3. 

 重新运行

修改导航条的样式效果

1. 打开 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 获取分类导航的数据

实现思路：

1. 定义 data 数据

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

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

渲染分类导航的 UI 结构

 

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

wx.navigateTo（）跳转到非tabbar页

uni.switchTab（）跳转到tabbar页

楼层区域

#3.4.1 获取楼层数据

实现思路：

1. 定义 data 数据

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

3. 在 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 属性 的值：

 

 分类页面