基于VUE使用Hbuilder工具开发的甜品网站

上文已经提到了VUE实现的思维导图，感兴趣的同学可以自己去了解一下VUE，学过JS都会很快上手。本文是开发的甜品网站，适配所有手机的H5网页，你说它是APP、小程序好像都没错。

实现代码界面如下：

实现的主要代码如下：

<template>
	 <view>
		 <!--  兼容 app 状态栏显示 -->
		 		<page-status></page-status>
	    <!--  自定义顶部导航栏 -->
	    <page-header></page-header>
		 <!-- 轮播 -->
		    <view class="swiper">
		      <view class="swiper-box">
		        <swiper circular="true" autoplay="true" @change="swiperChange">
		          <swiper-item v-for="item in topSwiper" :key="item.id">
		            <image :src="item.url" mode="aspectFill"></image>
		          </swiper-item>
		        </swiper>
		        <view class="indicator">
		          <view
		            :class="{ on: currentSwiper >= index }"
		            class="dots"
		            v-for="(swiper, index) in topSwiper"
		            :key="index"
		          ></view>
		        </view>
		      </view>
		</view>
		
		<!-- 分类列表 -->
		    <view class="category-list">
		      <view
		        @tap="handleCategory(item)"
		        class="category"
		        v-for="(item, index) in categoryList"
		        :key="index"
		      >
		        <view class="img"><image :src="item.img"></image></view>
		        <view class="text">{{ item.name }}</view>
		      </view>
		    </view>
			
			    <!-- 广告图banner -->
			    <view v-if="promotion.length > 0" class="banner">
			      <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/aeea20bb-086f-4b22-82e5-624f1ef489c9.png"></image>
			    </view>
			
			    <!-- 活动区 -->
			    <view class="promotion" v-if="promotion.length > 0">
			      <view class="text">优惠活动</view>
			      <view class="list">
			        <view
			          @tap="handlePromotion(item)"
			          class="column"
			          v-for="(item, index) in promotion"
			          :key="index"
			        >
			          <view class="top">
			            <view class="title">{{ item.title }}</view>
			          </view>
			          <view class="left">
			            <view class="ad">{{ item.ad }}</view>
			            <view class="into">点击进入</view>
			          </view>
			          <view class="right"><image :src="item.img"></image></view>
			        </view>
			      </view>
			    </view>
		</view>
</template>

