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

曼亿点2024-07-05 20:13

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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐

花店小程序

文章目录

⭐前言⭐

在这个数字化的时代，鲜花不仅仅是情感的传递者，更是美好生活的点缀。为了让您能更便捷地选购心仪的花束，我们精心打造了这款网上花店微信小程序。

鲜花，承载着爱与祝福，是浪漫与温馨的象征。然而，传统的花店购买方式往往受到时间和空间的限制，让您无法在第一时间将这份美好传递给重要的人。我们深知您对鲜花的热爱和对便捷服务的需求，因此致力于通过技术的力量，为您创造一个全新的购花体验。

这个网上花店微信小程序，将汇聚来自世界各地的优质鲜花品种，以精美的图片和详细的介绍呈现在您眼前。无论您是为了庆祝生日、表达爱意，还是为了装饰家居，只需轻点屏幕，就能轻松挑选到最适合您的那束花。

同时，我们还提供贴心的配送服务，确保每一朵鲜花都能以最鲜活的姿态送达您指定的地点。在这里，您不仅能享受到便捷的购物流程，还能感受到我们对品质和服务的执着追求。

让我们一同开启这充满花香的数字之旅，让鲜花的美丽与温暖，随时伴您左右。

🎶 一、微信小程序app.json 全集

javascript 复制代码 
{
  "pages": [
    "pages/logs/logs",
    "pages/index/index",
    "pages/cash/cash",
    "pages/own/own",
    "pages/gou/gou",
    "pages/qin/qin",
    "pages/users/users", 
    "pages/won/won",
    "pages/address/address",
    "pages/logistics/logistics",
    "pages/addressAdd/addressAdd",
   "pages/welfare/welfare",
   "pages/order/order",
   "pages/lszz/lszz",
   "pages/xyxh/xyxh",
   "pages/fl/fl",
   "pages/collection/collection",
    "pages/map/map"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FF0000",
    "navigationBarTitleText": "花语轩",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "selectedColor": "#D73E3E",
    "backgroundColor": "#F3F1EF",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/bar/home-off.png",
        "selectedIconPath": "images/bar/home-on.png"
      },
      {
        "pagePath": "pages/cash/cash",
        "text": "分类",
        "iconPath": "images/bar/tab_group.png",
        "selectedIconPath": "images/bar/tab_group 2.png"
      },
      {
        "pagePath": "pages/gou/gou",
        "text": "购物车",
        "iconPath": "images/bar/cart-off.png",
        "selectedIconPath": "images/bar/cart-on.png"
      },
      {
        "pagePath": "pages/own/own",
        "text": "我",
        "iconPath": "images/bar/my-off.png",
        "selectedIconPath": "images/bar/my-on.png"
      }
    ]
  }
}

🎶 二、花语轩的首页代码

在这里，每一朵鲜花都是大自然的馈赠，每一束花束都是精心编织的情感诗篇。

鲜花，是生活中的一抹亮色，是心灵的慰藉，是爱意的表达。我们致力于为您打造一个花的世界，让您在繁忙的生活中，只需轻轻滑动指尖，就能邂逅那份属于您的美好与浪漫。

无论您是为了给心爱的人一个惊喜，还是为了给自己的生活增添一份温馨，我们都能满足您的需求。从娇艳欲滴的玫瑰到清新淡雅的百合，从热情似火的向日葵到神秘高贵的郁金香，我们应有尽有。

我们不仅提供高品质的鲜花，更注重每一个细节。精心设计的花束包装，贴心的配送服务，只为让您的购花之旅充满愉悦与安心。

让鲜花成为您生活中的常客，用它们的芬芳和美丽，装点您的每一个精彩瞬间。

(1)index.wxml

javascript 复制代码 
<!--index.wxml-->
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#FFC0CB"  indicator-dots circular autoplay>
          <swiper-item style="width: 750rpx; height: 352rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">
            <image style="width: 750rpx; height:370rpx; display: inline-block; box-sizing: border-box" src="/images/hua.png" />
          </swiper-item>
          <swiper-item>
            <image style="width: 750rpx; height: 370rpx; display: inline-block; box-sizing: border-box" src="/images/hua/hh.jpg" />
          </swiper-item>
          <swiper-item>
            <image style="width: 750rpx; height: 370rpx; display: inline-block; box-sizing: border-box" src="/images/hua/hoh.jpg" />
          </swiper-item>
        </swiper>
 <view class="nav">
 <block wx:for="{{navs}}">
   <view class="item" bindtap="navBtn" id="{{index}}">
      <view>
        <image src="{{item.img}}" style="width: 101rpx; height: 92rpx; display: inline-block; box-sizing: border-box"></image>
      </view>
      <view>
        {{item.name}}
      </view>
   </view>
   </block>
 </view>
  <!--精品推荐-区域标题-->
