uniapp和h5进行混合开发，最近在接手开发微信小程序，在技术选型的时候，拟采用uniapp+h5进行混合开发。
想必为啥要使用uniapp开发，就不用多说了？就是为了进行跨平台开发。如果使用微信小程序的开发方式，开发出来的应用就只能在微信小程序使用，但是使用uniapp就可以多端开发，包括做app等。
那么为啥要混合h5进行开发？原因很简单，需求一直在变，上架后调整很麻烦。比如微信小程序上架，需要单独打包，然后进行上传，然后微信进行审核，最终客户端还需要重新进入微信小程序，才能进行看到。
一些功能的小改动，将会频繁的重复以上的操作，这个时候，我就在想：能不能将uniapp和h5网页进行混合开发，页面的展示使用h5，在微信小程序里面进行预览展示就可以了。这样每次功能的小改动，在h5页面改动，在小程序里面就可以实施预览了。
实现思路：uniapp 只做运行外壳，所有的h5页面使用vue来开发。实现的技术：在uniapp里面使用webview承载网页。
参考文档：
https://uniapp.dcloud.net.cn/component/web-view.html#postmessage
具体功能实现：
首页：
webview页面：
这个页面很简单，相当于将webview单独提出来，框架里面所有需要使用到外部连接展示的，都通过传递参数的形式将连接传递到webview里面进行展示。
另外一个技术实现方式：h5页面如何使用webview进行页面跳转：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>网络网页</title><style type="text/css">.btn {display: block;margin: 20px auto;padding: 5px;background-color: #007aff;border: 0;color: #ffffff;height: 40px;width: 200px;}.btn-red {background-color: #dd524d;}.btn-yellow {background-color: #f0ad4e;}.desc {padding: 10px;color: #999999;}.post-message-section {visibility: hidden;}</style></head><body><p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p><div class="btn-list"><button class="btn" type="button" data-action="navigateTo">navigateTo</button><button class="btn" type="button" data-action="redirectTo">redirectTo</button><button class="btn" type="button" data-action="navigateBack">navigateBack</button><button class="btn" type="button" data-action="reLaunch">reLaunch</button><button class="btn" type="button" data-action="switchTab">switchTab</button></div><div class="post-message-section"><p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p><div class="btn-list"><button class="btn btn-red" type="button" id="postMessage">postMessage</button></div></div><script type="text/javascript">var userAgent = navigator.userAgent;if (userAgent.indexOf('AlipayClient') > -1) {// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {// QQ 小程序 document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');} else if (/toutiaomicroapp/i.test(userAgent)) {// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');} else if (/swan/i.test(userAgent)) {// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');} else if (/quickapp/i.test(userAgent)) {// quickapp document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');}if (!/toutiaomicroapp/i.test(userAgent)) {document.querySelector('.post-message-section').style.visibility = 'visible';}</script><!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 --><script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script><script type="text/javascript">// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() {uni.postMessage({data: {action: 'message'}});uni.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));});document.querySelector('.btn-list').addEventListener('click', function(evt) {var target = evt.target;if (target.tagName === 'BUTTON') {var action = target.getAttribute('data-action');switch (action) {case 'switchTab':uni.switchTab({url: '/pages/tabBar/API/API'});break;case 'reLaunch':uni.reLaunch({url: '/pages/tabBar/component/component'});break;case 'navigateBack':uni.navigateBack({delta: 1});break;default:uni[action]({url: '/pages/component/button/button'});break;}}});document.getElementById('postMessage').addEventListener('click', function() {uni.postMessage({data: {action: 'message'}});});});</script></body> </html>
通过这个h5页面，就可以实现：h5使用webview进行页面跳转。【这个h5页面，仅为功能测试页面，真实开发使用vue来开发】
到这里，其实uniapp的主体框架就已经搭建好了，整体的实现思路就是：所有的展示页面，均在webview里面实现，在h5里面进行页面的跳转。
相当于整体的运行都是在h5里面，uniapp只做打包运行环境，页面和功能及逻辑实现均在h5端。
打完收工！
