做微信小程序-小程序-微企邦业务4部

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

前言

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

【组件化开发】前端进阶篇之如何编写可维护可升级的代码（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有代码，还是比较清晰。

微信开发小程序的理念是“无需安装，用完即走”。在实际的使用过程中，现在的小程序大多界面简洁，功能实用。

在小程序的发展过程中，小程序发展的不只是功能，而是更明确了***和使用场景。小程序的出现，让微信看起来更像一个操作系统，小程序之于微信，就像是APP之于手机。

不过，小程序与APP还是有很大区别的，***重要及***根本的还是理念上的区别：小程序强调的是“去中心化”，APP则需要集中流量。

小程序开发者也从***开始照搬APP的功能开发小程序，到现在背靠着小程序生态开发出更符合的小程序。比如转发获得奖励的的小游戏，微信拼团的拼多多。

此外，低频刚需、刚需高频Lite版应用其实更适合用小程序，既省事、又安静，耗流量低、占用内存小。而且因为在微信里面，换手机也无需重新安装了。

比如摩拜单车、美团，用户使用他们的小程序即可使用，无需APP。

从这个角度上说，小程序可以取代某些APP，但是小程序与APP终究是互补的。张小龙说，两者是不同的应用方式，小程序不是来取代App，而是丰富App的场景。

我们先从用户说起。

虽说APP面向的是所有手机用户，但是安装这一步骤就拦住了许多用户，尤其是中老年用户。APP的用户比微信的用户人群年龄上更小，在微信里面用户年纪较大，他们不会、也不爱装APP。

小程序的“无需安装”的特性决定了它可以接触到年龄更为广泛的用户，举个例子——唱吧小程序。

在没有小程序前，用户的习惯是这样的——我看到我的家人朋友分享了一个唱吧的链接，做微信小程序，点进去，我没有唱吧APP需要，我就放弃了。

但现在，有小程序了，我不用APP也能唱歌、评论、转发，小程序实际上是把一批不太愿意APP的用户

了，相当于借助小程序开拓了一个新的用户群。

除了触及更多用户，小程序还能够“唤醒用户”。在APP上，用户需要更新APP才能够体验到新的功能，而在这个过程中，APP会不厌其烦地发送推送，但是依然难以唤醒用户更新；而微信几乎不存在这个现象，基本不会有人想着屏蔽微信通知，开发者的小程序只需要通过腾讯审核就能立即生效。

从数据上来看，微信公众小程序，小程序更是证明了自己在转化用户上的能力。

拼多多小程序抓住了初期上线的流量红利，仅半年多就获得了超过 1 亿的访问量，做到3亿用户、千亿元年GMV 只用了两年；当大家都在为流量和转化率发愁的时候，蘑菇街仅用三个月就吸引了6000多万小程序用户，单日成交额已达到2016年双十一期间单日的20多倍。

说好了用户，我们再来看小程序的使用场景。

就现阶段而言，微信小程序主要适合一些低频刚需的场景。根据这个特点，微信小程序比较适合点餐场景、工具类产品以及电商类产品。

线下进入小程序的入口就是通过扫描二维码进入。

数据显示，2018年上半年在小程序餐饮用户场景入口分布中，二维码占比，达到28.4%。餐饮小程序的使用场景主要是在线下，因此，扫描二维码进行点餐或领取优惠券等活动成为餐饮类小程序用户的主要需求，例如麦当劳就在2017年12月上线了小程序点餐功能，该功能的上线为麦当劳带来了大量的新会员注册，也大富提升了门店的点餐效率和减少用户排队等候时间。

再来看一个数据。

据《中国餐饮报告2018》显示，2017年我国餐饮业收入达到3.9万亿元，市场规模巨大。美股、港股、A股中的一些市值很高的的餐饮企业，又都具有显著的零售化特征，例如广州酒家，它将近40%的营收是零售化产品。

同时，餐饮行业竞争激烈有目共睹，小程序，我国 2017 年年底比年初新增了311万家餐厅，但餐饮门店的关店数是开店数的91.6%，平均每个玩家的生命周期仅508天。

此外，外卖平台竞争格局逐渐稳定，补贴力度早已下降，每单外卖含7-10块钱的超高物流成本，让客单价 30 元以下的餐品无法支撑盈利。

而如果是餐饮商户自己的小程序则不需要向平台***服务费，能够将这部分成本用在提升自身服务质量上。餐饮小程序不仅可以只用于门店点餐，也可以通过小程序进行外卖下单，还能够帮助商户进行数据经营管理，提升门店经营效率，增加收益。

小程序作为一种新型的轻量级应用，它的出现无疑是给原来已经呈现中心化的移动互联网带来一种新的可能。

张小龙在微信公开课上是这么说小程序的原则：

小程序不为任何场景特殊设计，平台要足够抽象；微信不会以裁判的身份下场，好的小程序要由用户自己发现；小程序在 2018 年要更多的连接线下，搜索、扫码、对话是小程序的「去中心化」流量入口。

小程序的存在对于许多企业来说，是自身产品的延伸，可以将扩大用户基数，通过微信来获取更多的流量；对于线下商户来说，小程序更像是一个生产工具，提升了效率，降低了成本。小程序更是催生了小程序相关的行业，诞生了一大批第三方服务商和无数的商机，小程序上一定有更广阔的机遇和未来，给所有怀抱梦想的人以回应。

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

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

食

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

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

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

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

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

行

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

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

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

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

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

住

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

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

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

一个游戏

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

一个系统工具

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

一个社交工具

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

一个OA、ERP、CRM

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

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