1***@163.com
1***@163.com
  • 发布:2024-08-26 22:00
  • 更新:2024-08-27 08:40
  • 阅读:105

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

分类:uni小程序sdk

需要通过微信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);  
    });  

}
2024-08-26 22:00 负责人:无 分享
已邀请:
1***@163.com

1***@163.com (作者)

还看到另一种方法 https://blog.csdn.net/SJJ980724/article/details/129705358 ,在微信端使用 plus.webview.create(url, id, style, {data:{}})的方法携带参数, 貌似不会报错

但是在H5端,

      mounted() {  
            console.log('window.plus ',window.plus , window.plus.webview.getWebviewById("webViewId"));  
            if (window.plus) {  
                this.plusReady();  
            }//加上此判断以免再浏览器打开h5页面时报plus is not define  
      },  
      methods: {  

             plusReady() {  
                if (window.plus.webview.getWebviewById("webViewId")) {  
                    const appData = plus.webview.getWebviewById("webViewId").data;  
                    alert(JSON.stringfy(appData))  
                }  
            },

问题在


 window.plus.webview.getWebviewById("webViewId")  

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'webview')
  • 蔡cai

    微信小程序只有修改webview的src属性

    2024-08-27 11:13

  • 蔡cai

    还有一个,就像另一个评论,使用websocket实现

    2024-08-27 11:18

BoredApe

BoredApe - 有问题就会有答案。

要回复问题请先登录注册