APP内嵌H5踩坑日记（二）

书接上回，项目上线了，但是还是有不少问题，有些是自己写出来的问题吧，有些可能就是坑，吐槽一下，把遇到的问题解决方案贴出，顺带把没解决的问题抛出，说不定有大佬做过类似的解决了给个解决方案。

开发背景：公司有自己的 App ，还有一个商城，商城没啥流量，想把 App 的底部某个 tabbar 改造，将商城内嵌到 App 里。

先放内嵌代码

<template>
    <view class="container">
          <NavBar name="xx商城"></NavBar>
          <web-view :webview-styles="webviewStyles" :src="url" @message="handleMessage"></web-view>
    </view>
</template>

<script lang="ts" setup>
const webviewStyles = ref({
	progress: { color: "#F77900" },
	top: uni.getSystemInfoSync().statusBarHeight, // 导航高度
	bottom: 0,
	width: "100%",
}
</script>

坑点1：我一开始的方案是，返回按钮采用 H5 自己的。但是由于内嵌页是在 tabbar 内嵌的，tabbar页好像是不会记录页面栈（ webview 里的页面）的，安卓的侧划返回没用。

解决：首先，在 tabbar 页做一个中间页，进入tabbar页立马进入下一个页面，写上上述代码，然后就可以侧划了。不过出现了另一个问题。举例，A页面是 APP 的 tabbr 页（中间页），B 页面是 APP 的内嵌页, C 页面是内嵌项目 H5 的首页（ B 页面首次展示 C 页面的内容），当我第一次进入 B 页面并未进入 H5 项目 C 页面的其他页面的时，此时侧划，相当于去到 A 页面，但是 A 页面会立即跳转 B 页面，会有白屏的效果，用户体验非常差，于是在上面代码中上下面的代码

onBackPress(options => {
	if (options.from === "backbutton") {
		return true; // 不允许返回
	}
	return false; // 允许返回
});

这样子就是只有在内嵌项目的首页时不允许侧划返回，进入内嵌项目的其他页面是可以侧划返回的。然后，IOS 和安卓在这里是有区别的，安卓中在内嵌项目的其他页侧划都是 ok 的，但在 IOS 中，每次都会有白屏的效果，所以只能禁用掉 IOS 的侧划，在 pages.json 文件中的 B 页面对应的 pages 的 style 中添加 "disableSwipeBack": true ，这样就把 IOS 的返回禁用掉了。

坑点2：内嵌项目中弹起输入框时，在输入框还弹起时，切换到下一个页面，内嵌页白了一块。经过分析与查询，键盘弹起时 webview 的高度会改变。

解决：

<template>
    <view class="container">
          <NavBar name="xx商城"></NavBar>
          <web-view :webview-styles="webviewStyles" :src="url" @message="handleMessage"></web-view>
    </view>
</template>

<script lang="ts" setup>
const webviewStyles = ref({
	progress: { color: "#F77900" },
	top: uni.getSystemInfoSync().statusBarHeight, //导航高度
	bottom: 0,
	width: "100%",
  height: 0
}

onShow(() => {
    uni.getSystemInfo({
        success: res => {
            tatusBarHeight.value = res.statusBarHeight; // 顶部导航到底
            windowHeight.value = res.windowHeight; // 内容区域高度
            webviewStyles.value.height = windowHeight.value - navHeight.value;
        }
     });
 })
</script>

给 webview 固定一个高度，这样键盘弹起不会重置 webview 的高度了。在分析这个问题的时候，我还发现一个点，键盘弹起时，我点导航的非返回按钮（目的是希望通过触发失焦事件，隐藏键盘），虽然确实失焦了，但是键盘不会隐藏，这应该算内嵌的坑，不过因为会触发失焦事件，于是我可以通过触发失焦事件，在 H5 中传递消息给APP ，让 APP 隐藏键盘。

还有一个小的优化点吧，同样是键盘弹起时，如果我点击的时内嵌页的内容，如果不是跳转下一页，键盘会被收起，如果我点击导航上的返回，进入下一个页面时，键盘是还在的，我采取的方案是，在进入下一页的时候，H5 对应页面在 onShow 中传递消息给 APP，让 APP 隐藏键盘。

然后我想 APP 给 H5 传消息，H5 那边接收不到 APP 的消息（除了通过 url 的方式传参），有没有大佬教一下。