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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
简介: 小程序提供便捷的鲜花选购和配送服务,汇聚全球优质鲜花品种,确保新鲜送达。用户可轻松挑选花束,享受个性化配送,并通过地图功能查看配送位置。此外,物流功能实时更新,保证鲜花安全快速到达。代码示例展示了地图和物流信息的页面布局与交互实现。### 配送与物流功能亮点1. **地图功能**:使用`map.wxml`, `map.wxss`, 和 `map.js` 实现定位与导航,确保精准配送。2. **物流追踪**:通过`logistics.wxml`, `logistics.wxss`, 和 `logistics.js` 显示详细物流状态,提供流畅的用户体验。

在这里插入图片描述


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

👨‍💻 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)map.wxml

<!--pages/map/map.wxml-->
<map latitude="{
   
   {latitude}}" longitude="{
   
   {longitude}}" markers="{
   
   {markers}}" bindmarkertap="markertap"></map>

(2)map.wxss

/* pages/map/map.wxss */
map{
   
   
  width: 100vh;
  height: 100vh;
}

(3)map.js

/* pages/map/map.wxss */
// pages/map/map.js
Page({
   
   
  /**
   * 页面的初始数据
   */
  data: {
   
   
latitude:29.034552,
longitude:111.6928724,
markers:[{
   
   
  iconPath:'/images/navi.png',
  id:0,
  latitude:29.034552 ,
  longitude:111.6928724,
  width:50,
  height:50
}]
},
markertap:function(){
   
   
  wx.openLocation({
   
   
    latitude: this.data.latitude,
    longitude: this.data.longitude,
    name:"掌上花坊",
    address:湖南常德
  })
},

buttonTap:function(){
   
   
  wx.getLocation({
   
   
    type:"gcj02",
    success:function(res){
   
   
   wx:openLocation({
   
   
     latitude:res.latitude,
     longitude:res.longitude
   })
    }
  })
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
   

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
   
   

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
   
   

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
   
   

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   
   

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
   
   

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   
   

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
   
   

  }
})

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


🎶 二、鲜花的物流功能


  在鲜花的世界里,每一朵绽放的生命都承载着无尽的美好与期待。为了让这份美好能够毫无损耗、及时而精准地传递到您的手中,我们致力于打造出卓越的鲜花物流功能。
  鲜花的娇弱与珍贵,使得它们在运输过程中需要格外的呵护与关怀。我们深知,只有高效且精心的物流服务,才能确保您所挑选的每一束鲜花,都能以最鲜活、最完美的姿态呈现在您面前。
  通过先进的技术手段和精心规划的物流网络,我们实现了对鲜花运输的全程监控与优化。从花田到花店,再从花店到您的手中,每一个环节都经过严格的把控,只为给您带来无与伦比的鲜花体验。
  无论您身处何地,无论您何时下单,我们的物流系统都将全力以赴,让您在最短的时间内,感受到来自鲜花的芬芳与温暖。因为我们相信,每一束鲜花都是一份情感的寄托,而顺畅、可靠的物流,是这份情感传递的坚实保障。

(1)logistics.wxml

<!--pages/logistics/logistics.wxml-->
<view class="outerBox">
    <!-- 头部物流信息 -->
    <view class="navBox">
        <view class="navLeftBox">
            <view>
                <image src="https://b.bdstatic.com/searchbox/icms/searchbox/img/zhongtonglogo.png"></image>
            </view>
            <view>中通快递</view>
            <view>78465464135654565</view>
        </view>
        <view class="navRightBox">
            <text>复制</text>
            <text>|</text>
            <text bindtap="tel">电话</text>
        </view>
    </view>
    <!-- 主体内容 -->
    <view class="contantBox">
        <!-- 通过数组长度判断显示内容 >0显示物流信息-->
        <view wx:if="{
   
   {dataList.length > 0}}">
            <view class="itemBox" wx:for="{
   
   {dataList}}" wx:key="index">
                <!-- 左边线条 -->
                <view class="itemLeftBox">
                    <view class="lineBox">
                        <view class="topLineBox {
   
   {index == 0 ? '' : 'longLineBox'}}"></view>
                        <view class="bomLineBox {
   
   {index + 1 == dataList.length ? '' : 'longLineBox'}}"></view>
                    </view>
                    <image class="newestIconBox" src="https://s1.ax1x.com/2022/03/29/qySZi4.png" wx:if="{
   
   {index == 0}}"></image>
                    <view class="dotBox" wx:else="{
   
   {index > 0}}"></view>
                </view>
                <!-- 右边内容 -->
                <view class="rightBigBox {
   
   {index == 0 ? '' : 'oldTxtBox'}} {
   
   {index + 1 == dataList.length ? '' : 'borderBomBox'}}">
                    <view>{
   
   {
   
   item.content}}</view>
                    <view class="timeBox">{
   
   {
   
   item.time}}</view>
                </view>
            </view>
        </view>
        <!-- 通过数组长度判断显示内容 除了大于0之外显示暂无物流信息-->
        <view class="notBox" wx:else>暂无物流信息</view>
    </view>
