详解原生小程序架构及同构方案

​最近实习中参与了H5项目向小程序迁移的工作，在微信官方文档和一些帖子上学习了小程序运行机制和底层原理，以及与Web页面的区别，在此基础上又看了一些关于小程序同构方案的内容。以下是我个人的一些学习总结。本文内容参考

1. 微信开放文档

1、小程序是什么？

在小程序诞生前，微信团队开发的JS-SDK使web开发者可以通过暴露的API使用微信原生能力去完成一些事，如调用接口打开微信支付等。针对移动端设备网络状态不稳定导致的白屏问题，微信又推出增强版JS-SDK，也就是“微信 Web 资源离线存储”，但在复杂的页面上依然会出现白屏的问题，原因表现在页面切换的生硬和点击的迟滞感。这个时候需要一个JS-SDK处理不了的，使用户体验更好的一个系统，即小程序。

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

其本质是运行在webview上的H5应用，但与H5又有着本质上的不同。H5可以理解为运行在移动端的web页面，本质还是由HTML+CSS+JS构成的web应用。小程序和H5的区别也就是小程序和网页的区别。

2、小程序与普通网页开发的区别

小程序与普通网页开发是有很大差别的，这就要从它的技术架构底层去剖析了。还有比如习惯Vue，react开发的开发者会吐槽小程序新建页面的繁琐，page必须由多个文件组成、组件化支持不完善、每次更改 data 里的数据都得setData、没有像Vue方便的watch监听、不能操作Dom，对于复杂性场景不太好，之前不支持npm，不支持sass，less预编译处理语言。

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网