微信小程序 - webview 的使用

最新推荐文章于 2025-07-11 16:41:58 发布

weixin_34307464

最新推荐文章于 2025-07-11 16:41:58 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/hp2017/blog/1810509

为什么80%的码农都做不了架构师？>>>

使用 webview 可以让小程序内嵌网页，利用这个功能可以实现些在微信小程序环境中受到局限的功能,当然也有一些坑,在此分享下。

介绍

使用时候很简单只要加上一行代码。简单介绍下参考 api：web-view

<web-view src="{{src}}" bindmessage="msgHandler"></web-view>

1、src 表示指向网页的链接。需登录微信公众平台进入小程序管理后台配置域名白名单。

另外注意 src 一定要填域名而且要在微信公众平台进入小程序管理后台配置业务域名配置，不要测试ip地址其它的，否则页面会被重新排版显示在小程序中，很难看！如果在测试时候你可以随便写。

2、bindmessage 用来监听页面发送给小程序的消息，也就是说网页向小程序请求时候可以用它接受到数据。

data: {
  src: '',
},

 onLoad: function (options) {
    var that = this
    that.setData({
      src: "https://baidu.com",
    })
  },

效果如图：（没办法广告就会忽略不用看了哈 ~~）

数据交互：

使用小程序和网页进行交互这个是大家很关注的一个了，下面就来说一说。

如果小程序端向网页发送数据：

一定要写在 onLoad 中进行数据绑定，如：

小程序请求要写成https注意！

 onLoad: function (options) {
    var that = this
    var id = options.id //获取到小程序其他页面传来的数据；
    that.setData({
      src: "https:XXXXXX?id=" + id
    })
  },

坑1：不要直接写在 WXML 页面 src 处切记，如：

<web-view src="https://localhost?id={{id}}"></web-view>

这样写看上去没什么，但是因为网页加载时src属性可能是这样的 https://localhost?id= 。导致网页中js不能通过解析url得到小程序传过来的参数。

网页向小程序发送数据：

网页中可使用 JSSDK 1.3.2 提供的接口返回小程序页面一定要写上：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">

坑2：如果你要返回数据在页面上一定注意：这个api写的，我之前就纳闷怎么没有数据呢？原来如此！

坑3：传值的时候有个要注意的地方，页面在调用 postMessage 方法时参数应该写成 {data: obj} ,而不能直接传 obj ,否则小程序拿不到网页上传的数据。

网页：

<script type="text/javascript">
		function test() {
	            var videoUrl=document.getElementById("indexPicLath").value; 
		    if(videoUrl!=null&&videoUrl!=""){
		         videoUrl="xxx/"+document.getElementById("indexPicLath").value;
			}
		       wx.miniProgram.postMessage({data : {videoUrl:videoUrl}});
		       wx.miniProgram.navigateBack({delta : 1});  //一定要加上它
		}
</script>

小程序：

msgHandler(e){
  console.log(e.detail.data) //获取到来自页面的数据
}

其他注意点：

每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。

<web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。

最后：

就这样简单就能实现微信小程序 webview 功能，赶紧来试试噢！

也可以参考 WTF小程序之<web-view> 感谢这位博主，遇到问题时候读到他的文章，得以解决。

水平有限，若有问题请留言交流！

互相学习，共同进步：）转载请注明出处谢谢！

转载于:https://my.oschina.net/hp2017/blog/1810509