[TOC]

遇到的痛点问题

H5页面和宿主Cocos页面之间的通信问题
在cocos页面内嵌入H5页面，不同于客户端提供的webView, 一些常用的与客户端的协议，以及通用跳转等等都无法调用执行
页面的适配问题，很容易出现边缘黑边问题，以及页面滑动问题，由于是页面中固定的一块内容，绝对不允许出现滚动

解决方案

与cocos对接同事的联调后，发现，cocos提供的webView里，可以正常地获取到用户的uid以及t票。

但是为了保险起见，我们还是在链接的末尾，带上了用户的uid, 防止出现uid获取不到导致t票报错的问题，我们提供url，告诉cocos，然后他们拼上uid, 然后放入他们的 webview 控件里，展示出H5页面

1，解决通信问题

如果是web端

使用postMessage即可

// 接收来自cocos的消息
window.addEventListener('message', function (e) {
   var data = e.data;//参数
   console.log("msg from cocos", data);
});
// 发送给cocos
window.postMessage(data, "*"); // * 解决跨域问题，其实最好设置一些域名白名单

如果是移动端

H5给cocos发消息，使用

document.location = `cocosh5shop://_type=2&diffCount=${diff}`; // 这里的 key：cocosh5shop ，参数“_type”，“diffCount” 都是和cocos约定后的参数名，可协调自定义

如下代码所示

const app = new Vue({
    el: '#app',
    ...
})
// H5 监听cocos发过来的消息
window.resetDiamonds = function(data) {
    console.log('------ from cocos resetDiamonds', data);
    app.getBalance('cocos1'); // 调用获取剩余逗豆接口
    app.mySwiper.update(); // 更新swipper
    // 设置一个5s的轮询
    let timeRun = 0;
    const interval = setInterval(() => {
        timeRun += 1;
        if (timeRun === 10) {
            app.mySwiper.update();
            clearInterval(interval);
        }
        // 防止逗豆还没到账，每隔500毫秒请求一次，5s后结束
        app.getBalance('cocos2'); // 查询剩余逗豆数据
    }, 500);
};
// H5 给cocos发送消息，在页面相应的函数内
XXX() {
    // 点击加号
    if (type == 1) {
        document.location = 'cocosh5shop://_type=1&';
     } else if (type == 2) { // 逗豆不足 跳转
        let diff = 0;
        if (count == 1) {
               diff = 5000 - this.balance;
        } else if (count == 10) {
               diff = 50000 - this.balance;
        }
        diff = diff <= 0 ? 0 : diff;
        document.location = `cocosh5shop://_type=2&diffCount=${diff}`;
    }
}

2，解决常用的调用问题

这次的活动页面，需要调用到客户端提供的快捷支付功能，但是，从cocos提供的webview里，无法调用。

因此，当逗豆不足的时候，H5先给cocos发消息，通知cocos弹出快捷支付窗口，支付结束之后通知H5，H5页面监听到返回结果之后，请求逗豆余额接口即可（这里需要注意一点，无法判断cocos发送通知的时机，是在弹出快捷支付窗口，还是在关闭快捷支付窗口，只请求一次的话，显然是不够稳妥的，需要设置一个定时器，轮询几秒确保获取到准确的余额数据）

通过沟通协调，H5发送通知消息，跳转/调用由宿主cocos完成，包括通用跳转，这里也有一个坑，就是 如果在H5页面使用location跳转的话，会在当前的webview展示，但是显然尺寸和范围不符合需求，是需要跳出cocos页面，再到其他的由原生提供的webview, 因此必须由cocos来跳转

3，页面的适配问题

3.1 控制H5部分不能滑动

const handler = function(e) {
    e.preventDefault();
 };
document.addEventListener('touchmove', handler, false);

3.2黑边问题的解决方案

背景图用和原图以及cocos提供的宽高尺寸一致，body,app 等父容器元素宽高略微增大一点，然后设置背景颜色与cocos页面的背景色一致，同时设置overflow： hidden;

3.3 svga动画切换时会由大变小闪烁一下

原因，使用的是v-show，导致切换的时候，由于尺寸的变化，部分手机会出现闪烁，解决方案：使用v-if，在svga-container上加overflow：hidden, 并且，svga上加不同的key值，让vue更新svga内容

<div v-if="!showCandleStatus" class="svg1-container">
    <svga
       key="a"
       ref="svga-not-open"
       :src="svgaNotOpen"
       class="svga-not-open"
     />
</div>
<div v-if="showCandleStatus" class="svg2-container">
    <svga
       key="b"
       ref="svga-opening"
       :src="svgaOpening"
       class="svga-opening"
     />
</div>

4，可以优化的点

今后，应该还会有cocos嵌H5的场景出现，可以通过沟通，把一些常用的调用，跳转等等功能，让cocos封装一下，然后以后H5直接调用就行，就像之前调原生的时候一样：）

Aco's Blog

Cocos页面部分嵌入H5页面复盘