第 2-2 课：前端之首页实现 目录
- 开篇
- 【系】微信小程序云开发实战坚果商城-开篇
- 基础篇
- 【系】微信小程序云开发实战坚果商城-弹性盒子
- 【系】微信小程序云开发实战坚果商城-ES6 简单入门
- 【系】微信小程序云开发实战坚果商城-官方案例先运行
- 前端篇
- 【系】微信小程序云开发实战坚果商城-商城项目搭建
- 【系】微信小程序云开发实战坚果商城-所有目录…
所在路径1 轮播实现client/pages/index/index
index.js data 数据如下，目前我们是没有调后台的数据，默认给出默认值方便页面的展示 data: {
indicatorDots: true, //是否显示面板指示点
autoplay: true, //自动轮播
interval: 3000, // 自动切换时间间隔
duration: 1000, // 滑动动画时长
circular: true, //是否采用衔接滑动
banners: [{
image: "cloud://release-prod.7265-release-prod/banner/banner@1.png",
name: "精美花生",
product_id: "5cf38858a87a1a18b65aefbe"
},
{
image: "cloud://release-prod.7265-release-prod/banner/banner@2.png",
name: "精美开心果",
product_id: "5cf38858a87a1a18b65aefca"
},
{
image: "cloud://release-prod.7265-release-prod/banner/banner@3.png",
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.jsdata:{
/**
* 其他部分省略
*/
themes: [
{ theme_icon: 'images/theme@1.png', theme_name: '新品糖果', theme_type: 1 },
{ theme_icon: 'images/theme@2.png', theme_name: '精品果干', theme_type: 2 },
{ theme_icon: 'images/theme@3.png', theme_name: '美味坚果', theme_type: 3 },
{ theme_icon: 'images/theme@4.png', 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.jsmodule.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/product-nux@1.png",
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/product-nux@2.png",
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/product-nux@3.png",
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/product-nux@4.png",
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
推荐阅读
- 微信小程序地址位置定位wx.getLocation 4G 与WIFI 不一致
- C#|微信小程序开发系列（六）——“处理请求时出错”怎么处理（）
- 微信小程序|微信小程序从入门到入土教程(02)
- 微信小程序开发项目实战（五）
- 微信小程序前端请求云函数显示超时错误
- wepy|wepy微信小程序swiper组件设置自适应图片高度，图片高度不一致取最高图片的高度
- 解决实际问题|小程序部署环境问题
- 小程序之云开发初体验
- 微信小程序中获取时间戳IOS不兼容
- 如何实现微信小程序wx.setStorage数据缓存实现缓存过期时间