test.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7. <title>web-view</title>
  8. <style>
  9. html,
  10. body,
  11. .map {
  12. width: 100px;
  13. height: 100px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="map" tabindex="0">
  19. <button class="btn btn-red" type="button" data-action="switchTab">switchTab</button>
  20. </div>
  21. <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件 -->
  22. <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
  23. <!--uni SDK 一定要引入 -->
  24. <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
  25. </script>
  26. <script type="text/javascript">
  27. // 在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。
  28. document.addEventListener('UniAppJSBridgeReady', function() {
  29. console.log("11111111111");
  30. document.querySelector('.map').addEventListener('click', function(evt) {
  31. console.log("2222222");
  32. var target = evt.target;
  33. if (target.tagName === 'BUTTON') {
  34. var action = target.getAttribute('data-action');
  35. if (action === 'switchTab') {
  36. uni.webView.navigateTo({
  37. url: '/pages/info/add?id=1'
  38. });
  39. }
  40. }
  41. });
  42. });
  43. </script>
  44. </body>
  45. </html>