小程序项目——黑马优购

1. 起步

• 1）uni-app框架：本项目用的是uni-app框架进行开发的，因为uni-app框架是使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序、快应用等多个平台。
• 2）开发工具：用HBuilderX 来开发，因为uni-app项目都是用HbuildX来开发HBuilderX官网
• 3）sass编译：为了方便编写scss/sass样式，建议安装 scss/sass 编译插件下载地址；进入之后点击——使用 HBuilderX 导入插件，登入HBuilderX，进行下载
• 4）新建项目：
  • ① 文件 ==》 新建 ==》 项目
  • ② 填写项目的一些基本的信息
    
• 5）uni-app项目目录结构
  
• 6）项目运行到微信开发者工具
  • ① 填写自己的微信小程序的 AppID：manifest.json文件中 ==》 选择微信小程序配置 ==》 再填写微信小程序ID
  • ② 在 HBuilderX 中，配置“微信开发者工具”的安装路径：工具 ==》 设置 ==》 运行设置 ==》 再填写微信开发者工具的存放路径
  • ③ 开启微信开发者者工具的“服务端口”：设置 ==》 安全 ==》 服务端口开启
  • ④ Hbuildx中：运行 ==》 运行到小程序模拟器 ==》 微信开发者工具；
  • 作用：将当前项目运行到微信开发者工具中，是为了方便查看项目的效果，代码编辑还是在HBuilderX中
• 7）使用git管理项目

  • ① 项目根目录中创建.gitignore忽略文件：用来忽略一些不需要版本管理的文件
    

  • ② unpackage目录下创建.gitkeep文件进行占位：因为忽略掉了unpackage里的唯一一个文件dist，unpackage也不会被git追踪，所以

  • ③ 初始化本地仓库：git init / git add . / git commit -m '初始化项目'

  • ④ 创建远程仓库，把本地仓库和远程仓库进行关联

2. tabBar页面

• 1）创建tabBar分支：git checkout -b tabBar
• 2）创建tabBar页面：
  • ① 在pages右键新建页面 ⇒ 依次创建home、cate、cart、my页面
  • ② 新建每个页面时有如下配置：css样式用的是scss
    
• 3）页面新建成功：pages.json文件中 ⇒ pages节点中生成每个tabBar页面的页面路径
• 4）配置tabBar效果：pages.json文件 ⇒ 配置tabBar节点。代码和在微信开发者工具中的配置是一样的

   "tabBar": {
   
       "selectedColor": "#C00000",  // 选中tab栏文本颜色
       "list": [
         {
   
           "pagePath": "pages/home/home",
           "text": "首页",
           "iconPath": "static/tab_icons/home.png",
           "selectedIconPath": "static/tab_icons/home-active.png"
         },
         {
   
           "pagePath": "pages/cate/cate",
           "text": "分类",
           "iconPath": "static/tab_icons/cate.png",
           "selectedIconPath": "static/tab_icons/cate-active.png"
         },
         {
   
           "pagePath": "pages/cart/cart",
           "text": "购物车",
           "iconPath": "static/tab_icons/cart.png",
           "selectedIconPath": "static/tab_icons/cart-active.png"
         },
         {
   
           "pagePath": "pages/my/my",
           "text": "我的",
           "iconPath": "static/tab_icons/my.png",
           "selectedIconPath": "static/tab_icons/my-active.png"
         }
       ]
     }

• 4）删除默认的index首页：HBuilderx（pages.json中路径代码和pages中的文件夹）和微信开发者工具中的index首页
• 5）修改导航条样式效果：pages.json文件 ⇒ globalStyle节点（和tabBar同级）

  "globalStyle": {
   
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }

• 6）分支的提交与合并
  • ① 进行本地commit提交：git add . / git commit -m "完成了 tabBar 的开发"
  • ② 提交到远程仓库进行保存：git push -u origin tabBar
  • ③ 将tabBar代码合并到主分支：git checkout master / git merge tabBar

3. 首页

• 首页的代码全部定义在：pages/home/home.vue中
• 结构定义在template标签中，逻辑定义在script标签中，样式定义在

3.1 创建home分支

• 首先创建home分支

git checkout home

3.2 配置网络请求

• 1）传统弊端：axios——小程序不能使用；wx.request()—— 功能太简单，不支持拦截器。
• 2） 因此：使用@escook/request-miniprogram第三方包，下载使用参考官方文档
• 3）main.js中进行配置

// 1. 按需导入$http
import {
    $http } from '@escook/request-miniprogram'
// 2. uni对象上挂载$http(以后就使用uni.$http)
uni.$http = $http
// 3. 配置本项目中的请求的根路径
$http.baseUrl = 'https://www.uinav.com'
// 4. 请求拦截器上加上loading效果
$http.beforeRequest = function (options) {
   
  uni.showLoading({
   
    title: '数据加载中...',
  })
}
// 5. 响应拦截器上隐藏loading效果
// 请求完成之后做一些事情
$http.afterRequest = function () {
   
  uni.hideLoading()
}

3.3 轮播图区域

3.3.1 获取轮播图的数据

• 1）data中：定义存放轮播图的数组
• 2）onLoad生命周期函数中：调用方法
• 3）methods中：定义获取数据的方法
  • ① 用uni.$http.get 来获取数据
  • ② 用async和await来获取数据，代表值是一个promise对象
  • ③ 判断状态码是否等于200，如果不是的话，调用uni.showToast提示他
  • ④ 为data中数据赋值

export default {
   
  data() {
   
    return {
   
      // 1. 轮播图的数据列表，默认为空数组
      swiperList