社区团购系统-小区社区团购平台小程序-平邑社区团购平台小程序

之前你可能还不明白微信小程序究竟是什么？但是现在生活中就会经常接触到小程序了。

小程序是什么？

它是一种在微信里不需要安装即可使用的类似应用市场APP的应用。

根据微信表述和小程序的技术接口来看，小程序其实就是个功能丰富、操作简介的轻应用。不同的小程序，能实现不同的功能。

例如：买电影票、餐厅排号、餐馆点餐、查询公交、共享单车。打车、看新闻、网购等等，平邑社区团购平台小程序，甚至论坛都可用小程序来实现。

小程序为什么火？

1.小程序是强流量入口、小程序是未来商业竞争的主战场。（微信是目前的移动端流量入口，日活跃用户超过10亿）

流量在哪里，企业客户就自然在哪里，现在每天都会有成千上万家的企业推出自己的小程序，且微信搜索结果无论是现在、还是未来，小程序都因为可以满足各种应用场景，一定是权重很高的应用。

2.小程序可以轻松获得用户数据

有了小程序，用户直接扫描二维码便能关联***店***的小程序，商家能通过小程序后台管理界面清楚掌握。无论是微信聊天，还是交流，发朋友圈，随手一个小程序发出去，就直接连接了用户，获得了流量。

2.小程序可以轻松获得用户数据

有了小程序，用户直接扫描二维码便能关联***店***的小程序，商家能通过小程序后台管理界面清楚掌握。无论是微信聊天，还是交流，发朋友圈，随手一个小程序发出去，就直接连接了用户，获得了流量。

张小龙今天明确了微信小程序正式跟用户见面的时间——1月9日，同时他解释称，小程序就像PC时代的网站，不需要下、安装，信息触手可及，用完即走，无需卸载。

“小程序非常接近于PC时代的网站的服务，网站服务不同于公众号，它更直接。大家想象一下，把小程序看作是PC时代的网站的话可能更好理解。”张小龙说。

2017微信公开课Pro版今天（12月28日）在广州举行，张小龙在一个多小时的主题演讲中，详细阐述了小程序的由来。他花了很大的篇幅回顾PC时代信息触达用户的是通过搜索框，而公众号则是通过二维码。

张小龙说，小程序主要铺的是线下使用场景，比如在公交车站，生鲜社区团购平台小程序，你扫一下公交站牌的二维码就可以了解下一辆公交车到站的时间，你在汽车站，扫一下汽车站的二维码就可以购买车，而不需要排长队。

小程序融合了PC时代搜索网站的优点和微信二维码的特性，但在手机上的体验要比搜索框更佳好，也不需要你为了获得一个服务而必须去关注这个公众号。

张小龙说，小程序是满足用户一个特定的需求，这个需求必需是真实存在的。

他说：“我们刚才回顾了PC这些年的变化，没有PC的这些年代，企业是很难不通过互联网提供服务的。举了个例子。绝大多数的企业没有那么能力开发一个程序放在PC上，到了互联网时代才改变。

在PC互联网的时代里面，改变世界的不是用更多的应用程序，而是更多的网站，也因此诞生了很多伟大的互联网公司。

移动互联网时代，绝大多数的企业做手机端的APP，推荐用户下他们的APP，但现实并不是他们想象的那样。用户使用了更便利的使用方式，但也是***繁琐的使用方式。用户只会用那么几个APP，而不是手机里装的那么多全部使用。

在PC时代，用户可以在网页间快速切换的。但是在智能手机时代，很多人打开浏览器的频率越来越低。

移动互联网时代对很多企业提出了一个挑战，智能手机时代反而没有像PC那个时代那么方便了。直到公众号出来后，大家会发现，它是比你开发APP更便捷的方式。

公众号的出现也是我们特别高兴的事情。因为即使PC互联网时代，他们也没有办法把服务搬到网上让人们访问。

公众号的缺陷也让我们很不高兴，在于它是基于订阅和推送的关系。

一个网站并不需要推送消息，但你都可以访问。从这里可以看出来，小区社区团购平台小程序，移动互联网时代，很多企业缺少一个有效的载体，反而不如PC时代方便。

这样一种载体我认为是他拥有很强的需求，市场空白的一个地方。所以在我们构思小程序的时候，一直在想，它的位置、未知在哪里。”

他举了个例子，说他有一次去深圳的时候在深圳机场看到一个有趣的广告牌，它的广告牌每一个上面都有一个微信公众号二维码。80%的广告牌都是这样。

“在PC时代，广告商会在广告牌上印一个网站链接，这也成为PC时代的标配，现在是公众号，取代了以前的网址。”如果你觉得张小龙是在沾沾自喜就大错特错了。

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

前言

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

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

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

页面复杂度还是比较高的，生活社区团购平台小程序，包括了：

① 弹出层

② 页面跳转

③ 缓存

④ 数据请求

⑤ 列表页、滚动分页

⑥ ……

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

小程序的布局

为什么不使用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类的提示组件都比较简单，而我们看看小程序提供了哪些组件呢：

容器类组件

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