Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6079
Star 95
Fork 167
H
hello uni-app x
切换分支/标签
查找文件 普通视图历史永久链接Permalink
local.html 2.7 KB
Newer Older
DCloud-yinjiacheng's avatar
新增web-view示例  
DCloud-yinjiacheng 已提交
1 2 
<!DOCTYPE html>
<html>
H
fix: webview 本地示例无效问题  
hdx 已提交
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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;
      }
DCloud-yinjiacheng's avatar
新增web-view示例  
DCloud-yinjiacheng 已提交
18
H
fix: webview 本地示例无效问题  
hdx 已提交
19 20 21 
      .btn-red {
        background-color: #dd524d;
      }
DCloud-yinjiacheng's avatar
新增web-view示例  
DCloud-yinjiacheng 已提交
22
H
fix: webview 本地示例无效问题  
hdx 已提交
23 24 25 
      .btn-yellow {
        background-color: #f0ad4e;
      }
DCloud-yinjiacheng's avatar
新增web-view示例  
DCloud-yinjiacheng 已提交
26
H
fix: webview 本地示例无效问题  
hdx 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 
      .desc {
        padding: 10px;
        color: #999999;
      }
    </style>
  </head>
  <body>
    <p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</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>
    <p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
    <div class="btn-list">
      <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
    </div>
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="uni.webview.1.5.5.js"></script>
    <script type="text/javascript">
      // document.addEventListener('UniAppJSBridgeReady', function() {
      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({
H
webview: 框架已支持，移除临时写法  
hdx 已提交
57 
                url: '/pages/tabBar/API'
H
fix: webview 本地示例无效问题  
hdx 已提交
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 
              });
              break;
            case 'reLaunch':
              uni.reLaunch({
                url: '/pages/tabBar/component'
              });
              break;
            case 'navigateBack':
              uni.navigateBack({
                delta: 1
              });
              break;
            default:
              uni[action]({
                url: '/pages/component/button/button'
              });
              break;
          }
        }
      })
      // });
      document.querySelector("#postMessage").addEventListener('click', function() {
        window.__uniapp_x_.postMessage(JSON.stringify({
          data: {
            action: 'message'
          }
        }))
      })
    </script>
  </body>
</html>