小程序webview与H5通信

文章目录

  • 官方介绍
    • 注意事项
    • H5和webview的通信
      • webview到H5
      • H5到webview
      • 内嵌H5缓存问题
      • 小程序关闭,H5音频仍然在播放问题
    • 小程序内怎么调试web-view
    • tips

官方介绍

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序webview与H5通信_第1张图片

注意事项

  • 网页内iframe的域名也需要配置到域名白名单,webview只能加载配置过的域名(比如京东、天猫这种没配置的webview是无法显示的)
  • 每个页面只能有一个 web-viewweb-view 会自动铺满整个页面,并覆盖其他组件,自定义顶部菜单,悬浮的都没用(cover-view可以覆盖其上面,可点击了解详情)
    -web-view网页与小程序之间不支持除JSSDK提供的接口之外的通信。
  • iOS 中,若存在JSSDK接口调用无响应的情况,可在web-viewsrc后面加个#wechat_redirect解决。
  • 避免在链接中带有中文字符,在 iOS中会有打开白屏的问题,建议加一下encodeURIComponent

H5和webview的通信

webview到H5

src路径传参加载H5页面,避免使用中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent

注:src不支持本地路径,需要使用网络路径

偶现白屏问题,可以使用v-if来判断webview加载时机,待src动态传参获取之后,再加载webview

H5到webview

小程序webview与H5通信_第2张图片
小程序webview与H5通信_第3张图片

H5可以通过postMessage向小程序传参,但是传递的参数只有在特定时间才能触发接收到消息

  • 每次的postMessage不是覆盖的,而是累加的数组,之前的都不会清除,所以获取的时候要拿数组的最后一项。
//H5页面
import wx from 'weixin-js-sdk' // 引入对应的sdk

//判断当前所在环境
 testBrowser() {
   let ua = window.navigator.userAgent.toLowerCase()
   if (ua.match(/MicroMessenger/i) == 'micromessenger') {
     //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
     wx.miniProgram.getEnv((res) => {
       if (res.miniprogram) {
         // 在小程序
       } else {
         //在微信里
       }
     })
   } else {
     // 不在微信里面
   }
 },
 
//触发postmessage
wx.miniProgram.postMessage({
    data:this.shareData,
  })
//小程序
<web-view :src="invitationUrl" @message="handleMessage"></web-view>

handleMessage(res){
	this.shareData = res.detail.data[res.detail.data.length - 1];
},

内嵌H5缓存问题

web-view加载的H5具有很重的缓存,如果需要调试,可以通过在url后面加时间戳的方式解决。

小程序关闭,H5音频仍然在播放问题

小程序已经关闭,但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性:

visibilitychange:页面可见性状态

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

var statusBeforeHide = true; //初始化页面的状态
var music = document.getElementById("xxx");
// 更改音乐播放状态
function setChangeMusic() {
    if (document[hiddenProperty]) {
        // 页面隐藏
        if (statusBeforeHide) {
            music.pause(); // 暂停
        }
    } else {
        // 页面显示
        if (statusBeforeHide) {
            music.play() //如果statusBeforeHide是true, 继续播放
        }
    }
}

let hiddenProperty = ('hidden' in document) ? 'hidden'
        : ('webkitHidden' in document) ? 'webkitHidden'
            : ('mozHidden' in document) ? 'mozHidden' : null;
if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    let onVisibilityChange = () => {
        //console.log('visibilityChange');
        setChangeMusic();
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
    console.log("不支持这个api");
}

小程序内怎么调试web-view

  • 开发工具上在web-view页面内点击鼠标右键有个调试的选项
  • 需要在真机上调试需要自行引入vconsole:https://github.com/Tencent/vConsole/blob/dev/README_CN.md

tips

  • 多场景判断,建议使用官方API: wx.miniProgram.getEnv
  • H5唤醒一些小程序API有一定的延时,0.3~1秒
  • 请调用小程序专用的JSSDK,同一个jssdk,但是webview的功能收到限制,和之前微信打开H5有所不同
  • 小程序自动获取加载H5的title
  • H5中iframe的url必须也是业务域名
  • web-view一定是撑满全屏的,自定义顶部菜单,悬浮的都没用

你可能感兴趣的:(小程序,小程序,webview)