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

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

👨‍💻 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>

(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: '支付成功',
        }) 
}
})

运行结果：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