需要通过微信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);
});
}
蔡cai
微信小程序只有修改webview的src属性
2024-08-27 11:13
蔡cai
还有一个,就像另一个评论,使用websocket实现
2024-08-27 11:18