小程序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页面相应的值互传。

# 小程序
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生