微信小程序怎么用-小程序-微企邦业务4部

微信借助小程序干掉的不是AppStore，而是连接所有落地场景的app。可以想像，未来的智能手机上，用户只要安装一个微信就够了——这才是让苹果和整个业态高度关注的真实原因。

需要再次强调的是，开发者小伙伴们不要把小程序视为纯粹的互联网产品。小程序的用户都是存在于现实生活场景中的，而非存在于虚拟的互联网中。这是小程序和其它互联网产品的区别。关于现实生活场景衣食住行，我们将展开想象，看看小程序在衣食住行上能会有什么玩法花样。

食

相信各位小伙伴都已经用微信公众号体验过类似的功能了：当你走进一家餐馆，不需要服务员要菜单，直接扫描自己桌子上的二维码就能完成选餐、点餐、付款等一系列动作。有了微信小程序，这个过程将变得更加快捷，用户既不需要关注商家的公众号，也不用经过繁琐的***过程，直接就能打开菜单进行点餐。

在小程序出来之前，很多线下的商业场景，其实试图通过微信服务号来提供低成本，便捷的解决方案。

到店微信点餐其实就是一个非常典型的场景。虽然很多服务商都做了微信点餐的方案，但是其实，微信的方案，在很多饭店，使用的并不好。服务号是H5来实现的，每一步，都需要载入，流畅性体验会很差。任何一种线上的场景，如果用户体验很差，小程序，自然就无法继续流行下去，客户的行为也会影响商家，所以比较大的商家（譬如海底捞）更倾向于使用保证用户体验的本地网络 APP的解决方案。

肯德基也在批小程序内测邀请之中，为了解决排队难的问题，在已有的人工服务台之外，扫描二维码，完成自助点餐服务。可以预见点餐一体机制造商将迎来一轮洗牌，同时你的手机中又少了一款大小20-30M的 App，延伸线下场景消费，我们大概可以知道诸如保洁、美甲、洗车、打车等等O2O业务的App都将被以二维码为入口的小程序所取代。

小程序由于是在本地执行，体验会非常的流畅。并且，点餐入口，都是由贴在桌面上二维码，用户需要时，可以随时呼出小程序。所以，点餐是小程序一个非常有代表性的应用场景。难怪张小龙在演讲时，举的个例子，就是微信小程序点餐的场景。

行

从功能上来看，共享单车类原生应用除了具备借车、***等功能外，往往还有一些附带的健身类功能，譬如里程统计、卡路里计算等，未来还有可能做运动社交。但共享单车的小程序功能点就非常集中——扫码、***、提车、锁车。用户只需要在用到共享单车时扫一扫二维码，不需要更复杂的额外功能。在这种使用场景下，小程序调用方便、启动迅速等优点会被放大，带给用户更好的体验。在无WIFI环境下，假如只需要1M的流量，那用户会果断扫码骑走。APP 小尺寸=微信小程序。摩拜单车“触手可骑”的理念和小程序“触手可得”的理念不谋而合，堪称绝配。

在公交站里面等公交站的时候，想要知道下一班车什么时候来，这个时候只要扫一下公交站的二维码，启动公交站的小程序就可以看到下一班车什么时候来，这都是特别典型的一个小程序的场景。

线下门店提供二维码，使用小程序可以降低获客成本，直接在小程序内查看衣服款式分类，是否符合自己品味，再进店试衣，有喜欢的款式可分享给好友，买单无需注册会员，直接后台记录，多买多享受折扣等等。

进入美发店，扫码获取预订信息，还可以挑选发型种类，查看发型师资料，***后完成***，喜欢的话还可以分享给好友，获取优惠券。

基于LBS小程序提示，出门在外不小心挂坏了衣服，断了鞋跟，立马搜索附近的裁缝店，及时补救。

住

在小程序上实现一些与线下资源搭配的创新短流程场景，例如：房间扫码锁。APP 低频使用场景 更小尺寸=微信小程序；公众号 硬件搭配场景=微信小程序。在酒店门口扫码就能获取预定信息，酒店评价，还能查询周边攻略，目的地游记等等。

家居商店，扫码提供家居详细信息与相关搭配，显示尺寸与价格还有配送信息，也极其便利。

小程序有无限的可能，但也并不会包囊所有，这几个行业是小程序需求之外的：

一个游戏

刀塔传奇、天天酷跑、消消乐，等等。图形处理能力是小程序的劣势，小程序只能做做小游戏（做个贪吃蛇还是可以的）。

一个系统工具

迅雷，美图秀秀，腾讯地图，百度云盘，等等。系统工具需要原生操作系统接口、硬件接口的支持，这方面小程序能做的事情很有限。

一个社交工具

陌陌、微博。先不考虑功能是否可以实现，在腾讯生态下做社交肯定不行。

一个OA、ERP、CRM

在企业管理软件领域，OA、ERP、CRM这些都是“大”的代名词，这很小程序的“小”是冲突的。小程序可以做OA中的某一个场景化的流程（例如打卡签到），但无法将一整个完整的企业管理应用搬进小程序。

