项目初始化

  1. 创建项目
  2. 安装依赖

  3. 导入uview各配置

    创建页面

  4. 首页 index

  5. 分类 category
  6. 购物车cart
  7. 我的 my
    1. pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    2.      {
    3.          "path": "pages/index/index",
    4.          "style": {
    5.              "navigationBarTitleText": "首页"
    6.          }
    7.      },
    8.      {
    9.          "path": "pages/category/category",
    10.          "style": {
    11.              "navigationBarTitleText": "分类"
    12.          }
    13.      },
    14.      {
    15.          "path": "pages/cart/cart",
    16.          "style": {
    17.              "navigationBarTitleText": "购物车"
    18.          }
    19.      },
    20.      {
    21.          "path": "pages/my/my",
    22.          "style": {
    23.              "navigationBarTitleText": "我的"
    24.          }
    25.      }
    26.  ],

    tabbar

    配置下方 tabbar 在uniapp中查找 

  1. "globalStyle": {
  2.         "navigationBarTextStyle": "white",
  3.         "navigationBarTitleText": "黑马优购",
  4.         "navigationBarBackgroundColor": "#eb4450",
  5.         "backgroundColor": "#F8F8F8"
  6.     },
  7. "tabBar": {
  8.         "color": "#7A7E83",
  9.         "selectedColor": "#eb4450",
  10.         "borderStyle": "black",
  11.         "backgroundColor": "#fff",
  12.         "list": [
  13.       {
  14.         "pagePath": "pages/index/index",
  15.         "iconPath": "static/icons/home.png",
  16.         "selectedIconPath": "static/icons/home-o.png",
  17.         "text": "首页"
  18.       },
  19.       {
  20.         "pagePath": "pages/category/category",
  21.         "iconPath": "static/icons/category.png",
  22.         "selectedIconPath": "static/icons/category-o.png",
  23.         "text": "分类"
  24.       }, 
  25.       {
  26.         "pagePath": "pages/cart/cart",
  27.         "iconPath": "static/icons/cart.png",
  28.         "selectedIconPath": "static/icons/cart-o.png",
  29.         "text": "购物车"
  30.       },
  31.       {
  32.         "pagePath": "pages/my/my",
  33.         "iconPath": "static/icons/my.png",
  34.         "selectedIconPath": "static/icons/my-o.png",
  35.         "text": "我的"
  36.       }
  37.     ]
  38.     }

拦截器

使用uview的拦截器 统一封装接口的基地址 方便后期统一修修改 发送清秀的时候 自动显示和关闭的加载效果 封装后不能使用uniapi的方式

  1. const install = (Vue, vm) => {
  2.     Vue.prototype.$u.http.setConfig({
  3.     // 基地址
  4.         baseUrl: 'https://api-hmugo-web.itheima.net/api/public/v1',
  5.         // 超时显示的文字
  6.     loadingText: '努力加载中~',
  7.     // 显示文字的事件 在xxx毫秒后
  8.         loadingTime: 800
  9.     });
  10. }
  12. export default {
  13.     install
  14. }
  1. // 此为main.js本身已有内容
  2. const app = new Vue({
  3.   ...App
  4. })
  6. // http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
  7. import httpInterceptor from '@/common/http.interceptor.js'
  8. // 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
  9. Vue.use(httpInterceptor, app)
  11. // 这里也是原有的
  12. app.$mount()
  1. async getSwiperList() {
  2.                 const result = await this.$u.get('/home/swiperdata')
  3.                 console.log(result);
  4.                 this.swiperList = result.message
  5.             }

首页

搜索栏

search组件 使用uview 组件库中的 顶部的搜索栏在多个页面都有，这里封装成一个组件

  1. <template>
  2. <view class="search">
  3.   <u-search 
  4.             placeholder="搜索"
  5.             shape="square"
  6.             :show-action="false"
  7.             input-align="center"
  8.             bg-color="#fff"
  9.             ></u-search>
  10.   </view>
  11. </template>
  13. <script>
  14.   export default {
  16.   }
  17. </script>
  19. <style>
  20.   .search{
  21.     padding: 10px;
  22.     background-color: #eb4450;
  23.   }
  24. </style>

