大家好，我是技术部做前端工作的Ryan，关于微信小程序的概念和功能以及它的前景，前边Tim已经介绍的非常详细，而我将以前端的视角为大家介绍一下微信小程序。也就是PPT中看到的：
-
微信小程序与H5的区别
-
微信小程序框架的特性
首先我们简单介绍一下已经风靡很久的H5
HTML5的传统定义：是在HTML4标准的基础上扩展了无数的酷炫功能的新标准，即HTML5。可以看到，HTML4是97年发布的，HTML5直到2014年才制定完成，所以这个历时这么久的标准推出后火爆这么久也是可以理解的。
经过了这么久H5的洗礼，我们眼中的H5大多数时候是指代这些东西：网页小游戏，幻灯片（如易企秀），邀请函等酷炫网页，且能在浏览器、webview中无缝转换。相信PPT上的这些图片都曾经在你的微信中或开发需求中亮相过不止一次
接下来便是我们今天的主角---微信小程序
这里我列了一张表用来对比HTML5与微信小程序之间的主要区别
第一条是运行环境的不同。
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，大家注意，我这里写的是“非完整的浏览器”，有以下几个原因
-
小程序的开发过程中会用到HTML5相关的技术(并非全部)
-
小程序最后的发布上线需要微信审核，微信在不更新自身软件的情况下可以将小程序更新到自身软件内，这就联想到了React Native框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库
-
官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象（基于这一点，像zepto/jquery这种操作dom的库就被完全抛弃了）
所以我个人认为，小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
不过由于微信给开发者提供了开发工具，而开发工具中也内置了编程、调试、开发环境、发布于一身，我们也不用再探讨它的最终运行环境了，只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动，让我联想到了苹果给开发者提供的X-CODE开发工具，可以想象微信的“野心”可见一斑
第二条是开发成本的不同。
这里我提出了一个问题，当我们面对一个HTML5 web开发需求时，我们需要考虑什么呢？抛去开发工具（vscode、sublimtext、Atom等）不谈，大到前端框架（Angular、react、vue、backbone等）、模块管理工具（Webpack 、Browserify 等）、任务管理工具（Grunt、Gulp等），小到UI库选择、接口调用工具（ajax、Fetch Api等）、浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。
而当我们面对一个微信小程序的开发需求时，我们需要考虑什么呢？微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是非常容易的；WXSS、JSON和JS文件中的写法稍有限制，但整体相差不多。在统一了这些标准之后，作为一个开发者，你会发现，自己只要专注写程序就可以了：
-
当需要调用后端接口时，调用发起请求API
-
当需要上传下载时，调用上传下载API
-
当需要数据缓存时，调用本地存储API
-
引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用
-
UI库方面，框架自然带有自家weui库加成
并且在使用这些API时，你不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG，可见微信小程序的开发成本确实相比以往的web开发低很多。
第三条是获取系统级权限的不同。
微信小程序相对于HTML5 web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有Native App的流畅性能，而这一点恰巧是HTML5 web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。
第四条便是应用在生产环境的运行流畅度。
这条无论对于用户还是开发者来说，都是最直观的感受。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立，尽管同样用html+css+js去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。
最后我们看下微信小程序的特性
这里我总结了小程序框架的四个特性
第一个特性是数据驱动。
现在流行的前端框架全部都是数据驱动，几乎已经摒弃了操作DOM的方式，因为大家都发现浏览器中操作DOM是损耗性能的大头，也是前端项目性能提升的瓶颈，因此通过修改数据去重新渲染页面来避免操作DOM，是前端工程化的趋势，那么微信小程序框架采取同样的模式，也无可厚非
第二个特性是开发标准化。
大部分前端工程师，都有自己得心应手的整套工具，大到项目框架技术选型，小到css用less还是postcss进行预编译，都会选择自己比较满意的第三方库，但是在团队协作开发项目时，这些个人特色可能就影响到项目的开发、维护等。微信小程序将开发语言、开发环境、开发工具标准化后，不但提升了开发效率，还提高了项目的可维护性，降低了开发成本，版本迭代加快。
第三个特性是API功能强大。
可以直接使用原生APP的网络通信和数据缓存能力，无缝接入地图、扫一扫等功能,可以想象小程序的应用领域非常广
第四个特性是学习成本低，上手快。
该框架内的基础概念，如模板语法、生命周期、接口调用方法都与当前流行的前端框架基础概念大致相同，所以对于新开发者来说非常友好。
综上可以看出微信小程序确实解决了很多目前开发者的痛点，并给出了不错的解决方案，再加上自己移动端流量大户的buff加成，相信小程序的前景非常可观。
网友评论