从0开发《工程测绘大师》小程序之什么是微信小程序篇（一）

我们今天来讲讲如何从0开发《工程测绘大师》小程序之什么是微信小程序篇。先来说说什么是微信小程序，什么是微信小程序？为什么会有微信小程序诞生？它到底解决了什么痛点？与传统的网页开发和APP相比有什么优势？

微信小程序，是小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序个概念首先被张小龙提出早在2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」。

在2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供微信小程序在云端服务器的技术方案。
在2017年1月9日0点，万众瞩目的微信第一批微信小程序正式低调上线，用户可以体验到各种各样微信小程序提供的服务。

2017年12月28日，微信更新的 6.6.1 版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」，你可以通过「微信小程序」找到已经玩过的小游戏。相信大部分人都玩过小游戏跳一跳当时我记得特别的火爆，后来微信小程序也就越来越被大家知晓，一直到今天微信小程序的生态是越做越好不断升级更好的能力支持，微信开发者加入的也越来越多已经有好几百万的开发者，我也很荣幸能成为其中的一员。

微信小程序的推出带动了整个应用开发行业的升级可以说在传统的APP开发中抢到l一个大面包，目前百度、阿里等公司也纷纷推出了自家的小程序平台。微信小程序打开了更多细分垂直领域的创业机会，小程序背靠微信9.8亿月活跃用户海量流量，越来越多黑马创业者脱颖而出，创业变得更为简单。从小程序发布至今，微信围绕着小程序释放了很多能力和入口，并且将代码包从4M变成了8M又从8M变成如今的16M（如下图1-1），每一次更新都是一次巨大的优化。小程序还可以在Windows和Mac中使用而且支持越来越好（如图1-2）

图1-1 小程序包大小

图1-2 Windows中的小程序

而且小程序对PC端的适配（图1-3）也在逐渐完善，之前小程序的扩展能力中还没有多端适配这一栏不过近期已经推出，我经常会被微信团体邀请内测微信内测版，里面大多都是更新和完善在小程序和小游戏方面的内容，相信他们会越做越好。

图1-3 Windows中的小程序

细心的盆友会发现（图1-3）右下角的云开发能力，的确目前小程序又推出了云开发（serverless），引用官方的话所就是，“开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。”通俗一点来说就是你完全可以一个人开发出全栈的应用，你无需自己搭建服务器无需运维无需后端开发人员省时又低成本，在前端你就可以操作数据库、存储、云函数、云调用（图1-4），云开发还有一个好处就是免鉴权你无需验证就可以调用。图1-5 展示了云开发的后台管理，这个管理我们可以很容易在微信开发者工具云开发打开，如何申请注册小程序我会在下一篇进行讲解。

图1-4 图片来自官方网站

图1-5 来自微信开发者工具截图

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，

如表1-1所示。

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。下面是微信开发者工具的截图，我们将在下一篇详细讲解如何申请小程序的流程。那么微信小程序与传统的网页和APP有什么优势呢？

小程序与传统APP相比的优势：

1. 小程序开发成本比APP低

2. 小程序获客成本远低于APP

3. APP开发周期长，试错成本高，而小程序符合快速创业的精神，降低创业门槛

4. APP生态体系已饱和，APP store排名竞争激烈，而小程序属于新生事物，发展空间充满无限想象

5. APP主要针对线上用户，线下引流成本相对比较贵；而小程序则可以将线上和线下场景相互连接，二维码这种高频率推广方式，既可以在线上吸引流量，又可以放在线下吸引流量，况且用户不可能随时随地地下载APP，而小程序却可以做到不受时间、地点和手机内存的限制，推广起来方便、成本低，接受度高。

小程序与H5相比的区别：

1. 运行环境不同

运行环境是浏览器，小程序运行环境是非完整的浏览器，是基于浏览器内核完全重构的一个内置解析器，并针对小程序做了专门优化。配合自定义的开发语言标准，大幅提升力小程序的流畅度和性能，所以，本质上来说，H5是浏览器页面，而小程序是一种计算机程序。

2. 开发成本不同

当我们开发一个H5的Web需求时，我们需要对开发工具前端框架，模块管理工具，任务管理工具进行周到的考虑，同时还要考虑到UI库的选择，接口调用工具浏览器兼容性等问题。尽管大多数开发者面对这些工具时，都有了自己的配置模板，但成本依然是不低的。而当要开发一款小程序时，微信已经提供了统一的开发工具，并且规范了小程序的开发标准，所以作为一个开发者，你只需要专注写代码就好了，而且你可以随意地调用微信开发里的API，不用担心浏览器的兼容性，也不用担心莫名其妙的BUG，所以小程序的开发成本要比H5开发的Web低的多。

3. 系统权限不同在微信里，能获取更多的系统权限，如网络通信的状态，数据缓存的能力等，这些系统级的权限，都能够与微信小程序无缝衔接，而H5Web应用则相对少了很多，而这一点恰恰是H5Web应用经常被诟病的地方，也因此H5的大多数应用被圈定在业务逻辑简单，功能单一的范围上。

4. 用户体验不同我们打开一个H5页面的时候，实际上就是打开一个Web网页，而网页在浏览的时候需要在浏览器中进行渲染，这个过程叫加载，无论加载的时间有多长，都会给用户一种卡顿或者不灵敏的感觉。小程序是微信内的云端应用，通过双向通信、本地缓存以及微信底层技术优化，实现了小程序接近APP的体验，所以在使用小程序的时候，同等网络条件下，几乎不用等待，可以像操作普通APP一样流畅。

相信小程序生态会越来越好，也希望开发者能加入到微信小程序这个大家庭中来打造更好的产品。

图1-6 来自微信开发者工具截图

-END-
-预告-
以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之超级详细注册篇