有时候，很多人醉心于技术的细节，有些人忙于空泛的营销。却恰恰忽略了一个新事物存在的本质。小程序不是要取代什么，微信小程序是什么，也不是要颠覆什么，其实它就是一个工具。

前面我们研究了下微信小程序的执行流程，因为拿不到源码，只能算我们的猜想，我们需要更加了解小程序还需要做具体的项目，于是我们将原来那套还算复杂的业务拿出来：

前言

前面我们研究了下微信小程序的执行流程，因为拿不到源码，只能算我们的猜想，我们需要更加了解小程序还需要做具体的项目，于是我们将原来那套还算复杂的业务拿出来：

【组件化开发】前端进阶篇之如何编写可维护可升级的代码（https:///yexiaochai/p/ml）（有些晦涩有些乱，但是对于整体了解小程序结构有帮助）

我们用小程序实现这里的代码，看看是个什么样的体验，另外我这里想保证代码程度重用，为后续一端代码四端运行做前驱探索。

页面复杂度还是比较高的，包括了：

① 弹出层

② 页面跳转

③ 缓存

④ 数据请求

⑤ 列表页、滚动分页

⑥ ……

我相信完成了这个例子，我们对小程序业务代码怎么写会有比较好的了解，于是让我们开始今天的代码吧。

小程序的布局

为什么不使用HTMLamp;CSS

微信小程序这种平台型的超越Hybrid系统诞生还是有一些客观条件的，其中一个就是移动端的应用相对来说简单的多，想想PC负责的布局，如果要使用小程序实现，那么复杂度会提高很多。

小程序代码编写逻辑层依旧使用JS完成，但是结构层以及样式层推出了：

① WXML，Weixin Markup Language，是微信设计的一套标签语言，与HTML类似，做过Reactamp;Vue的同学会非常熟悉

② WXSS，WeiXin Style Sheets，是一套样式语言，用于定义样式，与CSS类似，一般认为是CSS的子集

因为小程序中UI组件都是Native实现，所以小程序直接手起刀落压根放弃让我们使用HTML容器，这样做我觉得有个好处是：

为了更好的限制，我之前也在做Hybrid乃至前端框架，一般来说我会限制到View级别的实习，要求必须按照我的规则做，但是因为入口为ml文件，我甚至将全局控制器App的实例化放到了main.js里面，只提供了建议的做法，事实上HTML还是太过灵活，有些同事逐渐根本不按照我们的规则玩，他觉得他的做法更好，但是这样一来便会***了项目的总体性，后续的工程性的优化或者监控可能就不能帮助他了，从某个角度来说，我是认可小程序的做法的。

我们之前在这里研究过自定义标签的做法：从DOM操作看Vueamp;React的前端组件化，顺带补齐React的demo

从这个文章以及小程序的实现可以看出基本的概念：

① 标签的出现根本不是做标签用，而是为了让JS执行相关逻辑，***后生成真正的标签

② 为了做更好的限制，小程序根本不提供入口ml文件了，所以这里的标签是用作JS做模板解析后生成Native能识别的代码，更具体点说是，Native实现了一个组件，组件有很多规则，可以使用JS去调用，正如我们这里的header组件调用逻辑（JS会设置Native的Header组件展示），这里如果不太清晰可以参考下这个文章：浅谈Hybrid技术的设计与实现第二弹

当然，小程序底层具体是不是这么做，我们不得而知，如果有小程序的同事，可以指导下：），至此，我觉得可以从技术层面说明为什么不直接使用HTMLamp;CSS了：更好的业务限制 方便JS解析模板被Native执行。

小程序组件

我们之前做Hybrid应用的时候，事实上只提供了一个真正具有结构的组件Header，其他loading类的提示组件都比较简单，而我们看看小程序提供了哪些组件呢：

容器类组件

viewamp;scroll-viewamp;swiper等作为容器组件存在，这里有基本介绍，我们这里看看其中一个即可：

这里给了一个demo进行说明：

lt;view class="section"gt;

lt;view class="section__title"gt;flex-direction: rowlt;/viewgt;

lt;view class="flex-wrp" style="flex-direction:row;"gt;

lt;view class="flex-item bc_green"gt;1lt;/viewgt;

lt;/viewgt;

@import "../lib/weui.wxss";

.page-section{

margin-bottom: 20rpx;

}

.flex-wrp {display: flex;}

.bc_green {background: green;width:100px; height: 100px;}

.bc_red {background: red;width:100px; height: 100px;}

.bc_blue {background: blue;width:100px; height: 100px;}

可以将这个标签理解为div类组件。

swipe

一般来说，Native提供的轮播图体验要好得多，所以这里也提供了一个Native的组件：

lt;view class="container"gt;

lt;view class="page-body"gt;

lt;view class="page-section page-section-spacing swiper"gt;

lt;swiper

indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"

interval="{{interval}}" duration="{{duration}}" previous-margin="{{previou***argin}}px"next-margin="{{nextMargin}}px"gt;

有demo有代码，还是比较清晰。

在各家门店营业额持续上涨的前提下，喜茶的排队人数正在大大减少。***排队加价也从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 -