【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
👨💻个人主页:@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏:微信小程序开发
⭐🅰⭐
[video(video-SIAFbOCb-1719905431985)(type-csdn)(url-https://live.csdn.net/v/embed/405645)(image-https://img-blog.csdnimg.cn/img_convert/4d308d4899bf76af224a89b818236925.jpeg)(title-花店小程序)]
@[TOC]
⭐前言⭐
在这个数字化的时代,鲜花不仅仅是情感的传递者,更是美好生活的点缀。为了让您能更便捷地选购心仪的花束,我们精心打造了这款网上花店微信小程序。
鲜花,承载着爱与祝福,是浪漫与温馨的象征。然而,传统的花店购买方式往往受到时间和空间的限制,让您无法在第一时间将这份美好传递给重要的人。我们深知您对鲜花的热爱和对便捷服务的需求,因此致力于通过技术的力量,为您创造一个全新的购花体验。
这个网上花店微信小程序,将汇聚来自世界各地的优质鲜花品种,以精美的图片和详细的介绍呈现在您眼前。无论您是为了庆祝生日、表达爱意,还是为了装饰家居,只需轻点屏幕,就能轻松挑选到最适合您的那束花。
同时,我们还提供贴心的配送服务,确保每一朵鲜花都能以最鲜活的姿态送达您指定的地点。在这里,您不仅能享受到便捷的购物流程,还能感受到我们对品质和服务的执着追求。
让我们一同开启这充满花香的数字之旅,让鲜花的美丽与温暖,随时伴您左右。
🎶 一、鲜花的分类
在缤纷绚烂的鲜花世界里,每一种花都拥有独特的魅力与寓意。为了让您能够更加便捷、精准地找到心仪的那束花,我们精心打造了鲜花分类功能。
鲜花的种类繁多,从热情似火的红玫瑰到纯洁无瑕的白百合,从温馨浪漫的康乃馨到高贵典雅的郁金香,每一种花都在诉说着不同的情感与故事。
通过我们细致的分类体系,您可以轻松按照花的品种、颜色、用途等维度进行筛选。无论是为庆祝生日挑选的多彩花束,还是为表达爱意准备的专属鲜花,亦或是为装点家居寻觅的清新盆栽,都能在瞬间找到对应的类别。
分类功能不仅是一种便捷的工具,更是一次引导您探索鲜花世界的奇妙之旅。让您在众多的选择中,快速定位心中所想,发现更多未曾留意的美丽。
(1)cash.wxml
<!--pages/cash/cash.wxml-->
<!--分割线-->
<view class="hr"></view>
<!--输入框-->
<input placeholder="请输入鲜花名称" style="text-emphasis-color: #FF0000; width: 400rpx; height: 50rpx; display: content; position: relative; left: 204rpx; top: 0rpx"></input>
<view class="hr"></view>
<view class="shopping"><!----><!--大框架-->
<view class="nav_left"><!--侧边栏盒子-->
<block wx:for="{{leftitem}}" wx:key="id">
<!--这里定义了一个变量index,并把这个变量赋值为index,这个是wx:for循环产生的下标,传到js,通过这个下标完成商品的显示-->
<view class="nav_left_items {{count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{{index}}"><!--文字盒子-->
{{item.name}}
</view>
</block>
</view>
<view class="nav_right"><!--右边主体部分-->
<!--通过侧边栏的选择传到js中的index的值与js中data数据中的tag进行比较,完成商品的分类显示-->
<view class="nav_right_goods" wx:for="{{rightitem}}" wx:key="id" wx:if="{{count==item.tag}}" bindtap="changeImage" ><!--商品详情的盒子-->
<view bindtap="click_nav_right" data-index_two="{{index}}" class="nav">
<image src="{{item.url}}" mode="widthFix" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;"></image><!--商品图片-->
<view class="nav_right_textandprice"><!--文字和价格的盒子-->
<text class="nav_right_text" style="color: black;">{{item.name}}</text><!--商品文字-->
<view class="nav_right_price"><!--商品价格-->
¥{{item.price}}.00
</view>
</view>
</view>
</view>
</view>
</view>
(2)cash.wxss
/* pages/cash/cash.wxss */
.hr {
border: 1px solid #ddbcbc;
width: 100%;
opacity: 0.6;
}
/*输入框样式*/
input {
margin: 15rpx 32rpx;
border: 1px solid #FF0000;
border-radius: 50rpx;
text-align: center;
font-size: 32rpx;
}
/*布局样式*/
.content {
display: flex;
flex-direction: row;
}
/*大框架*/
.shopping {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color: #808080;
}
/*左侧栏主盒子*/
.nav_left{
position: fixed;
top: 0;
left: 0;
display: inline-block;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
.nav_left .nav_left_items{
height: 30px;
line-height: 30px;
padding: 6px 0;
border-bottom: 1px solid #dedede;
font-size: 14px;
}
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
.nav{
display: flex;
padding: 40rpx;
}
.nav_right_textandprice{
display: flex;
flex-direction: column;
padding-left: 20rpx;
position: relative;
}
.nav_right_price{
color: #c00000;
position: absolute;
bottom: 20rpx;
}
.active-tag{
background-color: white;
color: red;
border-left: 5px solid #FF0000;
border-radius: 5px;
}
(3)cash.js
// pages/cash/cash.js
Page({
changeImage:function(){
wx.navigateTo({
url: '/pages/qin/qin',
})
},
data: {
//leftitem是定义左边侧边栏的选项,rightitem是定义右边商品的展示,tag主要是把商品进行一个类别的划分
leftitem:[
{id:1,name:"生日花束"},
{id:2,name:"稀有鲜花"},
{id:3,name:"绿植盆栽"},
{id:4,name:"开业商务"},
{id:5,name:"春夏高定"},
{id:6,name:"时令花礼"},
{id:7,name:"玫瑰礼盒"}
],
rightitem:[
{id:1,name:"香槟玫瑰",price:78,url:"../../images/hua/12.jpg",tag:0,},
{id:1,name:"昆明桃红金芍",price:112,url:"../../images/hua/hau6.jpg",tag:0},
{id:1,name:"昆明金丝竹桃",price:129,url:"../../images/hua/hua7.jpg",tag:0},
{id:2,name:"暮光之城",price:233,url:"../../images/hua/hua10.jpg",tag:1},
{id:2,name:"橙色亚百合",price:123,url:"../../images/hua/hau11.jpg",tag:1},
{id:3,name:"use",price:91,url:"/images/hua/hau11.jpg",tag:2},
],
count:0,//我们把前端的index值传到js中,并把它赋值给count,储存在js中,方便右边商品通过count完成与侧边栏的相同的那一类的商品展示,同时完成侧边栏的样式,保证选中的选项有与其他未选择的选项的区别
},
click_nav_right(event){//这个主要是完成商品分类页的数据传递到商品详情页
var data_one=event.currentTarget.dataset.index_two//前端的右边商品定义了一个index_two这个变量,我们在js中把这个值赋值给data变量,并传递到商品详情页
//console.log(data_one)
wx.navigateTo({//通过这个函数,完成两个页面中数据的传递,具体的用法可以到微信的小程序文档中搜索,当然除了用这个函数,也可以通过引用全局变量的方式完成数据的传递
url: '/pages/detail/detail?data='+data_one,
})
},
switchRightTab(event){
this.setData({
count:event.target.dataset.index
});//改变count原本的值,完成右侧商品的根据侧边栏的不同展示商品
},
})
结果展示:
🎶 二、鲜花的购买付款界面
在这个充满花香的数字世界里,为了让您能够轻松、安全、便捷地拥有心仪的鲜花,我们精心构建了高效可靠的付款功能。
付款,这一关键环节,不仅是交易的完成,更是信任的传递。我们深知您对每一笔消费的重视,因此致力于提供多种灵活且安全的付款方式,满足您的个性化需求。
无论是传统的在线支付,还是便捷的移动支付,亦或是贴心的货到付款,我们都力求为您打造流畅、无忧的付款体验。每一次点击,每一次输入,都承载着您对美好生活的期待,而我们的付款功能将确保这一期待得以顺利实现。
严密的安全防护机制,如同坚实的堡垒,守护着您的财务信息,让您在选购鲜花时毫无后顾之忧。简洁明了的操作界面,让付款过程如同鲜花绽放般自然流畅。
让付款不再是繁琐的步骤,而是您与美丽鲜花之间的最后一道温馨桥梁,让您更快地将这份美好带回家。
(1)qin.wxml
<!--pages/qin/qin.wxml-->
<view class="detail"><!--商品详情的大框架--><!---->
<block wx:for="{{rightitem}}" wx:key="id" wx:if="{{number==index}}"><!--这个是拿商品分类页传递过来的数据(number)与这边商品的下标(index)进行比较,展现商品分类页面选择的商品的详情-->
<image class="shop_image" mode="widthFix" src="{{item.url}}" style="width: 750rpx;height: 400rpx;"></image><!--图片展示-->
<view class="detail_box" style="width: 750rpx; height: 150rpx; display: flex; box-sizing: border-box">
<view class="detail_price"><!--这个是价格和商品名字的显示-->
<text style="color: #c00000;font-size: 34rpx;">¥{{item.price}}.00</text><!--价格展示-->
<text style="font-size: 34rpx;padding-top: 20rpx;">{{item.name}}</text><!--商品名称-->
</view>
<view class="detail_text"><!--这个是右边的那个分享,我这里是放了一张图片进行代替,没有开发这个功能-->
<image src="/images/nav/fen.jpg" mode="widthFix" style="width: 130rpx;width: 60rpx;padding-right: 20rpx;"></image>
</view>
</view>
<view class="detail_goods"><!--这个是商品详情的分隔-->
<text>商品详情</text>
</view>
<view class="detail_image"><!--这个主要做的是底部的导航,主要是通过css属性完成的简易版导航-->
<image mode="widthFix" src="{{item.good}}" style="width: 750rpx;width: 750rpx;margin-top: 20rpx;"></image><!--商品详情-->
</view>
</block>
<view class="detail_button"><!--底部的商品导航-->
<navigator class="button_message" url=""><!--消息图标部分-->
<image src="/images/bar/community-0.png" class="button_image"></image>
<text class="button_text">消息</text>
</navigator>
<navigator class="button_message" url=""><!--购物车图标部分-->
<image src="/images/bar/ui.png" class="button_image" bindtap="changeImage"></image>
<text class="button_text"bindtap="gwc" >购物车</text>
</navigator>
<view class="button button_one" bindtap="gwc1" >加入购物车</view>
<view class="button button_two" bindtap="zf">立即购买</view>
</view>
</view>
(2)qin.wxss
/* pages/qin/qin.wxss */
.detail{
background-color:#e9e9e9;
}
.detail_button{
display: flex;
align-items: center;
position: fixed;
bottom: 0;
background-color: white;
height: 100rpx;
width: 100%;
}
.button_image{
width: 50rpx;
height: 50rpx;
}
.button_text{
font-size: smaller;
}
.button_message{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100rpx;
}
.button{
flex: 1;
text-align: center;
padding: 20rpx;
border-radius: 50rpx;
margin: 0 20rpx;
}
.button_one{
background-color: #ffa630;
}
.button_two{
background-color: #ff2c3c;
}
.detail_box{
display: flex;
background-color: #fff;
padding: 10rpx 0;
padding-left: 20rpx;
align-items: center;
justify-content: space-between;
}
.detail_price{
display: flex;
flex-direction: column;
}
.detail_goods{
background-color: #fff;
line-height: 100rpx;
text-align: center;
font-weight: bold;
margin-top: 20rpx;
}
(3)qin.js
// pages/qin/qin.js
Page({
gwc:function(e){
wx.switchTab({
url: '/pages/gou/gou',
})
},
/**
* 页面的初始数据
*/
data: {//数据的定义
rightitem:[
{id:1,name:"香槟玫瑰",price:78,url:"../../images/hua/12.jpg",tag:0},
{id:1,name:"昆明桃红金芍",price:112,url:"../../images/hua/hau6.jpg",tag:0},
{id:1,name:"昆明金丝竹桃",price:129,url:"../../images/hua/hua7.jpg",tag:0},
{id:2,name:"暮光之城",price:233,url:"../../images/hua/hua10.jpg",tag:1},
{id:2,name:"橙色亚百合",price:123,url:"../../images/hua/hau11.jpg",tag:1},
{id:3,name:"use",price:91,url:"/images/hua/hau11.jpg",tag:2},
],
number:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(options) {//接收商品分类页面传递的data值(传递的是index_two这个值,我们把这个值赋值给了data这个变量,所以这个吧接收到的是data)
var data_two=options.data
this.setData({
number:data_two//把商品分类页面传递的值复制给number,方便wxml页面的调用
});
},
gwc1(){
wx.showToast({
title: '添加购物车成功',
})},
zf(){
wx.showToast({
title: '支付成功',
})
}
})
运行结果:
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
- 点赞
- 收藏
- 关注作者
评论(0)