小程序 | 黑马商城【未更完--实习去了】

黑马优购：起步看这个--------->>>>>> https://www.escook.cn/docs-uni-shop/

起步

⭐uni-app 品优购 开发文档
https://www.escook.cn/docs-uni-shop/#tabbar-%E7%9B%B8%E5%85%B3%E7%9A%84%E9%A1%B5%E9%9D%A2

1. 了解 uni-app
   uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

   详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

2. 下载 HBuilderX
   uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。

   HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html

3. 安装 scss/sass 编译
   为了方便编写样式（例如：），建议安装 插件。插件下载地址： scss/sass 编译

   下载 scss/sass ： https://ext.dcloud.net.cn/plugin?name=compile-node-sass

4. 新建uni-app项目
   模板选择 uni-ui 项目

5. 了解目录结构
   

6. 把项目运行到微信开发者工具（具体看最最最最上面👆链接）

7. 使用 Git 管理项目

8. 把项目托管到码云（生成公钥）
   我的公钥存放位置：
   
   生成并配置公钥后可在powershell中运行 ssh -t git@gitee.com 监测公钥是否配置成功

   
   将本地项目上传到码云对应的空白仓库中（通过SSH）
   

tabBar

创建 tabBar 分支

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabbar

创建 tabBar 页面

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

在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：pages

1. 在 目录上鼠标右键，选择新建页面pages
   

2. 在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：
   

配置 tabBar 效果

1. 将 资料 目录下的 static 文件夹（用来存放静态资源） 拷贝一份，替换掉项目根目录中的 static 文件夹

2. 修改项目根目录中的pages.json 配置文件，新增 tabBar的配置节点如下：

   

删除默认的 index 首页

如果要展示 tabbar

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

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

修改导航条的样式效果

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

2. 修改globalStyle 节点如下：

// 与 tabBar 和 pages 平齐
  "globalStyle": {
   
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "来买鲜花吧",
    "navigationBarBackgroundColor": "#ffc0cb",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
   
      "background": "#efeff4"
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

• 头部导航栏标题不显示的原因

其中navigationBarTitleText默认为空，所以此时在globalStyle中的全局配置会被覆盖，即navigationBarTitleText不会生效
我们只需要删除掉就好

分支的提交与合并

先把tabbar 推送到远程仓库，然后把tabbar 和 master 合并，再把master 重新推送一遍

1. 将本地的 tabbar 分支进行本地的 commit 提交：
   git add .
git commit -m "完成了 tabBar 的开发"
2. 将本地的 tabbar 分支推送到远程仓库进行保存：
   git push -u origin tabbar
3. 将本地的 tabbar 分支合并到本地的 master 分支：
   git checkout master 切换到master分支
   git merge tabbar 合并分支
4. 重新推送 master 分支
   git push
5. 删除本地的 tabbar 分支：
   git branch -d tabbar

首页

1. 创建 home 分支

运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：

git checkout -b home 创建分支

2. 配置网络请求

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

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

⭐官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

1. 安装
   Shift+鼠标右键 打开终端

   npm init -y 初始化package.json 文件

   npm i @escook/request-miniprogram进行安装

2. 在 main.js 入口文件中进行导入

   // 按需导入 $http 对象
   import {
         $http } from '@escook/request-miniprogram'
   
   // 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
   wx.$http = $http
   
   // 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
   uni.$http = $http
   1
   2
   3
   4
   5
   6
   7
   8
   9

   

3. 使用
   

配置请求根路径，请求拦截器和响应拦截器

// main.js
	// 请求根路径
	$http.baseUrl = "https://www.uinav.com"
	// 请求拦截器
	$http.beforeRequest = function(options){
   
	  // 展示loading效果
	  uni.showLoading({
   
	    title:"数据加载中..."
	  })
	}
	// 响应拦截器
	$http.afterRequest = function(options){
   
	  // 隐藏loading效果
	  uni.hideLoading();
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

封装uni.$showMsg（） 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ })方法来提示用户。

此时，可以在全局封装一个 uni.$showMsg()方法，来简化 uni.showToast()方法的调用。

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

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
   
  uni.showToast({
   
    title,
    duration,
    icon: 'none',
  })
}
1
2
3
4
5
6
7
8
9
10

2. 今后，在需要提示消息的时候，直接调用 uni.$showMsg()方法即可：

async getSwiperList() {
   
   const {
    data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
   if (res.meta.status !== 200) return uni.$showMsg()
   this.swiperList = res.message
}
1
2
3
4
5
6
7

3. 轮播图区域

获取轮播图的数据

请求路径：https://www.uinav.com/api/public/v1/home/swiperdata
请求方法：GET
无参数

实现步骤：

1. 在 data 中定义轮播图的数组

2. 在 onLoad 生命周期函数中调用获取轮播图数据的方法

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

获取轮播图数据的方法：

    methods: {
   
      async getSwiperList() {
   
        // 发请求获取数据
        const {
   data} = await uni.$http.get('/api/public/v1/home/swiperdata') // {}解构赋值
        if(data.meta.status === 200){
   
          // 获取数据成功，开始赋值
          this.swiperList = data.message;
        }else{
   
          // 请求失败，展示提示消息 uni.showToast
          return uni.showToast({
   
            title:"轮播图数据请求失败",
            duration:1500, // 1.5s后隐藏
            icon:'none'
          })
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

请求回来的数据：

渲染轮播图

利用 v-for循环来遍历数据

    
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <view class="swiper-item">
          
          <image :src="item.image_src" mode="">image>
        view>
      swiper-item>
    swiper>
1
2
3
4
5
6
7
8
9

配置小程序分包

在小程序中，我们可以把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中

分包步骤：

1. 在项目根目录中，创建分包的根目录，命名为subpkg

2. 在 pages.json中，和pages 节点平级的位置声明 subPackages节点，用来定义分包相关的结构，然后点击保存！！再进行下一步骤
   

3. 在subpkg目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息
   

4. 创建完后会自动生成
   

点击轮播图跳转到商品详情页面

将 节点内的view 组件，改造为 navigatorurl导航组件，并动态绑定 url属性的值。

    
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <navigator 
1
2
3