首页 > 分享 > 【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序（3）

【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序（3）

花匠小妙招
2024-12-02 14:01

在这里插入图片描述

‍个人主页：@开发者-曼亿点

‍ hallo 欢迎点赞收藏⭐ 留言加关注✅!

‍ 本文由曼亿点原创

‍ 收录于专栏：微信小程序开发

⭐⭐

文章目录 ⭐⭐⭐前言⭐ 一、鲜花的分类(1)cash.wxml(2)cash.wxss(3)cash.js 二、鲜花的购买付款界面(1)qin.wxml(2)qin.wxss(3)qin.js结束语

⭐前言⭐

在这个数字化的时代，鲜花不仅仅是情感的传递者，更是美好生活的点缀。为了让您能更便捷地选购心仪的花束，我们精心打造了这款网上花店微信小程序。
鲜花，承载着爱与祝福，是浪漫与温馨的象征。然而，传统的花店购买方式往往受到时间和空间的限制，让您无法在第一时间将这份美好传递给重要的人。我们深知您对鲜花的热爱和对便捷服务的需求，因此致力于通过技术的力量，为您创造一个全新的购花体验。
这个网上花店微信小程序，将汇聚来自世界各地的优质鲜花品种，以精美的图片和详细的介绍呈现在您眼前。无论您是为了庆祝生日、表达爱意，还是为了装饰家居，只需轻点屏幕，就能轻松挑选到最适合您的那束花。
同时，我们还提供贴心的配送服务，确保每一朵鲜花都能以最鲜活的姿态送达您指定的地点。在这里，您不仅能享受到便捷的购物流程，还能感受到我们对品质和服务的执着追求。
让我们一同开启这充满花香的数字之旅，让鲜花的美丽与温暖，随时伴您左右。

在这里插入图片描述

一、鲜花的分类

在缤纷绚烂的鲜花世界里，每一种花都拥有独特的魅力与寓意。为了让您能够更加便捷、精准地找到心仪的那束花，我们精心打造了鲜花分类功能。
鲜花的种类繁多，从热情似火的红玫瑰到纯洁无瑕的白百合，从温馨浪漫的康乃馨到高贵典雅的郁金香，每一种花都在诉说着不同的情感与故事。
通过我们细致的分类体系，您可以轻松按照花的品种、颜色、用途等维度进行筛选。无论是为庆祝生日挑选的多彩花束，还是为表达爱意准备的专属鲜花，亦或是为装点家居寻觅的清新盆栽，都能在瞬间找到对应的类别。
分类功能不仅是一种便捷的工具，更是一次引导您探索鲜花世界的奇妙之旅。让您在众多的选择中，快速定位心中所想，发现更多未曾留意的美丽。

(1)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">  <view class="nav_left_items {{count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{{index}}"> {{item.name}} </view> </block> </view> <view class="nav_right">  <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> 12345678910111213141516171819202122232425262728293031323334 (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; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 (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原本的值，完成右侧商品的根据侧边栏的不同展示商品 }, }) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

结果展示：
在这里插入图片描述

二、鲜花的购买付款界面

在这个充满花香的数字世界里，为了让您能够轻松、安全、便捷地拥有心仪的鲜花，我们精心构建了高效可靠的付款功能。
付款，这一关键环节，不仅是交易的完成，更是信任的传递。我们深知您对每一笔消费的重视，因此致力于提供多种灵活且安全的付款方式，满足您的个性化需求。
无论是传统的在线支付，还是便捷的移动支付，亦或是贴心的货到付款，我们都力求为您打造流畅、无忧的付款体验。每一次点击，每一次输入，都承载着您对美好生活的期待，而我们的付款功能将确保这一期待得以顺利实现。
严密的安全防护机制，如同坚实的堡垒，守护着您的财务信息，让您在选购鲜花时毫无后顾之忧。简洁明了的操作界面，让付款过程如同鲜花绽放般自然流畅。
让付款不再是繁琐的步骤，而是您与美丽鲜花之间的最后一道温馨桥梁，让您更快地将这份美好带回家。

(1)qin.wxml

<view class="detail"> <block wx:for="{{rightitem}}" wx:key="id" wx:if="{{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"> <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> 1234567891011121314151617181920212223242526272829303132333435 (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; } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 (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: '支付成功', }) } }) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546

运行结果：
在这里插入图片描述