封装H5与微信小程序的各种跳转交互

 个人开发的塔罗牌占卜小程序：【问问塔罗牌】 快来瞧瞧吧！

 

import { getObjToUrlParams } from "./index";

type Query = { [key in string]: any };

interface WechatMinipro {
	/** 当前是否处于微信小程序环境 */
	inWechatMinipro: boolean;

	/** 检测当前环境是否小程序环境 */
	onReady: () => void;
	/** 关闭所有页面，跳转到任意页面 */
	reLaunch: (url: string, query?: Query) => Promise<boolean>;
	/** 关闭所有非 Tabbar 页面，跳转到 tabBar 页面 */
	switchTab: (url: string, query?: Query) => Promise<boolean>;
	/** 保留当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 */
	navigateTo: (url: string, query?: Query) => Promise<boolean>;
	/** 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。 */
	redirectTo: (url: string, query?: Query) => Promise<boolean>;
	/** 关闭当前页面，返回上一页面或多级页面，默认返回上一级也看 */
	navigateBack: (delta: number) => Promise<boolean>;
}

export default class implements WechatMinipro {
	inWechatMinipro = false;

	constructor() {
		if (window.WeixinJSBridge && window.WeixinJSBridge.invoke) {
			document.addEventListener("WeixinJSBridgeReady", this.onReady.bind(this), false);
			return;
		}

		this.onReady();
	}

	onReady() {
		this.inWechatMinipro = window.__wxjs_environment === "miniprogram";
	}

	reLaunch(url: string, query?: Query): Promise<boolean> {
		return new Promise((resolve, reject) => {
			if (!this.inWechatMinipro) {
				return reject(false);
			}

			window.wx.miniProgram.reLaunch({
				url: `${url}?${getObjToUrlParams(query || {})}`,
				success: () => resolve(true),
				fail: () => reject(false)
			});
		});
	}

	switchTab(url: string, query?: Query): Promise<boolean> {
		return new Promise((resolve, reject) => {
			if (!this.inWechatMinipro) {
				return reject(false);
			}

			window.wx.miniProgram.switchTab({
				url: `${url}?${getObjToUrlParams(query || {})}`,
				success: () => resolve(true),
				fail: () => reject(false)
			});
		});
	}

	navigateTo(url: string, query?: Query): Promise<boolean> {
		return new Promise((resolve, reject) => {
			if (!this.inWechatMinipro) {
				return reject(false);
			}

			window.wx.miniProgram.navigateTo({
				url: `${url}?${getObjToUrlParams(query || {})}`,
				success: () => resolve(true),
				fail: () => reject(false)
			});
		});
	}

	redirectTo(url: string, query?: Query): Promise<boolean> {
		return new Promise((resolve, reject) => {
			if (!this.inWechatMinipro) {
				return reject(false);
			}

			window.wx.miniProgram.redirectTo({
				url: `${url}?${getObjToUrlParams(query || {})}`,
				success: () => resolve(true),
				fail: () => reject(false)
			});
		});
	}

	navigateBack(delta: number = 1): Promise<boolean> {
		return new Promise((resolve, reject) => {
			if (!this.inWechatMinipro) {
				return reject(false);
			}

			window.wx.miniProgram.navigateBack({
				delta: delta,
				success: () => resolve(true),
				fail: () => reject(false)
			});
		});
	}
}