小程序 webview 嵌套H5 返回方法

小程序 webview 嵌套H5 页面返回方法小记。

小程序：uniapp

H5：vue

问题：H5页面返回小程序页面、miniProgram undefined、wx警告等

1、头部返回：

引用

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

监听

<script>
  // 监听浏览器返回动作
  window.addEventListener("popstate", function (e) {
    let hash = sessionStorage.getItem('hash');
    if (hash === 'Home') {
      WeixinJSBridge.call('closeWindow'); // 关闭网页
      wx.miniProgram.navigateBack();  // 退回到小程序
    }
  }, false);
</script>

2、页面内返回

back(){
    wx.miniProgram.postMessage({
        data: {
            info: '返回数据了'
          }
        })
    wx.miniProgram.navigateBack()
}

需要在 .eslintrc.js 中新增，以免wx报警告

不需要安装、引用 // import wx from 'weixin-js-sdk'

module.exports = {
  globals: {
    wx: true
  },
  // 其他省略
  ....
}

  2.1 小程序接收H5 传参

<template>
	<view>
		<web-view :src="pageUrl" bindmessage="onVueMsg"></web-view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			pageUrl: ''
		}
	},
	onLoad (query) {
		let url = JSON.parse(decodeURIComponent(query.url)) // 路由参数处理
		console.log('query----', query, url)
		this.pageUrl = url
	},
	methods: {
		onVueMsg (item) {
			console.log(item)
		},
	}
}
</script>

<style></style>

以上为本次开发中记录