小程序webview与H5通信

官方介绍

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

注意事项

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

---

H5和webview的通信

webview到H5

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

注：src不支持本地路径，需要使用网络路径

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

H5到webview

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一定是撑满全屏的，自定义顶部菜单，悬浮的都没用