小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> UniApp在微信小程序中嵌入WebView实现H5通信的方法与技巧

UniApp在微信小程序中嵌入WebView实现H5通信的方法与技巧

1. uniapp 小程序页面

2. uniapp - H5 页面

    2.1 根目录下 index.html


  
  
  
  
  

  
  
  
  


    2.2 vue 页面调用

declare var webUni: anyonLoad(() => {
  console.log('onLoad  webUni:', webUni)
  // 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。
  webUni.postMessage({
    data: {
      active: 'TERMINAL_WEB_MESSAGE'
    }
  })
  // 可以操作webview页面的跳转等操作,详细信息:2.1 打印结果
  webUni.webView.navigateBack({ delta: 1 })})


    2.3 普通H5页面


  
    
    
    
    
    
    
    
    网络网页
  
  
    
      // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        console.log('onLoad  webUni:', webUni)
        // 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。
        webUni.postMessage({
          data: {
            active: 'TERMINAL_WEB_MESSAGE'
          }
        })
        // 可以操作webview页面的跳转等操作,详细信息:2.1 打印结果
        webUni.webView.navigateBack({ delta: 1 })
      });
    
  

上一篇:uniapp实现微信小程序图片预览、上传、查看

下一篇:微信小程序原生开发微信支付全流程教程

推荐标签

下载该资源用户也下载了

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了