【系】微信小程序云开发实战坚果商城-前端之首页实现

第 2-2 课：前端之首页实现

目录

• 开篇
  • 【系】微信小程序云开发实战坚果商城-开篇
• 基础篇
  • 【系】微信小程序云开发实战坚果商城-弹性盒子
  • 【系】微信小程序云开发实战坚果商城-ES6 简单入门
  • 【系】微信小程序云开发实战坚果商城-官方案例先运行
• 前端篇
  • 【系】微信小程序云开发实战坚果商城-商城项目搭建
  • 【系】微信小程序云开发实战坚果商城-所有目录…

所在路径client/pages/index/index

1 轮播实现

index.js data 数据如下，目前我们是没有调后台的数据，默认给出默认值方便页面的展示

 data: {
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //自动轮播
    interval: 3000, // 自动切换时间间隔
    duration: 1000, // 滑动动画时长
    circular: true, //是否采用衔接滑动 
    banners: [{
        image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
        name: "精美花生",
        product_id: "5cf38858a87a1a18b65aefbe"
      },
      {
        image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
        name: "精美开心果",
        product_id: "5cf38858a87a1a18b65aefca"
      },
      {
        image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
        name: "精美杏仁",
        product_id: "5cf38858a87a1a18b65aefc2"
      }
    ]
  },

index.wxml

index.wxss

/* pages/index/index.wxss */
.container{
  width:750rpx;
  min-height: 100%;
  display:flex;
  flex-direction: column;
  background-color: #fff;
}
/* 轮播图 */
.swiper-container{
  height: 360rpx;
  width: 100%;
}
.swiper-item{
  width: 750rpx;
  height:100%;
  border-top-left-radius: cover;
}
.swiper-item image{
  width: 100%;
  height: 100%;
}

这时我们就完成我们的轮播了，运行效果图图下：

2 主题实现

主题所需图片存放在 pages/index/images 下面

index.js

data:{
   /**
   * 其他部分省略
   */
   themes: [
      { theme_icon: 'images/[email protected]', theme_name: '新品糖果', theme_type: 1 },
      { theme_icon: 'images/[email protected]', theme_name: '精品果干', theme_type: 2 },
      { theme_icon: 'images/[email protected]', theme_name: '美味坚果', theme_type: 3 },
      { theme_icon: 'images/[email protected]', theme_name: '优质推荐', theme_type: 4 },
    ],
}

index.wxml

  
  
  
    
     
        
          
        
        {{item.theme_name}}
     
         
  

index.wxss

/* 主题栏样式 */
.theme-container{
  width: 660rpx;
  height: 180rpx;
  display: inline-flex;
  background-color: #fff;
  justify-content: space-between;
}
.theme-box{
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center; 
}
.theme-icon{
  width: 90rpx;
  height: 90rpx;
}
.theme-icon image{
  width: 90rpx;
  height: 90rpx;
}
.theme-box text{
  height:28rpx;
  font-size:24rpx;
  color:rgba(83,82,83,1);
  margin-top: 8rpx;
}

此段代码运行效果如下：

3 最新上线

这部分包括标题栏和商品展示信息。会复用的东西我们写一个组件方便后面的扩展。

新建 components 文件夹在 miniprogram 下面存放所有的组件。

首先我们实现标题栏组件，右击 components 新建一个文件夹 title-bar ，并选择新建 component ，输入 index

以相同的方式创建一个商品信息相关得组件，组件名为 product-column ,如果还不了解组件的同学可以看下官方实例，组件跟我们的页面列表的 js 是有所不同的，在上句的链接官方的文档中有所介绍，接下来我们也会通过实际开发给大家进一步了解。

product-column 商品的相关得组件会有多个，但是我们的数据可能是一样的，这个时候我们就可以使用官方的Behavior (官方说明文档)，后面在时间引用的时候大家可以多注意下。

title-bar/index.js

 properties: {
    title: String
  }

titleBar/index.wxml

  
  {{title}}

