ユニアプリでは、plus.nativeObj.View を使用して、tabitem をクリックしたときにページにジャンプせずに他の操作を実行するブロックを作成します。

需要シナリオ:

uni アプレット SDK を使用して、もともと uin-app で開発された WeChat アプレットをネイティブアプリに埋め込みます。ネイティブアプリがアプレットに入った後、タブバーには 4 つの項目 (Home、XX、XX、Mine) が表示されますが、クリックすると選択時に「My」項目を選択した場合は、ネイティブアプリの対応するページにジャンプする必要があります。

公式サイト声明：ページ紹介 | 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 フックでこの機能を調整し、ページが非表示の場合は非表示にします。(「My」ページを除く 3 ページすべてを調整する必要があります)

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


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

遭遇した落とし穴:

当初は処理を統一してApp.vueに記述して、さまざまなジャンプイベントにインターセプトを追加して、この仮想ブロックを表示または非表示にしたいと考えていましたが、これでは二次ページに入ってからタブバーページに戻るときや、タブバーページに戻るときに問題が発生します。 iOSでは左にスワイプして戻りますが、時々問題が発生するため、各タブバーページで個別に処理するしかないため、ツール機能が提案されています。

ユニアプリでは、plus.nativeObj.View を使用して、tabitem をクリックしたときにページにジャンプせずに他の操作を実行するブロックを作成します。

おすすめ