day05-电商环境搭建&首页制作&分类制作&vant使用

搭建项目环境

初始化wepy环境

​ 使用命令npm i wepy-cli -g 安装脚手架

wepy init standard hmyg
输入项目名称
输入appID

进入到项目根目录 输入 npm install 来下载相应的依赖包

进入到项目根目录 输入 wepy build --watch 来实时编译小程序代码

搭建项目结构

在配置项去除格式化自动不全 分号

配置小程序底部的tab栏

在page 目录中 创建5个tab页面

给5个 wpy 文件分别定义三个标签 <template></template>、<script></script>、<style lang="less"></style>

在<script></script>标签中对外创建class类，继承 wepy.page

import wepy from 'wepy'
export default class Cart extends wepy.page {
    
}

配置 tab栏 效果

• 在 app.wpy 文件的 config节点中，配置 tabBar，配置每一个页面的路径，图片，文字等

tabBar: {
   
      list: [{
   
        // 页面路径
        pagePath: 'pages/tabs/home',
        // 显示的文本
        text: '首页',
        // 默认图标路径
        iconPath: '/assets/icon/home.png',
        // 选中后图标路径
        selectedIconPath: '/assets/icon/home-active.png'
      },
      {
   
        pagePath: 'pages/tabs/cates',
        text: '分类',
        iconPath: '/assets/icon/cates.png',
        selectedIconPath: '/assets/icon/cates-active.png'
      },
      {
   
        pagePath: 'pages/tabs/search',
        text: '搜索',
        iconPath: '/assets/icon/search.png',
        selectedIconPath: '/assets/icon/search-active.png'
      },
      {
   
        pagePath: 'pages/tabs/cart',
        text: '购物车',
        iconPath: '/assets/icon/cart.png',
        selectedIconPath: '/assets/icon/cart-active.png'
      },
      {
   
        pagePath: 'pages/tabs/me',
        text: '我的',
        iconPath: '/assets/icon/my.png',
        selectedIconPath: '/assets/icon/my-active.png'
      }]
    }

配置导航栏头部的样式

在 app.wpy 文件的 config节点中，找到window

window: {
   
      // 三个小圆点样式
      backgroundTextStyle: 'dark',
      // 导航栏头部的背景颜色
      navigationBarBackgroundColor: '#d81e06',
      // 导航栏头部文字
      navigationBarTitleText: '黑马优购',
      // 导航栏头部文字颜色
      navigationBarTextStyle: 'white'
}

开启异步支持

在 app.wpy 文件的 config节点中，找到 constructor

constructor () {
   
    super()
    this.use('requestfix')
    // 通过这一行代码，就可以开启异步api，开启 promise功能，这样异步API调用结果，返回的就是Promise对象
    this.use('promisify')
}

配置全局的变量

由于每次我们去请求接口，前面的路径都是相同的，所以我们可以把访问跟路径做成全局的变量，配置方式如下

• 在 app.wpy 里面的 config 找到 globalData，配置全局变量

  globalData = {
       
      httpUrl: 'https://www.zhengzhicheng.cn/api/public/v1'
  }
  

• 在我们page中的wpy里面就可以通过 this.$parent.globalData 来获取

  this.$parent.globalData.httpUrl;
  

首页功能制作

轮播图功能

• 在home.wpy中，定义 data 数据，onLoad函数，自定义请求轮播图的函数
• 在onLoad函数中，调用 自定义请求轮播图的函数
• 在自定义请求轮播图函数中 利用 wepy.request() 来请求服务，请求的地址已经请求方式参考接口文档
• 得到服务器返回的数据，然后对数据进行校验，如果返回状态码是200，代表成功
• 把得到的数据赋值给 data数据中，然后刷新页面

export default class Home extends wepy.page {
   
          data = {
   
               // 轮播图数据
               swiperList: []
          }
          onLoad() {
   
               //当页面加载完毕调用方法请求首页的轮播图数据
               this.getSwiperData()
          }
          async getSwiperData() {
   
               // this.$parent.globalData 获取的是全局的变量，因为每次我们请求接口，前面的路径都是相同的，所以我们可以做成全局的变量
               const {
   
                    data: res
               } = await wepy.request({
   
                    url: this.$parent.globalData