【小程序坑（一）】web-view标签

最新推荐文章于 2024-08-12 15:50:16 发布

jeason_L

最新推荐文章于 2024-08-12 15:50:16 发布

阅读量4.4k

点赞数 1

本文链接：https://blog.csdn.net/jeason_L/article/details/90761377

版权

1、个人项目无法使用，不过在开发这工具设置【不校验web-view】还是可以用的

★坑点：postMessage不能直接输出到小程序，官方已经表明这个坑，也就是说，需要navigateTo,navigateBack,redirectTo这些使页面销毁或分享事件才能出发这些data传输

在这里插入图片描述

2、测试基本流程（相对简单）

测试的第一页代码wxml

<!-- 测试的第一页代码wxml -->
<navigator url='/pages/custom/index'>我要去</navigator>

测试主代码：/pages/custom/index

<!-- 测试主代码：/pages/custom/index -->
<web-view 
src="http://localhost/web.html" 
bindmessage="handleMsg">
</web-view>

// 小程序page
Page({
  handleMsg (e) {
    console.log(e)
  },
}

外链html：http://localhost/web.html代码

<!-- 外链html：http://localhost/web.html代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- weixin js sdk -->
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <title>Document</title>
</head>
<body>
  <button onclick="sendMsg()">先发送消息</button>
  <button onclick="back()">回退触发事件</button>
  <!-- 小程序输出 -->
  <h1>网页js输出</h1>
  <div id="result"></div>
  <script>
    function sendMsg () {
      write('发送消息')
      wx.miniProgram.postMessage({ data: {foo: 'bar'} })
    }
    function back () {
      write('回退')
      wx.miniProgram.navigateBack({delta: 1})
    }
    function write (note) {
      var res = (note instanceof String) ? note : JSON.stringify(note)
      document.getElementById('result').innerHTML += JSON.stringify(res) + '<br><br>'
    }
    //小程序发送信息```
    wx.miniProgram.getEnv(function (res) {
      write(res)
    });
  </script>
</body>
</html>