需求场景：

利用uni小程序SDK，将原本用uin-app开发的微信小程序嵌入到原生App中；在原生App进入小程序后，tabbar有4个项（首页，XX，XX，我的），但是当点“我的”项的时候，需要跳转到原生App的相应页面。

官网说法：页面简介 | uni-app官网

解决思路及代码：

1.写了个工具函数:utils/robotView.ts

/**
 * “我的”图标上的假图层
 */
//@ts-ignore
// #ifdef APP-PLUS
export const robotView = new plus.nativeObj.View("robot-btn", {
  bottom: "0px", // 底部
  left: "75%", // 控制这个来实现图层左右位置
  height: "50px",  // 高度宽度等可以自己设置
  width: "150px",
  // backgroundColor: "#ff0000", // 一开始设置背景颜色能更清楚调试
});

// 监听图层事件
robotView.addEventListener(
  "click",
  (e) => {
    console.log("向宿主app发送事件，请求打开原生“我的”页面", e); 
    //@ts-ignore
    uni.sendNativeEvent("uni-jump-my");
  },
  false
);
// #endif

2.在每个小程序的tabBar页面的onShow钩子里，都调一下这个函数，并且页面隐藏时，将其隐藏。（除“我的”页面之外的3个页面都要调）

// #ifdef APP-PLUS
import { robotView } from "@/utils/robotView";
// #endif


// #ifdef APP-PLUS
onShow(() => {
  robotView.show();
});
onHide(() => {
  robotView.hide();
});
// #endif

遇到的坑：

一开始有想统一处理，写在App.vue里面，给各种跳转事件添加拦截，去显示或隐藏这个虚拟区块，但是那样会在进入二级页面再返回tabbar页面时或ios左滑返回时有问题，所以就只能在每个tabbar页面单独处理了，所以就提出了一个工具函数。