258资源分享网

特别说明：本文写作时间为11月份，所以很多内容可能不再适合最新版本，仅供参考；| 导语隐隐觉得有几本书要火《从入门到精通微信小程序》，《微信小程序开发权威指南》，《微信小程序之美 ...

特别说明：本文写作时间为11月份，所以很多内容可能不再适合最新版本，仅供参考； 
| 导语 隐隐觉得有几本书要火《从入门到精通微信小程序》，《微信小程序开发权威指南》，《微信小程序之美》，《微信小程序之道》，《颈椎病康复指南》。。。咳咳，跑偏了，什么？没见过这几本书？那你总听过微信小程序的大名吧，作为移动端的新起之秀，小程序牵动了无数人的目光。作为有幸参与并推动小程序成长过程的团队之一，我们也不能甘（fang）于（qi）落（xuan）后（yao），经过我们几天的努力，这篇微信小程序开发经验分享展现给大家。本篇文章主要就小程序的适配、小程序的生命周期、小程序的架构、小程序的开发以及我们趟过的坑这几点展开来讲。 话不多说上干货（内容比较干，建议大家自备水壶）～

小程序的定义： 
很多人问我，说的这么热闹，小程序到底是个什么东西？下面我先简单介绍一下。

官方这么定义小程序：

“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫活着搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载”。

小程序是一个由微信提供开发组件与开发规则，以js为主要开发语言，最终运行在微信App内的轻量型应用，有着即扫即用的特点。它不是H5，但与H5一样，小程序有着开发上手快、开发成本低的特性；它不是App，却有着同样的流畅度。小程序的出现使前端工程师可触及的领域进一步增大，可谓是迎来了前端工程师的春天～～

我们的小程序： 
小程序的点在一个“小”字，对程序大小要求有限制，对页面嵌套的层级有限制，不适合过于重的交互。小程序不能跳出，不能调起外部应用，消息推送折叠在微信内部，相比于原生App有着很大的局限性。

但是，相比于H5，小程序又有着不可忽视的优势，固定化的入口，丰富的组件，系统控件的接口权限，接近App的使用流畅度，微信强大的生态圈...

结合上面两点，我们认为：小程序＝固定入口＋有体系的H5

根据这一点，我们仔细斟酌，提炼出体育用户的核心诉求，将体育小程序的第一阶段功能定位为赛程查询、数据、资讯推送，第二阶段的功能定位为视频点播、个性化提醒（关注、预约、定制）。

众所周知，微信App运行在Android、iphone、iPad等多种屏幕尺寸和分辨率的设备上，不同终端的微信小程序用的是同一套代码，需要照顾到一个“小程序”在多种不同大小屏幕的使用体验，所以在设计排版时推荐栅格式排版。而在代码实现方面，微信官方比较推荐用Flex、rpx来实现小程序的适配。 

Flex布局是2009年，W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

rpx单位是小程序中css的尺寸单位，可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。如iPhone6的屏幕像素为375px，则750rpx＝375px，1rpx＝0.5px。同时小程序也支持rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。 

Flex与rpx搭配可以解决大部分的适配，但遇到极端宽高比的情况，就需要变动元素的排放位置。而小程序不支持Media Query，那就要通过js来进行不同样式的切换。小程序里获得屏幕宽高的接口是异步的，实现响应式布局尽量在app.js里尽早执行防止页面抖动。