拼团社区团购平台系统-微企邦业务4部(推荐商家)

2018-11-23两年前还籍籍无名的小程序，如今已经成为移动互联网的新风口。

***早小程序在微信平台上成名，手握 10 亿月活用户的微信，很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐，***宝、百度随即跟进，今日头条也开始内测小程序，几大平台纷纷出手，让小程序赛道更加拥挤，小程序生态多元化的背后，是巨头新一轮圈地。

而小程序之所以这么火，是因为其自身的引流模式和盈利模式，毕竟既会技术、又知道如何将技术变现的开发人员到哪都是香饽饽。本文以四大巨头都在关注的小程序电商为例，手把手教你开发小程序版网上商城。

1. 开发小程序商城

本文将实现一款小程序版的网上商城，前端使用 JvaScript 开发小程序，后端使用 Node.js Express MySQL。首先用 SQL 脚本建立 MySQL 数据库，数据库名为 orishop。MySQL 用户名是 root，密码是 12345678，也可以使用其他用户名和密码。

下面先看一下本项目的主界面，本项目分为客户端和服务端实现，客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。

项目效果展示：

2. 轮序图设计

轮序图是在 App 首页上部显示的，用于展示商品信息，可以以一定时间自动切换商品信息。轮序图需要使用 swiper 组件，每一个轮序图 Item 需要使用 swiper-item 组件，通常每一个 Item 是一个图片，可以直接在lt;swiper-itemgt;中放置一个lt;imagegt;标签。轮序图的布局代码如下。

3. 控制轮序图

轮序图的布局代码中使用了很多变量来控制轮序图的显示，例如，indicatorDots 用来控制是否显示面板指示点，autoplay 用于控制是否自动切换图像。interval 用于控制切换时间的间隔，duration 用于控制滑动动画时长。这些变量都需要在 index.js 文件的 data 变量中设置，代码如下：

在上面的代码中 imgUrls 变量没有设置值，拼团社区团购平台系统，如果想测试轮序图，可以在小程序工程的根目录创建一个 images 目录，并且在该目录中放置若干个图像文件。为了让轮序图水平充满整个界面，需要在 index.wxss 文件中添加如下的样式代码。

4. 使用 Node.js Express 连接 MySQL 数据库

由于本项目需要使用服务端，小区社区团购平台系统，所以在编写客户端的同时，还要编写服务端的程序，这一部分会使用 Node.js Express 连接 MySQL 数据库，在连接 MySQL 数据库之前，先要创建相关的表和视图。

本项目使用 WebStorm 开发，创建一个名为 service 的工程，接下来在 service 工程中创建 my_connect.js 文件，并输入下面的代码。

接下来测试连接数据库的代码是否正确，在 service 工程的 index.js 文件中添加如下代码。

由于 Node.js 提供的模块不支持操作 MySQL 数据库，所以运行本例的代码需要使用下面的命令行安装 MySQL 模块。然后在浏览器地址栏中输入 http://localhost:3000，就会在 WebStorm 的控制台看到输出结果。

5. 从 MySQL 数据库中获取要显示的轮询图信息

在这一部分仍然编写服务端代码，在小程序端需要显示轮询图，轮序图中的数据需要从 v_goods 视图获取，该视图可以得到

，销售的商品信息。接下来在 mysql_connect.js 文件中添加如下代码。

接下来创建路由脚本文件 hnf.js，并添加下面的代码：

接下来在 app.js 中使用下面的代码注册 hnf 路由。

6. 动态显示轮询图

现在修改小程序端的代码，在这一部分会在小程序端通过 wx.request 函数访问上一部分创建的路由，并根据返回数据动态显示轮序图。在 index.js 文件的 onload() 函数中添加下面的代码。

7. 实现导航按钮布局

在轮序图下方是一排导航按钮，效果如下图所示：

导航按钮的布局代码需要添加到小程序工程的 index.wxml 文件中。接下来在 app.wxss 文件中添加如下的样式，其他布局也会用这个样式，所以将该样式添加到全局的 app.wxss 文件中。

在 index.wxss 文件中添加样式代码，每一个按钮占整个宽度的 11%。导航按钮也是动态显示的，数据依赖于 ngationData 变量，可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确，记住，这只是用于测试的代码，在后面的布局会用动态的数据替换这些实验数据。

