uniapp+h5---进行混合开发
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端。
打完收工!