uniapp（微信小程序）web-view使用及传参

前言：在很多时候微信小程序有不支持的操作需要嵌套web-view实现，如：将html元素转为canvas等。所以我分享给大家我的实现步骤（我是嵌套了一个vue的项目）。

1.在uniapp项目中引入web-view组件

<web-view :src="webUrl" @message="handleGetMessage" @error="error"></web-view>

2.配置路径及传参

//首先配置webview的路径
data() {
		return {
			webUrl: 'http://localhost:8080/webview',
		};
	},
        //像webview传参就是向路由上拼接参数
        onLoad() {
		let data = {
			token,
			date,
		};
		this.webUrl = this.$base.webviewUrl + `?data=${encodeURIComponent(JSON.stringify(data))}`;
	},

3.兼容微信小程序。可直接安装微信sdk这样就可以使用微信的方法

npm install weixin-js-sdk

在使用时引入

import wx from "weixin-js-sdk";

4.在h5接参数

直接在路由中接受即可

import { useRoute } from "vue-router";
route.query.data//这里就是参数

注意：只有在关闭H5页面时候uniapp小程序才能接收到参数所以最后我们使用

  wx.miniProgram.postMessage({ data: res.data.url });//传参
      setTimeout(() => {
        closeToast();
        wx.miniProgram.navigateBack();//关闭页面
      }, 1000);

5.在webview接受H5的参数

	handleGetMessage(e) {
				console.log(e);
		},