8. 动态显示导航按钮

本节会在服务端从数据库中获取导航按钮的数据，客户端会根据这些数据动态显示导航按钮。

首先切换回 WebStorm，在mysql_connect.js文件中添加如下的方法，该方法用于获取商品类型，也就是导航按钮数据。有多少个商品类型，就显示多少个导航按钮。

在服务端创建一个 type.js 路由文件，在 app.js 文件中添加代码注册路由。切换到小程序端，在 index.js 文件的 onLoad 方法中添加下面的代码。

9. 显示、畅销商品

在小程序首页下方通过列表显示了、畅销商品，与轮询图显示的商品类似，此处只是为了演示列表的使用。

10. 显示商品详细信息

本节显示了显示商品详细信息的布局，首先在小程序端创建 shopinfo.wxml 布局文件，并输入下面的代码。

接下来在 shopinfo.wxss 文件中输入代码，***终显示的效果如下图所示。

一、小程序的“入口”在哪儿？

1、只有访问过的小程序，才会出现所谓的「入口」。

所有访问过得小程序都可以从微信首屏下面的「发现」点过去。（必须是版微信）

这个所谓的「入口」，其实更像是一个小程序访问历史记录，并且还是根据「访问时间」排序。目前，这个入口并非所有用户都有，有的人需要在使用过几款小程序后才会出现。

2、目前小程序可在微信聊天页面中置顶或分享。

但如果是在聊天页面中置顶，只能置顶一个小程序，并且是一次性的，当你从聊天界面点击过去，这个置顶就会消失。

二、如何发现新的小程序？

1、基于关键词搜索

在凌晨小程序刚上线的时候，不少人反应的“小程序只支持模糊搜索”。

比如，冯大辉提到：你搜索「小密圈」是搜索不到小密圈的小程序的，要搜索「小密圈 」才可以。

截止到现在，四个小时过去，微信已经对搜索做出了一定优化。

现在即使用户只知道关键词，也可以搜索到包含关键词的小程序。比如说刚提到的的小密圈，没有符号也是可以搜索到的。

并且，还能根据输入的关键词，给出更多包含关键词的小程序结果，并标注出哪些小程序已经被使用过。

2、分享推荐

小程序第二个获取通道是微信好友或群聊天的分享。

但目前并不是所有的小程序都提供了分享按钮（如张截图中的毒舌电影就只能置顶，没有分享），并且目前小程序只支持分享到微信聊天中。

所以，在短期内，微信群将成为小程序发声和传播的主要阵地。

3、线下二维码

这一入口，来源于之前张小龙的分享：

小程序是?个不需要安装就可使用的应用，它实现了应用触?可及的梦想，用户扫?扫或者搜?下即可打开应用。也体现了用完即?的理念，用户不用关?是否安装太多应用的问题。应用将?处不在，随时可用，但又?需安装卸载。

可以推测，线下二维码未来必将成为小程序入口中的一部分。微信团队希望通过小程序，让很多线上线下原本难以连接的弱场景能够突破。

但从我们波使用过得小程序来看，小程序的场景化使用尚有欠缺。

二、小程序有啥好的？

小程序不需要进过安装就能使用，并且大多数体积不会超过1M；根据我们测试来看，小程序的响应加载速度普遍已经在原生APP之上。并且，对于滴滴、猫眼等工具型小程序，打开就可以直接触发微信账号***。换句话说，用户获取成本其实大大降低了。

想象一下，当某个商家在小程序中搞了一波活动分享出去，新用户打开分享链接就能看到优惠券，这个推送效率远大于app的通知栏push。因为每一次分享都有可能有新用户在不断加入。

但需要注意的是，亳州社区团购平台系统，小程序本身不具有主动发送消息的功能。

目前来看，小程序的推出，更多的还是想为未来的线下挖掘铺路：以更短的服务路径、更多的使用场景，换取更多的用户，本质上来说，也是流量。

还是举个例子。

比如我们楼下已经实现微信付款的小饭馆，现有的“点单-下单-付款-送餐”这一环节都是需要通过服务员这一中介人。但对于一家普通的餐馆，开发一款app并没有必要，而轻便的小程序是可以的。用户通过扫描这个二维码，就能实现自主点餐。

