当前位置：首页 > article >正文

uniapp与webview进行数据通信

article 2024/9/22 23:29:46

uniapp与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;
    }

    .desc {
      padding: 10px;
      color: #999999;
    }

    .post-message-section {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div class="post-message-section">
    <p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
    <div class="btn-list">
      <label>账户:</label>
      <input type="text" name="user" required>
      <br>
      <label>密码：</label>
      <input type="text" name="pwd" required>
      <br>
      <div class="post-message-section">
				<!-- HTML 内容 -->
				<p id="receivedMessage">Received Message Will Appear Here</p>
			</div>
			<br>
      <button class="btn btn-red" type="button" id="postMessage1">跳转1</button>
      <button class="btn btn-red" type="button" id="postMessage2">跳转2</button>
      <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
      <button class="btn btn-red" type="button" id="getMessage">点击获取GetMessage</button>
      <button class="btn btn-red" type="button" id="getMessage">获取相机权限</button>
    </div>
    <p id="receivedMessage"></p>
  </div>
  <script type="text/javascript">
    var userAgent = navigator.userAgent;
    if(!/toutiaomicroapp/i.test(userAgent)) {
      document.querySelector('.post-message-section').style.visibility = 'visible';
    }
  </script>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="uni.webview.1.5.5.js"></script>
  <script type="text/javascript">
    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    document.addEventListener('UniAppJSBridgeReady', function () {
      uni.getEnv(function (res) {
        console.log('当前环境111：' + JSON.stringify(res));
      });
    });
var customKey = 'key'; // 自定义的键值，可以根据需要修改
      
    // postMessage参数
    document.getElementById('postMessage').addEventListener('click', function () {
      var userValue = document.getElementsByName('user')[0].value;
      var pwdValue = document.getElementsByName('pwd')[0].value;
      var deviceInfo = navigator.userAgent; // 获取设备信息
      // var customValue = 'nnn'; // 自定义的第二个键值
      var customValue = 'nnn'; // 自定义的第二个键值

            
      // 添加自定义的键值对     
      uniPostMessage(customKey,customValue);  
    });
    // 监听postMessage事件
    // 监听来自 UniApp 的消息
    document.addEventListener('message', function(event) {
            console.log('Message received in test.html:', event.data);
            var receivedMessageElement = document.getElementById('receivedMessage');
            receivedMessageElement.textContent = 'Received message: ' + event.data;
            alert('Received message: ' + event.data);
        });
    // getMessage参数
    document.getElementById('getMessage').addEventListener('click', function () {
      var storage = window.plus.storage;
      // 获取本地存储 
      var customKey = 'key'; // 自定义的键值，可以根据需要修改
      
      var yourData = storage.getItem(customKey);
      alert(yourData);
      return;
      var parsedData = JSON.parse(yourData);
      
      if(parsedData === null) {
        console.log('本地存储为空');
      } else {
        console.log('Data from storage:', yourData);
        var parsedData = JSON.parse(yourData);
        document.getElementsByName('user')[0].value = parsedData.data.user || '';
        document.getElementsByName('pwd')[0].value = parsedData.data.pwd || '';
      }

      // 获取所有存储staorage
      var keys = plus.storage.getAllKeys();
      var data = {};
      // 遍历所有的键，并将键值对添加到对象中
      keys.forEach(function (key) {
        var value = window.plus.storage.getItem(key);
        data[key] = value;
      });
      console.log('Data:', JSON.stringify(data));


    });

    // 获取传递过来的值
    console.log('获取数据:',getQuery('data')); //获取 uni-app 传来的值
             //取url中的参数值
             function getQuery(name) {
               // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
               let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
               let r = window.location.search.substr(1).match(reg);
               console.log('获取到的r值',r);
               if(r != null) {
                 // 对参数值进行解码
                 return decodeURIComponent(r[2]);
               }
               return null;
             }
  </script>
</body>





<script>
  // 获取按钮父元素
  var buttonContainer = document.body;
  // 添加点击事件监听器到父元素
  buttonContainer.addEventListener("click", function (event) {
    // 确保点击的是按钮
    if(event.target.tagName === 'BUTTON') {
      // 根据按钮ID进行区分
      if(event.target.id === 'postMessage1') {
        // 处理按钮1的点击事件
        console.log("点击了跳转1按钮");
        // 这里可以添加其他处理逻辑
        window.location.href = 'jump1.html';
      } else if(event.target.id === 'postMessage2') {
        // 处理按钮2的点击事件
        console.log("点击了跳转2按钮");
        // 这里可以添加其他处理逻辑
      }
    }
  });
</script>

</html>