</view>

(2)logistics.wxss

/* pages/logistics/logistics.wxss */
.outerBox {
   
   
  /* 最外层的盒子 */
  width: 100%;
  font-size: 24rpx;
}

.navBox {
   
   
  /* 头部样式 */
  padding: 18rpx;
  border-bottom: 2rpx solid rgb(236, 236, 236);
}

.navBox,
.navLeftBox {
   
   
    /* 头部内容样式 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.navLeftBox view {
   
   
   /* 头部左边的样式 */
  margin-left: 10rpx;
}

.navRightBox text {
   
   
  /* 头部右边的样式 */
  margin-left: 10rpx;
}

.navRightBox text:nth-child(2) {
   
   
  /* 头部竖线文字颜色 */
  color: rgb(226, 225, 225);
}

.navBox image {
   
   
  /* 图片样式 */
  width: 46rpx;
  height: 46rpx;
  border-radius: 50%;
}

.contantBox {
   
   
  /* 物流信息整体样式 */
  padding: 0 18rpx;
}

.itemBox {
   
   
  width: 100%;
  display: flex;
}

.itemLeftBox {
   
   
  /* 左边一整条竖线外层盒子的样式 */
  position: relative;
  width: 62rpx;
}

.lineBox {
   
   
  /* 左边一整条竖线的样式 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 28rpx;
}

.longLineBox {
   
   
  /* 线的样式 */
  background-color: rgb(215, 215, 215);
}

.topLineBox {
   
   
  /* 线的样式 */
  width: 1px;
  height: 50rpx;
}

.bomLineBox {
   
   
  /* 线的样式 */
  flex: 1;
  width: 1px;
}
.newestIconBox {
   
   
  /* 最新物流信息icon样式 */
  position: absolute;
  top: 36rpx;
  left: 9rpx;
  width: 40rpx;
  height: 40rpx;
}

.dotBox {
   
   
  /* 圆点样式 */
  position: absolute;
  top: 44rpx;
  left: 20rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: rgb(201, 201, 201);
}

.rightBigBox {
   
   
  /* 右边物流信息每一个节点的样式 */
  flex: 1;
  padding: 38rpx 0;
}

.borderBomBox {
   
   
  /* 物流信息下划线 */
  border-bottom: 1px solid rgb(243, 241, 241);
}

.oldTxtBox {
   
   
  /* 之前物流信息文字样式 */
  color: rgb(159,159,159);
}


.timeBox {
   
   
  /* 时间样式 */
  margin-top: 4rpx;
  font-size: 20rpx;
}


.notBox {
   
   
  /* 暂无物流信息样式 */
  padding: 20rpx 0;
  text-align: center;
  color: rgb(159,159,159);
}

(3)logistics.js

Page({
   
   
  tel:function(e){
   
   
wx.makePhoneCall({
   
   
  phoneNumber: '18878592935',
})
  },
  data: {
   
   
    dataList: [
      {
   
   
        content: '已签收,签收人凭取货码签收。',
        time: '2022-03-27 21:01'
      },
      {
   
   
        content: '湖南省常德市伍超宇[18821444747]正在派件(95720为中通快递员外呼专属电话,请放心接听)',
        time: '2022-03-27 17:51'
      },
      {
   
   
        content: '快件已到达湖南省常德市鼎城区33栋314',
        time: '2022-03-27 07:11'
      },
      {
   
   
        content: '快件离开潮汕中心已发往湖南省常德市鼎城区',
        time: '2022-03-26 17:45'
      },
      {
   
   
        content: '快件发往潮汕中心',
        time: '2022-03-26 07:45'
      },
      {
   
   
        content: '包裹已揽收',
        time: '2022-03-25 16:15'
      },
      {
   
   
        content: '包裹正在等待揽收',
        time: '2022-03-25 09:16'
      },
      {
   
   
        content: '商品已下单',
        time: '2022-03-24 18:01'
      }
    ]
  },
})

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

结束语🥇

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

目录
相关文章
|
6月前
|
小程序 Shell 网络安全
【微信小程序】-- 使用 Git 管理项目(五十)
【微信小程序】-- 使用 Git 管理项目(五十)
|
6月前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
6月前
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
956 1
|
6月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
216 3
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
4月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
209 0
【微信小程序开发实战项目】——个人中心页面的制作
|
4月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
115 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
4月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
72 0