随着小程序支持HTTPS网页嵌入，小程序与H5页面混合开发将是大势所趋，就如同现在APP开发一样亦是混合开发，部分功能使用H5页面实现，至少有如下2个好处：
1）、解决小程序审核等待问题：只要修改WEB页面即可，无需发布审核，这里需要注意小程序Web-View组件的缓存问题。如果不做特殊处理，即使WEB页面已经更新，可能看到的还是老页面。
2）、解决页面公用问题：尤其当小程序调用一部分已有功能时、或多个小程序需要重用模块时，使用Web-View组件调用WEB页面是个好选择。
另外，腾讯已经为小程序混合WEB页面开发提供了2件利器：WEUI和微信JSSDK。那么，小程序与WEB页面如何有效混合开发呢？个人认为无非解决2个问题：
1）、了解小程序和H5差异，明确哪些功能用小程序实现，哪些功能用H5开发；
2）、统一认证及统一UI问题。
一、小程序与H5开发差异及小程序和H5功能划分问题
1、小程序与H5开发差异
1）js使用限制
处于安全考虑，凡是通过传入字符串来执行代码都被禁用了，具体有：new Function, eval, Generator，如常用的通过eval把json字符串转json对象就不行啦。当然直接好处是基本上可以规避html页面由于动态执行js导致的xss安全问题啦。
由于小程序并非运行在浏览器中，因此不能操作document, window等浏览器对象，当然也不能操作cookie。
2）小程序相比H5的改进优化
小程序提供storage支持同步、异步，比H5的localstorage、sessionstorage跟好用。由于js使用限制，安全性较H5页面高，由于不能使用cookie因此也无需考虑浏览器禁用cookie问题。
3）小程序相比H5的劣势
打开的页面有5个限制，链接深度为5个页面，超过5个页面，后续页面跳转不会响应。不能操作dom，页面灵活性差。WXSS较原生CSS而言做了一定程度的阉割，如没有*，:link, :visited, :hover, :not等选择器，不支持运算符等。
2、小程序与H5的功能取舍
这个很难统一定论，不同项目应有不同取舍标准，关键在于我们是否明确小程序与H5各自的长短处。
二、统一认证及统一UI问题
统一认证无非就是WEB服务器如何识别来自小程序的URL请求是合法请求问题，诸如accessToken认证等已有很多实现，本文不再赘述。至于UI统一问题，UI前端团队不是很强的话，强烈建议使用WEUI，一贯的微信体验，并有Toast、Loading框等常用的JS组件。
WEUI，是腾讯提供的一套微信风格的UI框架，包括：WEUI-CSS和部分组件JS。
1、WEUI-CSS
1）github地址：https://github.com/Tencent/weui，WEUI相关资源都可以在此处获取；
2）WEUI-wiki：https://github.com/Tencent/weui/wiki，weui文档，内含Cell，Flex等常用CSS说明；
3）WEUI-DEMO：https://weui.io，建议使用Chrome、火狐等浏览器浏览，方便查看元素；
相比较Bootstrap而言，WEUI文档有点不足，建议大家先阅读wiki，对其常用的CSS组件有些认识，然后再花点时间分析DEMO，最后直接查看weui.css源文件。
2、WEUI-JS
1）github地址：https://github.com/Tencent/weui.js，wiki、代码等都可以在此处获取；
2）文档：https://github.com/Tencent/weui.js/blob/master/docs/README.md，有ActionSheet等常用组件的调用说明；
3）DEMO：https://weui.io/weui.js/，建议使用Chrome、火狐等浏览器查看，方便查看元素、跟踪代码；
相比较WEUI-CSS而言，个人觉得WEUI-JS更容易上手，2步：
1）页面引入weui.css, weui.js文件；
2）通过weui全局调用即可，如下：
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript">
weui.alert('alert');
</script>3）更多组件使用说明，大家参考https://github.com/Tencent/weui.js/blob/master/docs/README.md文档，另外大家也可以参考DEMO中的example.js文件，如显示loading框
/* loading */
document.querySelector('#loadingBtn').addEventListener('click', function () {
var loading = _weui2.default.loading('loading'); // _weui2.default 替换成weui即可
setTimeout(function () {
loading.hide();
}, 3000);
});