uni-app icon indicating copy to clipboard operation
uni-app copied to clipboard

微信app通过webview向H5页面传递值?

Open helxsz opened this issue 5 months ago • 2 comments

需要通过微信app打开一个webview的H5页面,并且向这个H5页面传送值,看到了很多方法,但是都没有成功过,目前微信app是基于vue3, H5是基于vue2. 微信app

<template>
	<view class="app-content">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<web-view ref="webviewRef" :webview-styles="webviewStyles" :src="url"></web-view>
		<!-- #endif -->
	</view>
</template>

<script setup lang="ts">
	import { reactive ,ref,watch,nextTick,getCurrentInstance} from 'vue'
	import { onShow, onLoad,onReachBottom} from '@dcloudio/uni-app'

	const url = ref<String>('http://localhost:5175?id=adflkaj')
        const webviewRef = ref();
	const webviewStyles={
		progress: {
			color: '#FF3333'
		}
	}

	// #ifdef H5 || MP-WEIXIN

	let pages = getCurrentPages();
	let page: any = pages[pages.length - 1];
	let currentWebView = page.$getAppWebview();

	const webView=plus.webview.create( "http://localhost:5175?id=abc", "webViewId", {
		plusrequire:"none", //
		top:"100px",
		bottom:"0px",
		left:"0px",
		right:"0px",
		margin: "10px", //设置了left、right、top、bottom则对应的边距值失效。
		background: "transparent",
		webviewBGTransparent: true, //ture透明
		// errorPage: "/html/error.html",
		errorPage: "none",
		hardwareAccelerated:true,  //开启硬件加速
	});

	webView.addEventListener(("loading"),(e)=>{
		uni.showLoading({
			title: '页面加载中...',
			mask: true
		})
	},false)
	webView.addEventListener(("loaded"),(e)=>{
		uni.hideLoading()
	},false)

	currentWebView.append(webView);  //loadUrl后需在此页面append上嵌入的webView

        // 发送数据的第一个方法

  let action = "msgFromApp";
  let params = { msgFromApp: 233 };
  webviewRef.value.evalJS(`${action}(${JSON.stringify(params)})`);

        // 发送数据第二个方法

      setTimeout(() => {
        console.log('settimeout ');
        appSendMessage( "msgFromApp", { msgFromApp: 233 });
      }, 5000);

function appSendMessage( action:string, params:any) {
  console.log('appsendmessage ');
	let pages = getCurrentPages();
	let page: any = pages[pages.length - 1];
	let currentWebView = page.$getAppWebview();
  //传递大量数据
  currentWebView.evalJS(`${action}(${JSON.stringify(params)})`);

  console.log('appsenmessage ',`${action}(${JSON.stringify(params)})`);
}

        
	// #endif

</script>


目前这个微信端的代码有两个问题,

第一,运行目前的代码会报错的

TypeError: page.$getAppWebview is not a function

但把 // #ifdef H5 || MP-WEIXIN 换成 // #ifdef APP, 就不会报错,这个原因是什么。

第二,用了两个方式

webview的ref对象来使用evalJS发送数据
webviewRef.value.evalJS(`${action}(${JSON.stringify(params)})`);

或者

         let pages = getCurrentPages();
	let page: any = pages[pages.length - 1];
	let currentWebView = page.$getAppWebview();

但测试好像都没有啥用

但H5的页面,使用这段代码

export function webviewGetMessage(action, callback) {
  // #ifdef H5
  window[action] = (data) => {
    let params = JSON.parse(JSON.stringify(data));
    callback(params);
  };
  // #endif
}
 mounted() {

    webviewGetMessage("msgFromApp", (params) => {
      console.log("getAppParams", params);
    });

}

helxsz avatar Aug 26 '24 13:08 helxsz