uniapp 在app端 使用webview进行数据交互。

使用案例

1.app端(需要使用nvue)

  
      
            点击向url传值
              
          
  
  
    export default {  
        data() {  
            return {  
                                url:'http://191.160.11.101:8081/index?os=wx'
            }  
        },  
        onLoad() {  
                    this.url += '&t=' + new Date().getTime()
        },  
        methods: {  
            // 接收h5页面发来的键值判断需要执行的操作  
            PostMessage(evt) {  
                console.log("postMessage: ", evt)
                                uni.showModal({
                                    title:"提示",
                                    content:evt.detail.data[0].msg
                                })
            },  
            // 获取到对应webview(关键)通过evalJs执行网页的函数，可对其进行传参，完成与网页的通讯  
            handlePostMessage(res) {  
          
                this.$refs.webview.evalJs(`handleMessage('${res}')`);  
            }  
        }  
    }  
  
  
    .webview-box {  
        position: absolute;  
        left: 0px;  
        right: 0px;  
        top: 0px;  
        bottom: 0px;  
    }  
    .webview {  
        flex: 1; 
                 height: 300rpx;
    }  
 

2. html端

    
    
    title
      
    
    
        

        
点击
        向上传递数据
       
    
      
            
        // 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。  
        document.addEventListener('UniAppJSBridgeReady', function() {
        // 点击某个按钮后发消息。
        document.getElementById('to_shiming').addEventListener('click', function() {
            // 这里调用uniapp的api执行消息发送
            uni.postMessage({
                data: {
                    msg:'url向app传值'
                }
            });
        });
        });
        window.handleMessage = function(msg){
            console.log("接收到消息",msg);
            alert("接收到消息"+msg);
            document.getElementById('box').innerText = msg;
                    }
    

    

app端也可以通过url向html传递参数

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。