小程序与H5如何混合开发及WEUI那些事

随着小程序支持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);});

小程序与H5如何混合开发及WEUI那些事相关推荐

小程序与H5及混合应用测试
小程序.H5以及APP混合测试一.为什么要学小程序测试主流应用形态:1.原生APP(nativeAPP).应用市场,包括Android.IOS 2.小程序 3.H5 -- 相比上面2种形态真实使用 ...
web前端学习（三）：微信小程序基于H5规范，开发Android应用程序
前言: 微信小程序开发框架的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 整个小程序框架系统分为两部分,逻辑层,视图层,小程序提供了自己的视图层描述语言, WXM ...
uni-app开发微信小程序，H5 关于压缩上传图片的问题
文章目录前言一.为什么要压缩图片二.图片压缩方式 1. 微信小程序 2. H5 总结前言关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
uniapp开发：瀑布流灵活配置简单易用兼容vue2vue3小程序、H5、app等多端
概要支持的平台使用方式属性说明事件说明组件方法 refresh的使用示例隐藏单项图片示例完整示例温馨提示关注我,不迷路概要 custom-waterfalls-flow是一个瀑布流 ...
Vue项目快速输出到小程序、H5
uni-app是基于Vue的前端框架,开发者遵循Vue语法规范,编写一套代码,可同时编译发行到小程序.H5等多个平台:相比其他框架,优势在于直接发行,开发者无需在编译后代码上做二次开发或补充,可直接上 ...
h5 bootstrap 小程序模板_一道面试题小程序与H5的区别
抛砖此文是一道面试题,又不仅仅是一道面试题面试题,在各个技术社区里都是一个永不落伍的话题,好像大多数人临面试前都会狂刷面试题,恨不得把所有面试题都看一遍,要说有用没,当然有用,因为大部分面试题确实 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

小程序与H5如何混合开发及WEUI那些事

小程序与H5如何混合开发及WEUI那些事相关推荐

最新文章

热门文章