微信小程序与h5通过web-view传值

最新推荐文章于 2024-04-29 15:56:27 发布

m0_56712653

最新推荐文章于 2024-04-29 15:56:27 发布

阅读量4k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/m0_56712653/article/details/117741481

版权

小程序web-view是承载网页的容器，会自动铺满整个小程序页面。

微信小程序

.wxml

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

.js

Page({
  data: {
    webUrl: "http://192.168.2.275:8080/%E6%B5%8B%E8%AF%95.html"
  },
  msgHandler: function (e) {    //(h5像小程序传递参数）
    console.log(e) //获取到来自也页面的数据
    },

 })

h5页面

<!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">
	<title>H5页面</title>
</head>
<body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<button class="btn" >按钮触发</button>
	<script>
		$(".btn").click(function() {
			wx.miniProgram.navigateTo({url: '/organization/organization'})
			wx.miniProgram.postMessage({ data: '传递传输值' })
		})
	</script>
</body>
</html>

小程序相关属性：

src webview 指向网页的链接

bindmessage 网页向小程序 postMessage 时，会在小程序后退、组件销毁、分享时触发并收到消息。

bindload 页面加载成功触发 e.detail = { src }，只是与页面src有关，和H5传值无关

binderror 页面加载失败触发 e.detail = { src }，只是与页面src有关，和H5传值无关

H5页面相关属性：

注意：使用下面属性要进行jweixin的引入

wx.miniProgram.navigateTo 进行跳转到小程序的页面（保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面）

wx.miniProgram.navigateBack 进行跳转到小程序的页面（关闭当前页面，返回上一页面或多级页面）

wx.miniProgram.switchTab 进行跳转到小程序的页面（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）

wx.miniProgram.reLaunch 进行跳转到小程序的页面（关闭所有页面，打开到应用内的某个页面）

wx.miniProgram.redirectTo 进行跳转到小程序的页面（关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。）

前面五个是进行路由跳转，下面一个是进行传值
wx.miniProgram.postMessage 向小程序发送消息，会在小程序后退、组件销毁、分享时触发组件的message事件

实例：


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

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

总结：在H5页面中，要有一个触发事件执行，这样才能在微信小程序通过web-view来获取到H5页面相应的值互传。

m0_56712653

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
微信小程序与h5通过web-view传值

小程序web-view是承载网页的容器，会自动铺满整个小程序页面。微信小程序.wxml<view> <web-view src="{{webUrl}}" bindmessage="msgHandler"></web-view></view>.js
复制链接

扫一扫