小程序与WEB页面如何混合开发及WEUI那些事

       随着小程序支持HTTPS网页嵌入，小程序与WEB页面混合开发将是大势所趋，就如同现在APP开发一样亦是混合开发，部分功能使用WEB页面实现，至少有如下2个好处：
        1、解决小程序审核等待问题：只要修改WEB页面即可，无需发布审核，这里需要注意小程序Web-View组件的缓存问题。如果不做特殊处理，即使WEB页面已经更新，可能小程序打开的还是老页面。
        2、解决页面公用问题：尤其当小程序调用一部分已有功能时、或多个小程序需要重用模块时，使用Web-View组件调用WEB页面是个好选择。

        另外，腾讯已经为小程序混合WEB页面开发提供了2件利器：WEUI和微信JSSDK。那么，小程序与WEB页面如何有效混合开发呢？个人认为无非解决2个问题：统一认证及统一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);
});