local.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>本地网页</title>
  7. <style type="text/css">
  8. .btn {
  9. display: block;
  10. margin: 20px auto;
  11. padding: 5px;
  12. background-color: #007aff;
  13. border: 0;
  14. color: #ffffff;
  15. height: 40px;
  16. width: 200px;
  17. }
  18. .btn-red {
  19. background-color: #dd524d;
  20. }
  21. .btn-yellow {
  22. background-color: #f0ad4e;
  23. }
  24. .desc {
  25. padding: 10px;
  26. color: #999999;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <p class="desc">web-view 组件加载本地 html 示例,仅在 App 环境下生效。点击下列按钮,跳转至其它页面。</p>
  32. <div class="btn-list">
  33. <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
  34. <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
  35. <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
  36. <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
  37. <button class="btn" type="button" data-action="switchTab">switchTab</button>
  38. </div>
  39. <p class="desc">网页向应用发送消息。注意:小程序端应用会在此页面后退时接收到消息。</p>
  40. <div class="btn-list">
  41. <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
  42. </div>
  43. <!-- uni 的 SDK -->
  44. <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
  45. <script type="text/javascript">
  46. document.addEventListener('UniAppJSBridgeReady', function() {
  47. document.querySelector('.btn-list').addEventListener('click', function(evt) {
  48. var target = evt.target;
  49. if (target.tagName === 'BUTTON') {
  50. var action = target.getAttribute('data-action');
  51. switch (action) {
  52. case 'switchTab':
  53. uni.switchTab({
  54. url: '/pages/tabBar/API/API'
  55. });
  56. break;
  57. case 'reLaunch':
  58. uni.reLaunch({
  59. url: '/pages/tabBar/API/API'
  60. });
  61. break;
  62. case 'navigateBack':
  63. uni.navigateBack({
  64. delta: 1
  65. });
  66. break;
  67. default:
  68. uni[action]({
  69. url: '/pages/component/button/button'
  70. });
  71. break;
  72. }
  73. }
  74. });
  75. document.querySelector("#postMessage").addEventListener('click', function() {
  76. uni.postMessage({
  77. data: {
  78. action: 'message'
  79. }
  80. });
  81. })
  82. });
  83. </script>
  84. </body>
  85. </html>