这一场景化使用，也是一种变相的场景化推广：通过更***的服务获取更多用户。

在各家门店营业额持续上涨的前提下，喜茶的排队人数正在大大减少，排队加价也从20到30元不等，降为10元。

来源 | Tech星球 文 | 侯敏零售老板内参经***转载

喜茶真的用小程序杀了排队吗？

还没有，但也许快了。

零下10度的北京三里屯寒风刺骨，但依然挡不住消费者们在两个商店门口大排长队的热情。这两家店离得不远，一家是上周刚刚进入中国市场的羽绒服品牌加拿大鹅，另一家则是从去年8月就在这里开业的喜茶，开业了487天，排队了487天。

但就在***近，喜茶带来了一个不容忽视的重要信号：在各家门店营业额持续上涨的前提下，排队的人数正在大大减少。

为了解门店新排队信息，2018年12月31日晚7点，Tech星球（ID：tech618）记者走访了北京多家喜茶门店，来到北京三里屯喜茶门店时，看到整个屋子里依然挤满了拿着取茶的顾客，但门口却只有20多位年轻人在排队，相比以前排到大街的人壮观场面，排队情况大大缓解。

酷爱喜茶的小君和她的朋友当时正在排着队，等了一会她们注意到一张贴在玻璃上的二维码，写着「扫码下单，无需排队」，于是等待排队的她们，原地琢磨起了扫码下单。

小君说，这是她次用喜茶GO小程序，但一打开页面就知道怎么用，顺利下单付款后随即撤出逛街去了，等茶做好后，订单会自动提醒她来取，再不用总站着排队，连想上个厕所都不敢动。

但在测试喜茶GO小程序的时候，我们发现北京地区的小程序高峰时段会出现爆单现象，喜茶工作人员的解释是超出了门店运营能力，门店做不过来的时候，就会选择暂时关闭线上订单，缓解订单压力。

门口除了有顾客在排队，记者发现喜茶店门口，依然徘徊着几位」在加价售卖喜茶，但可能是生意不好做，他们已将加价20-30元的代购费，改为加价10元，小程序上线后，很多人直接在路上用小程序下单，到店直接取走就行，就更没什么事了。

记者另外走访了朝阳大悦城店和崇文门店，发现排队情况相较往常，也有所缓解，一个小时内就能拿到订单。

据了解，今年喜茶内部正在进行一场以「解决排队」为目标的技术革命，而背后的工具正是喜茶GO小程序。

- 1 -

小程序排队？

「小程序确实能够帮助我们提高点单效率，减少排队，但***深层的原因在于产能，只有更密集地开店，让消费者更容易获买到产品，让供应跟上需求，才能解决排队。如果一个城市只有一家店，消费者所有的需求都汇集到一家店，那也是没办法用技术去改变的。」

喜茶CMO肖淑琴对记者说，今年喜茶再次加快了开店速度，已经从去年的***80多家，增长到了今年140多家。

但小程序也确实用技术手段，提高了点单效率和用户体验。以前没有线上点单业务的时候，消费者的购物流程一般为：顾客到店，然后排队点单，在点单的时候，需要和服务员沟通糖度、温度、小料，但有时候服务员也会听错、漏听导致下错单，无法做到准确。但有了小程序以后，这一切都可以解决，首先一切沟通在线上完成，干掉了错单率，其次不用排队，门店告知你的时候，茶就已经做出来了，没有排队，只有拿到茶的那一刻。

「这种方便的消费体验和效率一旦上去，便是不可逆转的」。喜茶CMO肖淑琴告诉Tech星球（ID：tech618），自喜茶GO小程序今年5月份上线以来，总用户数已经超过600万，生鲜社区团购平台系统，日活已经达到20万，复购率超过300%，有35%的订单来自线上，在深圳30多家门店的数量优势前提下，线上增长更明显，几乎50%都来自线上订单。

「而我们的推广方式很简单，就是到门店贴一张海报，上面写上「扫码下单，无需排队」，贴完就离开了，不用教消费者自己就知道怎么用」。

但有人会问，担心不担心排队的人少了以后，别人会误以为喜茶不火了，反而影响到生意？

