玩转uniapp_实战商城项目！

黑马商城实战项目

项目搭建

• 利用HBuilder X创建基本项目结构

• 运行项目

• 整理基本项目结构，并修改窗口外观

  "globalStyle": {
       
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马商城",
    "navigationBarBackgroundColor": "#1989fa",
    "backgroundColor": "#F8F8F8"
  }
  

配置tabbar

• 创建tabbar对应的四个页面和图标准备好

• 将页面路径配置到pages.json中的pages数组中

  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  		{
       
  			"path": "pages/index/index"
  		},
  		{
       
  			"path": "pages/member/member"
  		},
  		{
       
  			"path": "pages/cart/cart"
  		},
  		{
       
  			"path": "pages/search/search"
  		}
  	]
  

• 配置tabbar

  {
       
  	"tabBar": {
       
  		"list": [
  			{
       
  				"pagePath":"pages/index/index",
  				"text":"首页",
  				"iconPath":"static/icon/home.png",
  				"selectedIconPath":"static/icon/home-active.png"
  			},
  			{
       
  				"pagePath":"pages/member/member",
  				"text":"会员",
  				"iconPath":"static/icon/member.png",
  				"selectedIconPath":"static/icon/member-active.png"
  			},
  			{
       
  				"pagePath":"pages/cart/cart",
  				"text":"购物车",
  				"iconPath":"static/icon/cart.png",
  				"selectedIconPath":"static/icon/cart-active.png"
  			},
  			{
       
  				"pagePath":"pages/search/search",
  				"text":"搜索",
  				"iconPath":"static/icon/search.png",
  				"selectedIconPath":"static/icon/search-active.png"
  			}
  		]
  		
  	}
  }
  

获取轮播图数据

• 封装uni.request请求，并挂在到全局

  • 创建util》api.js

    // 封装get请求
    const baseUrl = "http://localhost:8082"
    export const myRequest = (options)=>{
           
    	return new Promise((resolve,reject)=>{
           
    		uni.request({
           
    			method: options.method,
    			data: options.data,
    			url: baseUrl+options.url,
    			success(res) {
           
    				if(res.data.status !== 0) {
           
    					return uni.showToast({
           
    						title: '获取数据失败'
    					})
    				}
    				resolve(res)
    			},
    			fail(err) {
           
    				uni.showToast({
           
    					title: '获取数据失败'
    				})
    				reject(err)
    			}
    		})
    	})
    }
    

  • 在main.js中导入并挂载到全局

    import {
            myRequest } from './util/api.js'
    Vue.prototype.$myRequest = myReques
    

• 获取轮播图的数据

  • 定义获取轮播图的方法

    methods: {
           
      async getSwipers () {
           
        const res = await this.$myRequest({
           
          method: 'GET',
          url: '/api/getlunbo'
        })
        this.swipers = res.data.message
      }
    }
    

  • 在onLoad中调用该方法

    this.getSwipers()
    

实现轮播图的结构和数据渲染

• 定义轮播图的基本结构

  <swiper class="swiper" indicator-dots :autoplay="true" :interval="2000" circular>
    <swiper-item v-for="item in swipers" :key="item.id">
      <image :src="item.img"></image>
    </swiper-item>
  </swiper>
  

• 样式，在工具中安装scss

  <style lang="scss">
  	.home{
       
  		swiper{
       
  			height: 380rpx;
  			image{
       
  				width: 750rpx;
  				height: 380rpx;
  			}
  		}
  	}
  </style>
  

实现菜单导航结构

引入字体图标初始化样式

