解决微信小程序中 使用webview 的一些问题

在微信小程序中使用webview时，遇到了以下几个坑。首先是引入官方的两个包，但是没有挂载到window上，代码如下

import App from './App'

import './jweixin-1.6.0.js'
import './uni.webview.1.5.5.js'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})




app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

这里我做的是公司的二开项目直接import的话不会挂载到window,我也不知道为什么，我自己新建的vue3项目是可以正常使用的， 注意这里如果jweixin-1.6.0.js 导入报错 ，需要做以下更改

((e, n) => {
	"function" == typeof define && (define.amd || define.cmd) ? define(function() {
		return n(e)
	}) : n(e, !0)
})(window, function(r, e) 
把 this 改成 window

然后我们需要手动将他挂载到window上

//在main.js中这样子写
//命名随意
 import jweixin from '@/config/jweixin-1.6.0.js'
 import unis from '@/config/uni.webview.1.5.5.js';

 if(jweixin)
 {
 	window.jweixin = jweixin
 }

 if(unis)
 {
 	window.unis = unis
 	console.log(window)
}

这时候我们往webview发送消息的代码如下

			// 发送消息到WebView
			sendMsg() {
				console.log("正在发送消息:",window);
				
				const message = {
						action: 'customMessage',
						content: this.message,
						timestamp: Date.now()
					};
					
				unis.postMessage({
					data: message,
				});
				
				
				uni.showToast({
					title: '消息已发送',
					icon: 'success',
					duration: 2000
				});
			}
//正常的话这样子是可行的，但是我的项目中这种方法还是没办法触发message
<web-view  :src="urlhttp" @message="getMessage" ></web-view>

//那么我们直接使用微信原生的方法去调用 
jweixin.miniProgram.postMessage({
					data: message,
				});

			

这样子就成功了

最后我把我自己搭建的demo放上来，我也不知道为什么我自己搭建的很方便，公司项目需要改这么多东西

h5端 mian.js

import App from './App'

import './jweixin-1.6.0.js'
import './uni.webview.1.5.5.js'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})




app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

页面

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			
			<input v-model="message" placeholder="请输入要发送的消息" class="message-input" />
			<button @click="sendMsg" class="btn">发送消息到WebView</button>
			

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'WebView通信示例',
				message: '这是来自H5---的消息',
				receivedMessage: ''
			}
		},
		onLoad() {
		},
		onReady() {
	
		},
		methods: {

			
			// 发送消息到WebView
			sendMsg() {
				console.log("正在发送消息:",window);
				
				const message = {
						action: 'customMessage',
						content: this.message,
						timestamp: Date.now()
					};
					
				myUni.postMessage({
					data: message,
				});
				
				
                // myUni.navigateBack()
				
				uni.showToast({
					title: '消息已发送',
					icon: 'success',
					duration: 2000
				});
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		margin-bottom: 30rpx;
	}
	
	.message-input {
		width: 80%;
		height: 80rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	
	.btn {
		width: 80%;
		background-color: #007AFF;
		color: #FFFFFF;
		margin: 15rpx 0;
	}
	
	.message-box {
		margin-top: 30rpx;
		width: 90%;
		padding: 20rpx;
		border: 1px solid #DDDDDD;
		border-radius: 10rpx;
		background-color: #f8f8f8;
	}
	
	.message-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.message-content {
		font-size: 24rpx;
		word-break: break-all;
	}
</style>

webview页面

<template>
	<view>
		<web-view src="http://127.0.0.1:5173/"  
		 @message="handleMsg"
		height="600"></web-view>


	</view>
</template>

<script setup>
	import {
		onBeforeUnmount,
		ref,
		watch
	} from "vue";
	import {
		onLoad,onShareAppMessage 
	} from "@dcloudio/uni-app";
	

	const data = ref({});

	// 分享配置
	onShareAppMessage(() => {
	  return {
	    title: '分享标题',
	    path: '/pages/your-page/your-page', // 分享路径
	    imageUrl: '/static/share-image.jpg' // 分享图片
	  }
	})
	
	const handleMsg=(e)=>{
		console.log(e,"我收到的消息")
	}
	
	onLoad(() => {
		// #ifdef H5
		window.addEventListener('message',(e)=>{
			data.value = e.data.data;
		})
		// #endif 
		
	});
	
	
	

	
	
	watch(()=>data.value,()=>{
		console.log(data.value,"-=-=-=-");
	})

	onBeforeUnmount(() => {
		console.log('页面卸载--',data.value);
	});
</script>

<style lang="scss" scoped>

</style>