👨💻个人主页：@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏：微信小程序开发
⭐🅰⭐
-
[video(video-SIAFbOCb-1719905431985)(type-csdn)(url-https://live.csdn.net/v/embed/405645)(image-https://ucc.alicdn.com/images/user-upload-01/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>
AI 代码解读
(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;
}
AI 代码解读
(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原本的值，完成右侧商品的根据侧边栏的不同展示商品
},
})
AI 代码解读
结果展示：
🎶 二、鲜花的购买付款界面
在这个充满花香的数字世界里，为了让您能够轻松、安全、便捷地拥有心仪的鲜花，我们精心构建了高效可靠的付款功能。
付款，这一关键环节，不仅是交易的完成，更是信任的传递。我们深知您对每一笔消费的重视，因此致力于提供多种灵活且安全的付款方式，满足您的个性化需求。
无论是传统的在线支付，还是便捷的移动支付，亦或是贴心的货到付款，我们都力求为您打造流畅、无忧的付款体验。每一次点击，每一次输入，都承载着您对美好生活的期待，而我们的付款功能将确保这一期待得以顺利实现。
严密的安全防护机制，如同坚实的堡垒，守护着您的财务信息，让您在选购鲜花时毫无后顾之忧。简洁明了的操作界面，让付款过程如同鲜花绽放般自然流畅。
让付款不再是繁琐的步骤，而是您与美丽鲜花之间的最后一道温馨桥梁，让您更快地将这份美好带回家。
(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>
AI 代码解读
(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;
}
AI 代码解读
(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: '支付成功',
})
}
})
AI 代码解读
运行结果：
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