<view class='text'>
  <input value="{{value}}" ></input>
</view>
<!--精品推荐-1行2列图片-->
<view class="tuijians">
  <navigator url=''>
  <view class="tuijian-item" >
    <image src='/images/hua/1.jpg' class="tuijian-image" />
  </view>  
  </navigator>
  <navigator url=''>
  <view class="tuijian-item" >
    <image src='/images/hua/2.jpg' class="tuijian-image"/>
  </view>     
  </navigator>
  
</view>

(2)index.wxss

javascript 复制代码 
/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}
.nav{
  text-align: center;
}
.item{
   margin-top:15px; 
   text-align: center;
   font-family: "Microsoft YaHei";
   font-size: 13px;
   width: 60px;
   display: inline-block;
   margin-right:10px; 
}
.hr{
  height: 1px;
  background-color: #cccccc;
  opacity: 0.2;
  margin-top:10px; 
}
/*精品推荐-1行2列图片*/
.tuijians {
  display: flex;
}
.tuijians navigator{
  width:50%;
}
.tuijian-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx;
  background: white;
}
.tuijian-image {
  width: 330rpx;
  height: 330rpx;
}
input {
  text-align: center;
  background-color: white;
  font-size: 32rpx;
}
.bg01{ background:  white;}

(3)index.js

javascript 复制代码 
// index.js
Page({

  changeImage:function(){
    wx.switchTab({
      url: '/pages/cash/cash',
    })
  },
 
  data: {
    value:'精品推荐'
  },
    
  onLoad: function (options) {
    var page = this;
    var navs = this.loadNavData();
    page.setData({ navs: navs });
  },
  navBtn: function (e) {
    console.log(e);
    var id = e.currentTarget.id;
    if (id == "0") {
      wx.navigateTo({
        url: '/pages/index/index'
      })
    }
    if (id == "1") {
      wx.navigateTo({
        url: '/pages/xyxh/xyxh'
      })
    }
    if (id == "2") {
      wx.navigateTo({
        url: '/pages/map/map'
      })
    }
    if (id == "3") {
      wx.navigateTo({
        url: '/pages/fl/fl'
      })
    }
    if (id == "5") {
      wx.navigateTo({
        url: ''
      })
    }
    if (id == "5") {
      wx.navigateTo({
        url: '/pages/welfare/welfare'
      })
    }
    if (id == "6") {
      wx.navigateTo({
        url: '/pages/lszz/lszz'
      })
    }
    if (id == "7") {
      wx.navigateTo({
        url: '/pages/logistics/logistics'
      })
    }

  },
  loadNavData: function () {
    var navs = [];
    var nav0 = new Object();
    nav0.img = '../../images/nav/hua.png';
    nav0.name = '鲜花首页';
    navs[0] = nav0;

    var nav1 = new Object();
    nav1.img = '../../images/nav/ai.png';
    nav1.name = '稀有鲜花';
    navs[1] = nav1;

    var nav2 = new Object();
    nav2.img = '../../images/nav/lx.png';
    nav2.name = '鲜花配送';
    navs[2] = nav2;

    var nav3 = new Object();
    nav3.img = '../../images/nav/qq.png';
    nav3.name = '鲜花分类';
    navs[3] = nav3;

    var nav4 = new Object();
    nav4.img = '../../images/nav/ue.png';
    nav4.name = '鲜花种植';
    navs[4] = nav4;

    var nav5 = new Object();
    nav5.img = '../../images/nav/xin.png';
    nav5.name = '每日签到';
    navs[5] = nav5;

    var nav6 = new Object();
    nav6.img = '../../images/nav/lv.png';
    nav6.name = '绿植种类';
    navs[6] = nav6;

    var nav7 = new Object();
    nav7.img = '../../images/nav/zzh.png';
    nav7.name = '物流信息';
    navs[7] = nav7;
    return navs;
  }
})
结束语🥇

以上就是微信小程序之列表渲染

持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序

你们的支持就是曼亿点创作的动力💖💖💖

相关推荐
尘浮生3 小时前
Java项目实战II基于微信小程序的校运会管理系统（开发文档+数据库+源码）
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生8 小时前
Java项目实战II基于微信小程序的电影院买票选座系统（开发文档+数据库+源码）
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen10 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘14 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡17 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼20 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285751 天前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计（小程序项目）
微信小程序·小程序
wqq_9922502772 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