<script>
import pageHeader from './pageHeader.vue';
export default {
	data() {
	    return {
	      topSwiper: [
			  {url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/a6ba856e-5791-4b3a-95e7-9420904cc451.jpg"},
			  {url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/e831e4a4-ef62-41f9-ac66-b57e8c57fded.jpg"},
			  {url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/ae40db4e-779b-40d9-89a8-942ad5c03ec8.jpg"},
		  ],
	      currentSwiper: 0,
		  categoryList: [
			  {
			   "id":1,
			   "name":"热门推荐",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/3f40ba9f-6a44-48c7-bc20-2191e52eac1d.jpg",
			   },
			  {
			   "id":2,
		       "name":"蛋糕",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/fc7cf8b2-5b05-4cb6-9568-ccd71ac2115e.png",
			   },
			   {
			   "id":3,
			   "name":"欧包",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/8dc6d69c-12bd-4c42-a2e9-32bafef5cef2.png",
			   },
			   {
			   "id":4,
			   "name":"吐司",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/24b085a9-6b49-45ab-aa9d-6626e0f4096e.png",
			   },
			   {
			   "id":5,
			   "name":"小食",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/8693232a-8348-4455-878b-54464cf05240.png",
			   },
			   {
			   "id":6,
			   "name":"饮品",
			   "img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/5b35862d-816e-4193-8300-337215393f31.png",
			   },
			   ],
			promotion:[
				{"title":"整点秒杀","ad":"整天秒杀专区","img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/b22a8374-1ff6-49f9-8143-421fa4954d84.png"},
				{"title":"限时抢购","ad":"每天23点上线","img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f868390b-008e-4263-84b1-15d0ab60ad8c/43bd9189-2405-4c9f-b1c7-6876e2c73896.png"},
			],
						  
	    };
	  },
   components: {
    pageHeader
    },
	onLoad() {
	  },
	methods:{
	    swiperChange(e) {
	      this.currentSwiper = e.detail.current;
	    },
		// 分类跳转    
			 handleCategory(category) {
		      // console.log(category.name);
		      uni.navigateTo({
		        url: '../goods/index?name='+category.name
		      })
		    },
		// 优惠活动
		    handlePromotion(promotion) {
		      uni.showToast({
		        title: promotion.title,
		        icon: 'none'
		      });
		    }
	}
	};
</script>

<style scoped lang="scss">
	.swiper {
	  width: 100%;
	  margin-top: 10upx;
	  display: flex;
	  justify-content: center;
	  .swiper-box {
	    width: 92%;
	    height: 30.7vw;
	    overflow: hidden;
	    border-radius: 15upx;
	    box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
	    //兼容ios，微信小程序
	    position: relative;
	    z-index: 1;
	    swiper {
	      width: 100%;
	      height: 30.7vw;
	      swiper-item {
	        image {
	          width: 100%;
	          height: 40vw;
	        }
	      }
	    }
	    .indicator {
	      position: absolute;
	      bottom: 20upx;
	      left: 20upx;
	      background-color: rgba(255, 255, 255, 0.4);
	      width: 150upx;
	      height: 5upx;
	      border-radius: 3upx;
	      overflow: hidden;
	      display: flex;
	      .dots {
	        width: 0upx;
	        background-color: rgba(255, 255, 255, 1);
	        transition: all 0.3s ease-out;
	        &.on {
	          width: (100%/3);
	        }
	      }
	    }
	  }
	}
	.category-list {
	  width: 92%;
	  margin: 0 4%;
	  padding: 0 0 30upx 0;
	  border-bottom: solid 2upx #f6f6f6;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	  .category {
	    width: 33%;
	    margin-top: 50upx;
	    display: flex;
	    flex-wrap: wrap;
	    .img {
	      width: 100%;
	      display: flex;
	      justify-content: center;
	      image {
	        width: 11vw;
	        height: 11vw;
	      }
	    }
	    .text {
	      margin-top: 16upx;
	      width: 100%;
	      display: flex;
	      justify-content: center;
	      font-size: 24upx;
	      color: #3c3c3c;
	    }
	  }
	}
	.banner {
	  width: 92%;
	  margin: 40upx 4%;
	  image {
	    width: 100%;
	    height: 36vw;
	    border-radius: 4upx;
	    box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
	  }
	}
	.promotion {
	  width: 92%;
	  margin: 10upx 4% 30upx 4%;
	  .text {
	    width: 100%;
	    height: 60upx;
	    font-size: 34upx;
	    font-weight: 600;
	    margin: 10upx;
	  }
	  .list {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    .column {
	      width: 43%;
	      padding: 15upx 3%;
	      background-color: #ebf9f9;
	      border-radius: 10upx;
	      overflow: hidden;
	      display: flex;
	      justify-content: space-between;
	      flex-wrap: wrap;
	      .top {
	        width: 100%;
	        height: 40upx;
	        display: flex;
	        align-items: center;
	        margin-bottom: 5upx;
	        .title {
	          font-size: 30upx;
	        }
	      }
	      .left {
	        width: 50%;
	        height: 18.86vw;
	        display: flex;
	        flex-wrap: wrap;
	        align-content: space-between;
	        .ad {
	          margin-top: 5upx;
	          width: 100%;
	          font-size: 22upx;
	          color: #acb0b0;
	        }
	        .into {
	          width: 100%;
	          font-size: 24upx;
	          color: #aaa;
	          margin-bottom: 5upx;
	        }
	      }
	      .right {
	        width: 18.86vw;
	        height: 18.86vw;
	        image {
	          width: 18.86vw;
	          height: 18.86vw;
	        }
	      }
	    }
	  }
	}
</style>

总结

本文使用了Hbuilder工具实现了移动开发的甜品网站，类似app和小程序，借助Hbuilder官网可以实现数据库访问及挂载网页，同时在相关网站可以将网络链接变成二维码，最终发布二维码即可。

如果各位对源代码感兴趣，可以到我的主页下载。