轮播图

uniapi获取轮播图数据，uview轮播图组件来渲染

  1. <template>
  2.     <view>
  3.         <Search></Search>
  4.         <u-swiper :list="swiperList" name="image_src" height="340rpx"></u-swiper>
  5.     </view>
  6. </template>
  8. <script>
  9.     export default {
  10.         onLoad() {
  11.             this.getSwiperList()
  12.         },
  13.         data() {
  14.             return {
  15.                 swiperList: []
  16.             }
  17.         },
  18.         methods: {
  19.             async getSwiperList() {
  20.                 const [err,result] = await uni.request({
  21.                     url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
  22.                 })
  23.                 console.log(result);
  24.                 this.swiperList = result.data.message
  25.             }
  26.         },
  27.     }
  28. </script>
  30. <style>
  32. </style>

导航栏

当父盒子添加了flex布局后 子项 默认宽高 由内容撑开 高度变成父项的高度
这里使用了内置样式 u-flex、u-flex-1、u-p-15
详见：https://v1.uviewui.com/components/common.html

  1. <view class="u-flex">
  2.             <navigator
  3.               v-for="item in catitems"
  4.                 :key="item.name" class="u-flex-1  u-p-15">
  5.                 <u-image  
  6.                     mode="widthFix" 
  7.                     :src="item.image_src">
  8.                 </u-image>
  9.             </navigator>
  10.         </view>
  12. onLoad() {
  13.             // 获取导航栏数据
  14.             this.getCatitems()
  15.         },
  16.         data() {
  17.             return {
  18.                 // 导航栏数据
  19.                 catitems:[]
  21.             }
  22.         },
  23.         methods: {
  24.             // 获取导航栏数据
  25.             async getCatitems() {
  26.                 const result = await this.$u.get('/home/catitems')
  27.                 // console.log(result);
  28.                 this.catitems = result.message
  29.             }
  30.         },

楼层

数据分析，

  1. <template>
  2. <view>
  3.   <!-- 楼层 -->
  4.   <view v-for="item in floordata" :key="item.floor_title.name">
  5.     <!-- 标题 -->
  6.     <u-image
  7.              :src="item.floor_title.image_src"
  8.              mode="widthFix"
  9.              >
  10.   </u-image>
  11.     <!-- 内容 -->
  12.     <view class="floor-content">
  13.       <navigator
  14.                  v-for="product in item.product_list"
  15.                  :key="product.name"
  16.                  :url="product.navigator_url"
  17.                  >
  18.         <u-image
  19.                  :src="product.image_src"
  20.                  width="100%"
  21.                  height="100%"
  22.                  mode="scaleToFill"
  23.                  ></u-image>
  24.   </navigator>
  25.   </view>
  26.  </view>
  27. </template>
  29. <script>
  30.   export default {
  31.     onLoad () {
  32.       // 获取楼层数据
  33.       this.getFloordata()
  34.     },
  35.     data () {
  36.       return {
  37.         // 楼层数据
  38.         floordata: []
  39.       }
  40.     },
  41.     methods: {
  42.       // 获取楼层数据
  43.       async getFloordata () {
  44.         const result = await this.$u.get('/home/floordata')
  45.         // console.log(result);
  46.         this.floordata = result.message
  47.       }
  48.     },
  49.   }
  50. </script>
  52. <style scoped lang="scss">
  53.   .floor-content{
  54.     // 清除浮动
  55.     overflow: hidden;
  56.     navigator{
  57.       float: left;
  58.       margin: 0 10rpx 10rpx;
  59.       // 宽度三分之一 750rpx / 3 = 250rpx
  60.       width: 250rpx;
  61.     }
  62.     navigator:first-child{
  63.       width: 232rpx;
  64.       height: 386rpx;
  65.     }
  66.     navigator:nth-last-child(-n+4) {
  67.       width: 233rpx;
  68.       height: 188rpx;
  69.     }
  70.     navigator:nth-last-child(-n+2) {
  71.       margin-top: 5rpx;
  72.     }
  73.   }
  74. </style>