【微信小程序】基于JavaScript的花店商城小程序微信云开发

【微信小程序】基于JavaScript的花店商城小程序微信云开发

用Java Script语言进行一次微信小程序开发

---

前言

运用微信开发者工具等相关软件，用Java Script语言进行一次微信小程序开发，做出一个能够在手机应用，实现友好的界面管理与人性化的操作。应用要具有健壮性以及易于更新和维护的功能。要充分利用网上的现有资源，学习并熟练应用各种框架的操作

---

一、功能总览

二、功能显示

1.搜索框

在首页的最上方就是搜索框部分，可以在搜索框中搜索商品列表中任意一个商品的名称，如果商品列表存在此名称，则会在搜索库那个下方出现相应商品容器，点击商品即可跳转商品详情页面。若商品类信息列表不存在搜索的名称，则会弹窗显示未找到该商品。

2.轮播图

在搜索框下方就是轮播图部分，图片放在了轮播图对应的云数据库中的swiper集合里，以方便实现轮播图效果，并在图片下方显示轮播圆点。在index.js中的onLoad(){}生命周期-监听页面加载函数中写入获取swiper中的图片。

3.主题导航栏

轮播图下方是首页主题导航栏部分。本导航栏会根据点击不同的导航分类跳转对应页面theme内容，其中跳转页面theme内的上方有【默认】、【销量】、【价格】按钮根据销量和价格来对商品进行排序。同时在此跳转页面theme内的下方商品栏会列出此导航分类对应的不同商品，而商品块包括商品的名称、简介、图片、价格信息。主题导航栏与其跳转界面theme

4.商品展示

商品展示模块在主题导航栏下方，它会显示所有product数据集合中的商品，商品块包括商品的名称、简介、图片、价格信息。商品祥情跳转会根据product中商品的_id来跳转，此代码写在首页index.wxml中

5.购物车与逻辑事件模块

商品详情页面的功能包括上跳转首页、跳转购物车、加入购物车、立即购买功能。加入购物车逻辑是根据商品详情的商品_id，将相应信息包括商品名称、商品图片、商品价格等信息缓存到shopping_cart中。其中设置一个product_checked来判断购物车中的商品是否被选中。同时购物车界面下方有【删除】、【联系客服】、【结算】按钮。删除按钮可将选择的商品删除。联系客服功能是利用了微信开发的函数open-type:”contact”，可直接与小程序客服聊天

若商品已被选中，则再进行结算的时候，只会将product_checked设置为true，来表示商品已被选中，并根据商品的售卖价格product_sell_price进行总金额的结算。

6.支付模块

首先，在购物车shopping_cart.js中写入支付事件和选择事件，根据选择事件来跳转支付界面，触发事件是由购物车界面点击【结算】按钮跳转至pages/pay/pay界面。此界面上方显示用户需要添加地址才可继续结算并生成订单，下方是刚刚在购物车中勾选的商品，其中包括商品图片、商品名称、商品个数和总金额。在pay.js中，将shopping_cart中传过来的商品详情接收，当继续点击【结算】时，会触发将商品详情写入数据库order集合中。在这里，还有address选择地址函数会判断用户是否填写地址，填写之后才能继续结算。

7.订单

我的订单界面路径为pages/my_record/ my_record，此部分可在‘我的’底部导航栏里找到，点击【我的订单】可显示用户下的所有单，每一单只展示其订单里第一个商品的图片，能够显示下单时间、商品状态、商品总额等。顶部同时设置了【送货中】和【已送达】部分方便用户能够查看订单状态。这里在js中的代码比较简单，仅需要选择事件和订单获取函数。

8.订单详情

本模块路径为pages/my_record_detail/my_record_detail，主要展示的具体订单详情，在订单界面看到的是用户所有的订单，但只显示其中第一个商品。所以点击对应订单就会显示相应的全部商品以及该订单的收货人地址等信息。该页面的js中也相对来说比较简单，只有获取订单的监听函数。

9.我的和登录界面

‘我的’界面主要获取用户头像和名称，显示我的订单、收货地址、商户平台即后台登陆

收货地址是在js中写入wx.getSetting({})函数，函数中嵌套着wx.authorize。利用scope.address获取用户实时地址

10.上传商品

路径是pages/store_operation_up/store_operation_up。首先，在个人中心点击进入商户平台登陆界面，如图2.17所示，输入数据库中user集合的账户密码后方可登陆进入后台。后台有两个选项【上传商品】和【管理商品】。其中【上传商品】顾名思义，可以直接上传新的商品，所上传的商品会直接被写入云数据库中product集合，并且更新后可直接在各个界面显示出新的商品。

11.管理商品

路径为pages/store_operation_update/store_operation_update，首先点击管理商品后，管理员会看到所有数据库中的商品如图2.20所示，点击商品即可进行对商品进行信息、分类、主题、图片的修改操作，其操作界面与上传商品界面相似。

---

附言

这是我的实习作业，有PPT、讲解视频、实习报告和代码压缩包。
做个小程序很辛苦但出来的效果老夫甚是喜欢，本实习成绩拿到了优的水平，
如果有其他问题可加我q（2426470209）

若有侵权请联系删除！！