聂云宸曾在一篇文章里提到对年轻消费者的看法，他认为今天的年轻人越来越懒，出门一定要有意义，否则宁愿死宅在家。而且门店的顾客不是靠强拉过来的，不是靠不做小程序不做外卖，而是说你要给他来到店里的意义。有些顾客仅仅只是对产品有需求，就是仅仅想喝一杯茶而已，他只是为了获得你的产品于是很痛苦地离开了家和办公室。你能送到家门口为什么不送？但有些人就是想来到店里坐一坐喝杯茶逛个街，歇歇脚，

而来到店里的喝茶的顾客，对品牌的体验更完整一些。

「所以我们怎么服务到店这群人呢，就是给了他更多的来店的意义，我们还在尽力拿店，北京地区有10家店，但这10家店空间设计都不一样，这就构成一个更优更完整的体验过程。」喜茶CMO肖淑琴说。

线上有外卖和在线点单，线下有不断扩张的门店数量，对聂云宸来说，他这样定义喜茶的门店：「门店是空间，但空间并非仅仅提供座位，而是品牌文化的起点和载体，喜茶不过分追求坪效，每个空间都是一个诠释灵感的过程，将禅意、极简、美学等元素融入门店设计，让喝茶这件事变得更酷」。

不管是到店也好，到家也好，品牌才是喜茶的根本。

「一切的思考来自消费者的习惯，消费者是怎样的习惯我们就去适应他们」，喜茶团队觉得这是一个年轻人的茶饮品牌，就要按照年轻人的消费习惯来走。

- 2 -

粉丝600万，复购率300%

喜茶与小程序的故事，起始于2017年年末。

***喜茶曾想过把小程序外包出去，找第三方合作，但后来发现行不通，不仅是因为外包团队无法满足产品需求，更是因为越往后越觉得，开发小程序是个系统化工程，未来还可能成为公司的战略级决策，想清楚后他们便毅然决定放弃外包，从零组建喜茶自己的技术团队。

「我们表面上是一个小程序，但其实拆分成了几十个项目组，内部看起来在做小程序，但其实涉及到供应链、营运、市场、财务，会员，每个项目都有对应的开发进程。」陈霈霖在接受Tech星球采访时说道。

陈霈霖认为小程序***难的不在于技术，而是人性，这是一个对内部流程打乱重新梳理的过程，在他那里他早已从一个CTO的角色，变成了互联网产品经理，产品、研发、运营、IT公司各个领域他都要对接，随之而来的，是要解决的是技术背后带来的公司流程和习惯的变化。

「有很多人觉得开发小程序很简单，但这其实是一个很大的误会，小程序只是一张脸，心肝肺肾都还需要靠自己，很多人都把它误以为是技术，但技术只是工具，小程序更在乎的是你的运营能力，只有运营策略的人，才知道怎么用好这个小程序。」

***早的喜茶小程序，只规划了一个电子菜单，后来经过团队内部的无数次思想碰撞迭代，才有了现在的喜茶GO小程序。

3月份喜茶版小程序正式内测，5月份，***大多数门店正式推出喜茶GO小程序，但令人惊喜的地方有很多，一是这个集堂食、预约、外卖于一体的小程序让喜茶门口等待的长队慢慢消失了，二是大大增加了订单量，与此同时，小程序上的微信***功能也令门店以往经常出现的人力收银出现错误的情况消失了，数据上传后端，对账也变得简单，门店的经营效率大大提升，公司也不再需要庞大的财务人员，节省了人力。

7个月后在「零成本」的低调推广下，小程序就吸引了600万客户，复购率翻到了300%。

除此之外，小程序还让喜茶更懂用户「以前只知道门店会来多少客人，但不知道顾客是谁，多大年纪，喜欢喝什么，有什么喜好，这个用户画像是不清晰的，但有了小程序以后，就可以更精准地获取用户画像，更好地服务他们，营销也能更精准。」喜茶CMO肖淑琴表示，小程序对整个企业的运营很有帮助，可以在预计门店的销售量、物料采购、食材原材料采购、新品***销量预估等方面，帮助提升整个企业的运营效率。

而在传统餐饮行业谜一样的复购率，也因为小程序，变得非常清晰。「用户通过小程序购买，购买多次的信息也很容易看到」。

- 3 -