<style>
	@font-face {
   font-family: "iconfont";
	  src: url('~@/static/fonts/iconfont.eot?t=1576335469449'); /* IE9 */
	  src: url('~@/static/fonts/iconfont.eot?t=1576335469449#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7EeBu6eIlFFajBY208XLlGHx/6/hiYfvx76d+2xFJLlUn75pp4tCoyQ8NgiJUJjuJfzNpSrpXIDoeDbs3GjyH7Lfv+zTy1mok+GyEhYAW8AKaPvz/6eeG1QvDUo6SQW8bE4KYTDSMRj1R/5x7/TP88Dmo7Jc/misYXOelwWYYEBjbGxrAQ7KEvQW8SwuJBO4nkCvRQ21q/PbB5hXQLdAvDU6gHmbRQnhhG598xlb1lEvsu70PvEBfFU/H/+hF1IkNYO+149nMRz+6v7/fwrv4JAqI6T5uXCbRMYWUIhnX8+tKT22ZUrvJ3PaCdCNryR+Sb2RfRPT+c9kbdF0s788siIRDWj6GXkWL/ySEsVkfsmyftoYKiIZsiQfJ+Y2ll7MgdgDiE/AMF+CumLWsCSpdFXpjsNkefoatW8WSY8xapRhreWm1a9vWvVEM6edaQdPapImTzTLLG4BwEBG/HJsK4bVEKkStJbxbUYy3othvO2ofJA7jBARcUZ4illDuEL29TB2C/3AGWj4WUfGYbG25LTICaEk1jWBR8KWC0bqQJ+EjJYmOnvisiHzqtifvZ08X7NYzBaJWAJBglDIRIi3Fd/C3cbZjqEKvkh9Qmx2SKCgMAhD15VHVkCQMCWOP72YnLB0euHUpROzJ/PEYiR6wxK8ShC+ZsryVibGlbIzorOjqRKnhwyOKTIlMRoPSLgMlYvInDIKdwsQ8K2YbO2PReRsyxzZvrK0dWxUYUrIE2sPj8+sHNw6tUVhj0AgslvelUfhDnNG4k0YwgedbyX/ovPRL8SnqwOt/atMII/RGGMacyXGJOaq+MtGYDFMOL1Hk8OSJdfqARNMZkPmnDVh5DP0bjDpx6XAB6RO0JkqM4F0fNSNZMKXB20QqI//n+swdzCvnv1/JszOzMEszPsskD8RZtrarNB14gGhubjWlduokVnWD9e9PyCQd1jtvPjStKTGs6VZFT/xjhhW0hpkG6PoC0wW8iGUrPK9prFY4AM+9GF8APhKfIvr5tct+IoAxU/eE3ILa4yrDxTgUfkrG0lPTtshU4pGtXT9UJqywWkDhzyi/5ka15D+WlPn1Gd+QYF7s0j3dXTuS0oStZLum6on86NOwIbPcydIP3+STiDFaYk1Z6WFLPt7b7M6EhMA+Gr+qtDilfia4mPFr0p8JZUS973QHulzYJxsPjJ6xdeW7Wd75WHHrZsGDXaUb1hacCuQVmrOkt1DjdgTxSeY3EcWDqCzRLxB9PmH2DNplYhzhCDbNLfzY7dKy1jb/dqNFfBTXbWg8vhWsH1JP9IN0VQmIcif4isHay1vtVDzNIiyxeirbpZ0JKEXg3QAAqN+8jFMLN9E6DZhQtJlAbJuS2ght6DqcwRNt1Potelicp8xbEqUHmz4IBCGfUIy6DtkwyZoIb+hmvQLzXAQoddNbM3ZZyWKFk+YAqEYwxGayJZKsMuiVnxH2ucBW+Uq94m4MkHstjrO5AWVxHkMqPq6J6JQsS3wnGxGeW7RsU0pklYi4rbbbeV3plZkC1h0iZGAIDEUGkFGxCopubpYdL3/DtG8XIBDSn4knxBWMbWjrpZODPRCU8YqWZfGlT6tRwjFOynMKqBz6iI5xizk/FulSES0JCkizrY2q6Tialrl64ppLD0VysKcNVLkKFGjae8S40w5K14OB+WS9lKjkR/YgsrZsRnZzAAA') format('woff2'),
	  url('~@/static/fonts/iconfont.woff?t=1576335469449') format('woff'),
	  url('~@/static/fonts/iconfont.ttf?t=1576335469449') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	  url('~@/static/fonts/iconfont.svg?t=1576335469449#iconfont') format('svg'); /* iOS 4.1- */
	}
	
	.iconfont {
   
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-shipin:before {
   
	  content: "\f0024";
	}
	
	.icon-tupian:before {
   
	  content: "\e650";
	}
	
	.icon-guanyuwomen:before {
   
	  content: "\e608";
	}
	
	.icon-ziyuan:before {
   
	  content