APP内嵌H5踩坑日记（一）

开发背景：APP和H5都是用uniapp写的。 APP是vue3写法，H5是vue2写法 比如你APP需要内嵌H5的A页面，链接以百度为例

// APP中代码
<template>
    <view class="container">
        <web-view src="https://www.baidu.com" @message="handleMessage"></web-view>
    </view>
</template>

src是你放对应H5的要内嵌的url，@message是接收内嵌H5传递的信息。

坑点1： 我原本的APP是有自己导航的，这个内嵌进来后，导航给整没了，内嵌页是在的。网上各种搜，我发现是说内嵌页的层级很高，把APP的导航遮住了，但是我尝试了不行，不知道你们写的时候会不会遇到这个情况。

解决

// APP中代码
<template>
    <view class="container">
        <web-view :webview-styles="webviewStyles" src="https://www.baidu.com" @message="handleMessage">
        </web-view>
    </view>
</template>

<script>
const webviewStyles = ref({
	progress: {
            color: "#F77900"  // 加载条颜色
	},
	top: 84,  // webview距离顶部距离
	bottom: 0,
	width: "100%"
});
</script>

这样之后，我APP的导航就在了。不过我好奇一个点，为啥我需要给距离顶部距离，那距离底部距离是0为啥没把我APP的tabbar遮住呢。

坑点2： 我在H5中给APP传递消息，uni.postMessage()这个方法会报错，这个问题给我整麻了，我之前是做过APP内嵌H5的，没遇到这个问题过，我明明加载了官方所说需要的那个webview的包，但是就是不行。

原因： 这次H5的项目是uniapp写的，它原本就有uni.这个东西，装了webview那个包之后，uniapp的原本uni.方法会把webview那个包里的uni.postMessage覆盖，导致读取不到这个方法。

解决： 安装y_uniwebview这个包，然后

// H5中代码
import y_uni from "y_uniwebview"

// 比如在H5中点击某个按钮需要给APP传递消息，可以在methods的某个方法中加上如下代码
y_uni.postMessage({
   data: {
       action: "openNativePage",
       data: {
            url: `/pages/xxx`,  // APP对应的url
            message: "xxxx"     // key可以随便写，APP中接收就行
        },
    },
});

目前主要遇到这两个坑，最后项目还是成功上线了。还有什么问题可在评论区留言