菜鸡开发路人丁
菜鸡开发路人丁
  • 发布:2025-02-18 21:45
  • 更新:2025-02-19 09:08
  • 阅读:65

uniapp 开发的微信小程序 web-view引入 uniapp开发的H5。如何交互。

分类:uni-app

如题。
主要目的是为了调用微信支付。但现在H5端单独使用是可以调用微信支付的。
现在想的是将H5得到的支付信息传到小程序。在小程序调用支付后。回传给H5。

2025-02-18 21:45 负责人:无 分享
已邀请:
杨杨得亿

杨杨得亿 - 这个人很懒,什么都没有留下~

铁子你们这都啥业务需求啊?用 接口形式回传 不行吗 ?非得做 web-view页面通讯?
好吧,满足你的小愿望。。。请看VCR

//第一步小程序调用支付后,给H5发消息  
sendMessageToWebView() {  
        const webview = this.$refs.myWebView; // 确保这里的 ref 与你的 web-view 的 ref 匹配  
        if (webview) {  
                webview.postMessage({ message: '1111111' });  
        }  
 }  
//第二步 web-view也就是H5页面接收消息  
// 嵌入的 Web 页面  
window.addEventListener('message', function(event) {  
    if (event.origin !== 'http://www.baidu.com') {   
        return;  
    }  
    console.log('Received message:', event.data);  
});
//web-view 组件  
<web-view src="https://example.com" ref="myWebView"></web-view>  
<button @click="sendMessageToWebView">Send Message</button>
  • 菜鸡开发路人丁 (作者)

    大佬。我也没办法啊。二开fastadmin 两套插件。两套uniapp的前端。嵌套的。两个端的用户都没做同步。

    2025-02-19 15:20

  • 菜鸡开发路人丁 (作者)

    大佬。你这个办法不行 ref只能用在nvue里面。获取不到web-view

    2025-02-19 22:22

杨杨得亿

杨杨得亿 - 这个人很懒,什么都没有留下~

如果页面通讯不会或者看不懂,可以使用 LocalStorage 进行状态同步,在 uni-app 中设置 LocalStorage,然后在 Web 页面中读取。或者反过来,先在 Web 页面设置,然后在 uni-app 中读取。

localStorage.setItem('key', 'value');  
or  
localStorage.getItem('key');

要回复问题请先登录注册