titleBar/index.wxss

/* components/titleBar/index.wxss */
.container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 32rpx;
  margin-top: 35rpx;
}
.line{
  width:6rpx;
  height:32rpx;
  background:rgba(60,185,66,1);
  border-radius:6rpx;
}
.text{
  padding-left: 19rpx;
  line-height:30rpx;
  font-weight:400;
  font-size:32rpx;
  color:rgba(56,56,57,1);
}

商品信息相关的组件公用的数据部分

product-behavior.js

module.exports = Behavior({
  behaviors: [],
  properties: {
    product: { // 属性名
      type: Object,
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (product) {
      }
    }
  },
  methods: {

  }
})

product-column/index .js 并引入上面的 behavior

// components/product-column/index.js
let productBehavior = require('../behaviors/product-behavior.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  behaviors: [productBehavior],
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

product-column/index .wxml

 

  
  
    
      
    
  
  
    
    
    {{product.product_name}}
    
    
      
      
         市场价:
         ￥
         {{product.product_price}}
      
      
      
        
           优惠价:
           ￥
           {{product.product_sell_price}}
        
        
            立即购买
        
      
    
  

product-column/index .wxss

/* components/product-column/index.wxss */
/* 容器盒子 */
.container{
  display: inline-flex;
  width:683rpx;
  margin-left: 32rpx;
  border-bottom:2rpx solid rgba(220,220,220,1);
  background:#fff;
}
/* 展示商品左边布局 */
.product-left{
  margin: 34rpx 0 30rpx 0;
}
.product-img image{
  width:180rpx;
  height:180rpx;
  border-radius:10px;
}
/* 商品右边部分显示 */
.product-right{
  width: 100%;
  height:180rpx;
  margin:34rpx 0 0 30rpx;
  display: inline-flex;
  flex-flow: column;
  justify-content: space-between;
}
/* 商品名 */
.product-title{
  font-size:30rpx;
  font-weight:400;
  color:#161514;
}
/* 市场价样式 */
.market-price-container{
  margin-bottom: -10rpx;
}
.market-price-container text{
  height:23rpx;
  font-size:24rpx;
  font-weight:400;
  color:#9B9B9B;
 
}
/* 优惠价格 */
.discount-price-container{
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-end;
}
.discount-price-desc{
  height:23rpx;
  font-size:24rpx;
  font-weight:400;
  color:#424242;
}
.discount-price-symbol,.discount-price{
  font-size:30rpx;
  font-weight:400;
  color:#FF5251;
}
.go{
  width:156rpx;
  height:56rpx;
  line-height: 56rpx;
  background:rgba(255,79,80,1);
  border-radius:10rpx;
  color: #fff;
  font-size: 24rpx;
}

接下来在 index 中引入组件

index.json

{
  "usingComponents": {
    "title-bar-comp": "/components/title-bar/index",
    "product-cloumn-comp": "/components/product-column/index"
  }
}

usingComponents冒号前面的为当前页面需要使用的组件名称，后面的是组件的路径。引入之后我们直接就可以在页面上使用了。

index.js

 data: {
    products: [{
        _id: "5cf526aaa87a1a18b6624ae6",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
        product_name: "花生 300g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624ae8",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
        product_name: "夏威夷果 120g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624aea",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
        product_name: "杏仁 120g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624aec",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
        product_name: "黑桃 180g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      }

    ]
  }

index.wxml

title-bar-comp 的 title="最新上线" 中 title 对应组件 properties 中的属性名

product-cloumn-comp 中的product="{{item}}", product 对应 behaviors 中的属性名

index.wxss

/* 分割线 */
.dividing-line{
  width:750rpx;
  height:22rpx;
  background:rgba(249,249,249,1);
}
/* 最新上线 */
.products-latest-container{
  width: 750rpx;
}

运行效果如下：

源码地址

在搭建项目前，根据自己需要下载本系列文章的源代码

本项目源码地址：https://gitee.com/mtcarpenter/nux-shop