随着小程序支持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全局调用即可,如下:
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);
});