In uni-app, plus.nativeObj.View is used to create blocks to achieve other operations without jumping to the page when clicking on a tabitem.

Demand scenario:

Use the uni applet SDK to embed the WeChat applet originally developed with uin-app into the native App; after the native App enters the applet, the tabbar has 4 items (Home, XX, XX, Mine), but when the click When selecting the "My" item, you need to jump to the corresponding page of the native App.

Official website statement: Page introduction | uni-app official website

Solution ideas and code:

1.Write a tool function: 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. Adjust this function in the onShow hook of the tabBar page of each mini program, and hide it when the page is hidden. (All three pages except the "My" page must be adjusted)

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


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

Pitfalls encountered:

At first, I wanted to unify the process and write it in App.vue to add interceptions to various jump events to show or hide this virtual block. However, this would cause problems when entering the secondary page and then returning to the tabbar page or swiping left on iOS to return. Sometimes there are problems, so it can only be processed separately on each tabbar page, so a tool function is proposed.