1 Star 1 Fork 4

destiny001 / uni-hm-shop

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

黑马商城实战项目

项目搭建
  • 利用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: "\e60d";
    	}
    </style>
  • 完成菜单导航基本结构

    <view class="nav">
    			<view class="item">
    				<view class="iconfont icon-ziyuan"></view>
    				<text>商品列表</text>
    			</view>
    			<view class="item">
    				<view class="iconfont icon-tupian"></view>
    				<text>图片分享</text>
    			</view>
    			<view class="item">
    				<view class="iconfont icon-guanyuwomen"></view>
    				<text>联系我们</text>
    			</view>
    			<view class="item">
    				<view class="iconfont icon-shipin"></view>
    				<text>视频专区</text>
    			</view>
    		</view>
  • 菜单导航样式

    .nav{
      display: flex;
      align-items: center;
      .item{
        width: 25%;
        text-align: center;
        view{
          background: $shop-color;
          line-height: 120rpx;
          width: 120rpx;
          height: 120rpx;
          border-radius: 90px;
          margin:10px auto;
        }
        text{
          font-size: 15px;
        }
      }
      .iconfont{
        font-size: 25px;
        color: #fff;
        height: 50px;
      }
      .icon-tupian{
        font-size: 20px;
      }
    }
实现推荐商品列表
定义基本结构
<view class="hot_goods">
  <view class="tit">推荐商品</view>
  <!-- 一般用法 -->
  <view class="goods_list">
    <view class="goods_item">
      <image></image>
      <view class="price">
        <text>1299</text>
        <text>12990</text>
      </view>
      <view class="name">华为(HUAWEI)荣耀6Plus 16G双4G版</view>
    </view>
  </view>
</view>
美化样式
.hot_goods {
  background: #eee;
  .tit{
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    margin-top: 20px;
    margin-bottom: 3px;
    color: $shop-color;
    height: 50px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 20px;
    background: #fff;
  }
  .goods_list {
    display: flex;
    padding: 0 15rpx;
    justify-content: space-between;
    overflow: hidden;
    flex-wrap: wrap;
    .goods_item {
      width: 355rpx;
      margin-bottom: 15rpx;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      image{
        height: 150px;
        width: auto;
        mix-width:160px;
        margin: 10px auto;
      }
      .price{
        font-size: 18px;
        color: red;
        padding: 8px 0;
        text:nth-child(2){
          color: #ccc;
          text-decoration: line-through;
          margin-left: 10px;
          font-size: 13px;
        }
      }
      .name {
        font-size: 14px;

      }
    }
  }
}
获取数据
  • 定义获取数据的方法

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

暂无描述 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/destiny001/uni-hm-shop.git
git@gitee.com:destiny001/uni-hm-shop.git
destiny001
uni-hm-shop
uni-hm-shop
master

搜索帮助