nh-uniapp/plugin/uni-simple-router/appRouter/hooks.js

import { uniAppHook, Global } from '../helpers/config';
import {
    callAppHook, getPages, getPageVmOrMp, ruleToUniNavInfo, formatTo, formatFrom, APPGetPageRoute, getPageOnBeforeBack,
} from './util';
import { noop } from '../helpers/util';
import { warn } from '../helpers/warn';
import uniPushTo from './uniNav';

let startBack = false;	// 主要是兼容低端手机返回卡 然后多次返回直接提示退出的问题

/**
 * 还原并执行所有 拦截下来的生命周期 app.vue 及 index 下的生命周期
 * @param {Boolean} callHome // 是否触发首页的生命周期
 *
 * this 为当前 page 对象
 */
const callwaitHooks = function (callHome) {
    return new Promise(async (resolve) => {
        const variation = [];	// 存储一下在uni-app上的变异生命钩子  奇葩的要死
        const {
            appVue, indexVue, onLaunch, onShow, waitHooks, variationFuns, indexCallHooks,
        } = uniAppHook;
        const app = appVue.$options;
        await onLaunch.fun[onLaunch.fun.length - 1].call(appVue, onLaunch.args);	// 确保只执行最后一个 并且强化异步操作
        onShow.fun[onShow.fun.length - 1].call(appVue, onShow.args);	// onshow 不保证异步 直接确保执行最后一个
        if (callHome) {	// 触发首页生命周期
            // eslint-disable-next-line
            for (const key in waitHooks) {
                if (indexCallHooks.includes(key)) {	// 只有在被包含的情况下才执行
                    callAppHook.call(this, waitHooks[key].fun);
                }
            }
        }
        if (onLaunch.isHijack) {	// 还原 onLaunch生命钩子
            app.onLaunch.splice(app.onLaunch.length - 1, 1, onLaunch.fun[0]);
        }
        if (onShow.isHijack) {	// 继续还原 onShow
            app.onShow.splice(app.onShow.length - 1, 1, onShow.fun[0]);
        }
        // eslint-disable-next-line
        for (const key in waitHooks) {	// 还原 首页下的生命钩子
            const item = waitHooks[key];
            if (item.isHijack) {
                if (variationFuns.includes(key)) {	// 变异方法
                    variation.push({ key, fun: item.fun[0] });
                } else {
                    const indeHooks = indexVue[key];
                    // 修复 https://github.com/SilurianYang/uni-simple-router/issues/76
                    setTimeout(() => {	// 异步延迟还原 不然 uni-app 给给触发了
                        indeHooks.splice(indeHooks.length - 1, 1, item.fun[0]);
                    }, 50);
                }
            }
        }
        resolve(variation);
    });
};
/**
 * 还原剩下的奇葩生命钩子
 * @param {Object} variation 当前uni-app中的一些变异方法  奇葩生命钩子
 */
const callVariationHooks = function (variation) {
    for (let i = 0; i < variation.length; i += 1) {
        const { key, fun } = variation[i];
        const indeHooks = uniAppHook.indexVue[key];
        indeHooks.splice(indeHooks.length - 1, 1, fun);
    }
};

/**
 * 主要是对app.vue下onLaunch和onShow生命周期进行劫持
 *
 * this 为当前 page 对象
 */
export const proxyLaunchHook = function () {
    const {
        onLaunch,
        onShow,
    } = this.$options;
    uniAppHook.appVue = this;		// 缓存 当前app.vue组件对象
    if (onLaunch.length > 1) {	// 确保有写 onLaunch 可能有其他混入 那也办法
        uniAppHook.onLaunch.isHijack = true;
        uniAppHook.onLaunch.fun = onLaunch.splice(onLaunch.length - 1, 1, (arg) => {
            uniAppHook.onLaunch.args = arg;
        });		// 替换uni-app自带的生命周期
    }
    if (onShow.length > 0) {
        uniAppHook.onShow.isHijack = true;
        uniAppHook.onShow.fun = onShow.splice(onShow.length - 1, 1, (arg) => {
            uniAppHook.onShow.args = arg;
            if (uniAppHook.pageReady) {		// 因为还有app切前台后台的操作
                callAppHook.call(this, uniAppHook.onShow.fun, arg);
            }
        });	// 替换替换 都替换
    }
};

/**
 * 把指定页面的生命钩子函数保存并替换
 * this 为当前 page 对象
 */
export const proxyIndexHook = function (Router) {
    const { needHooks, waitHooks } = uniAppHook;
    const options = this.$options;
    uniAppHook.indexVue = options;
    for (let i = 0; i < needHooks.length; i += 1) {
        const key = needHooks[i];
        if (options[key] != null) {	// 只劫持开发者声明的生命周期
            const { length } = options[key];
            // eslint-disable-next-line
            const whObject= waitHooks[key]={};
            whObject.fun = options[key].splice(length - 1, 1, noop);	// 把实际的页面生命钩子函数缓存起来,替换原有的生命钩子
            whObject.isHijack = true;
        }
    }
    // eslint-disable-next-line
    triggerLifeCycle.call(this, Router);	// 接着 主动我们触发导航守卫
};
/**
 * 触发全局beforeHooks 生命钩子
 * @param {Object} _from // from  参数
 * @param {Object} _to  // to 参数
 *
 * this 为当前 Router 对象
 */
const beforeHooks = function (_from, _to) {
    return new Promise(async (resolve) => {
        const beforeHooksFun = this.lifeCycle.beforeHooks[0];
        if (beforeHooksFun == null) {
            return resolve();
        }
        await beforeHooksFun.call(this, _to, _from, resolve);
    });
};
/**
 * 触发全局afterEachHooks 生命钩子
 * @param {Object} _from // from  参数
 * @param {Object} _to  // to 参数
 *
 * this 为当前 Router 对象
 */
const afterEachHooks = function (_from, _to) {
    const afterHooks = this.lifeCycle.afterHooks[0];
    if (afterHooks != null && afterHooks.constructor === Function) {
        afterHooks.call(this, _to, _from);
    }
};
/**
 * 触发全局 beforeEnter 生命钩子
 * @param {Object} finalRoute 	// 当前格式化后的路由参数
 * @param {Object} _from // from  参数
 * @param {Object} _to  // to 参数
 *
 * this 为当前 Router 对象
 */
const beforeEnterHooks = function (finalRoute, _from, _to) {
    return new Promise(async (resolve) => {
        const { beforeEnter } = finalRoute.route;
        if (beforeEnter == null || beforeEnter.constructor !== Function) {	// 当前这个beforeEnter不存在 或者类型错误
            return resolve();
        }
        await beforeEnter.call(this, _to, _from, resolve);
    });
};
/**
 * 触发返回事件公共方法
 * @param {Object} page	用getPages获取到的页面栈对象
 * @param {Object} options 	当前vue页面对象
 * @param {Object} backLayerC	需要返回页面的层级
   *
 * this 为当前 Router 对象
 */
const backCallHook = function (page, options, backLayerC = 1) {
    const route = APPGetPageRoute([page]);
    const NAVTYPE = 'RouterBack';
    // eslint-disable-next-line
    transitionTo.call(this, { path: route.path, query: route.query }, NAVTYPE, (finalRoute, fnType) => {
        if (fnType != NAVTYPE) { // 返回时的api如果有next到其他页面 那么必须带上NAVTYPE  不相同则表示需要跳转到其他页面
            return uniPushTo(finalRoute, fnType);
        }
        if (startBack) { // 如果当前处于正在返回的状态
            return warn('当前处于正在返回的状态，请稍后再试！');
        }
        startBack = true;	// 标记开始返回
        options.onBackPress = [noop];	// 改回uni-app可执行的状态
        setTimeout(() => {
            this.back(backLayerC, undefined, true); // 越过加锁验证
            startBack = false;	// 返回结束
        });
    });
};
/**
 * 处理返回按钮的生命钩子
 * @param {Object} options 当前 vue 组件对象下的$options对象
 * @param {Array} args  当前页面是点击头部返回还是底部返回
 *
 * this 为当前 Router 对象
 */
export const beforeBackHooks = async function (options, args) {
    const isNext = await getPageOnBeforeBack(args); // 执行onBeforeBack
    if (isNext === false) { // onBeforeBack  返回了true 阻止了跳转
        Global.LockStatus = false; // 也需要解锁
        return false;
    }
    const page = getPages(-3);	// 上一个页面对象
    backCallHook.call(this, page, options);
};
/**
 * 处理back api的生命钩子
 * @param {Object} options 当前 vue 组件对象下的$options对象
 * @param {Array} args  当前页面是点击头部返回还是底部返回
 *
 * this 为当前 Router 对象
 */
export const backApiCallHook = async function (options, args) {
    await getPageOnBeforeBack(args);
    const { backLayerC } = Global;
    const pages = getPages();
    let page = null;
    if (backLayerC > pages.length - 1 || backLayerC == pages.length - 1) {	// 返回的首页 我们需要显示tabbar拦截
        // eslint-disable-next-line
        page = pages[0];
    } else {
        page = pages[pages.length - 2];
    }
    backCallHook.call(this, page, options, backLayerC);
};
/**
 *  v1.5.4+
 * beforeRouteLeave 生命周期
 * @param {Object} to       将要去的那个页面 to对象
 * @param {Object} from     从那个页面触发的 from对象
 *  @param {Boolean} leaveHook:? 是否为 beforeRouteLeave 触发的next 到别处 如果是则不再触发 beforeRouteLeave 生命钩子
 * this 为当前 Router 对象
 */
const beforeRouteLeaveHooks = function (from, to, leaveHook) {
    return new Promise((resolve) => {
        if (leaveHook) { // 我们知道这个是来自页面beforeRouteLeave next到其他地方，所有不必再执行啦
            warn('beforeRouteLeave next到其他地方，无须再执行！');
            return resolve();
        }
        if (from.path == to.path) { // 进入首页的时候不触发
            return resolve();
        }
        const currentPage = getPages(-2); // 获取到全部的页面对象
        const callThis = getPageVmOrMp(currentPage); // 获取到页面的 $vm 对象 及 page页面的this对象
        const { beforeRouteLeave } = callThis.$options; // 查看当前是否有开发者声明
        if (beforeRouteLeave == null) {
            warn('当前页面下无 beforeRouteLeave 钩子声明，无须执行！');
            return resolve();
        }
        if (beforeRouteLeave != null && beforeRouteLeave.constructor !== Function) {
            warn('beforeRouteLeave 生命钩子声明错误，必须是一个函数！');
            return resolve();
        }
        beforeRouteLeave.call(callThis, to, from, resolve); // 执行生命钩子
    });
};

/**
 * 验证当前 next() 管道函数是否支持下一步
 *
 * @param {Object} Intercept 拦截到的新路由规则
 * @param {Object} fnType 跳转页面的类型方法 原始的
 * @param {Object} navCB 回调函数 原始的
 * @param {Boolean} leaveHookCall:? 是否为 beforeRouteLeave 触发的next 做拦截判断
 * this 为当前 Router 对象
 *
 */
const isNext = function (Intercept, fnType, navCB, leaveHookCall = false) {
    return new Promise((resolve, reject) => {
        if (Intercept == null) {		// 什么也不做 直接执行下一个钩子
            return resolve();
        }
        if (Intercept === false) {		// 路由中断
            Global.LockStatus = false; // 解锁跳转状态
            return reject('路由终止');
        }
        if (Intercept.constructor === String) {		// 说明 开发者直接传的path 并且没有指定 NAVTYPE 那么采用原来的navType
            reject('next到其他页面');
            // eslint-disable-next-line
            return transitionTo.call(this, Intercept, fnType, navCB,leaveHookCall);
        }
        if (Intercept.constructor === Object) {	// 有一系列的配置 包括页面切换动画什么的
            reject('next到其他页面');
            // eslint-disable-next-line
            return transitionTo.call(this, Intercept, Intercept.NAVTYPE || fnType, navCB,leaveHookCall);
        }
    });
};
/**
 * 核心方法 处理一系列的跳转配置
 * @param {Object} rule 当前跳转规则
 * @param {Object} fnType 跳转页面的类型方法
 * @param {Object} navCB:? 回调函数
 * @param {Boolean} leaveHook:? 是否为 beforeRouteLeave 触发的next 到别处 如果是则不再触发 beforeRouteLeave 生命钩子
 *
 * this 为当前 Router 对象
 */
export const transitionTo = async function (rule, fnType, navCB, leaveHook = false) {
    await this.lifeCycle.routerbeforeHooks[0].call(this); // 触发内部跳转前的生命周期
    const finalRoute = ruleToUniNavInfo(rule, this.CONFIG.routes);		// 获得到最终的 route 对象
    const _from = formatFrom(this.CONFIG.routes);	// 先根据跳转类型获取 from 数据
    const _to = formatTo(finalRoute);	// 再根据跳转类型获取 to 数据
    try {
        const leaveResult = await beforeRouteLeaveHooks.call(this, _from, _to, leaveHook); // 执行页面中的 beforeRouteLeave 生命周期 v1.5.4+
        await isNext.call(this, leaveResult, fnType, navCB, true);	// 验证当前是否继续  可能需要递归  那么 我们把参数传递过去

        const beforeResult = await beforeHooks.call(this, _from, _to);		// 执行 beforeEach 生命周期
        await isNext.call(this, beforeResult, fnType, navCB);	// 验证当前是否继续  可能需要递归  那么 我们把参数传递过去

        const enterResult = await beforeEnterHooks.call(this, finalRoute, _from, _to);	// 接着执行 beforeEnter 生命周期
        await isNext.call(this, enterResult, fnType, navCB);	// 再次验证  如果生命钩子多的话应该写成递归或者循环
    } catch (e) {
        warn(e); // 打印开发者操作的日志
        return false;
    }
    if (navCB) {
        navCB.call(this, finalRoute, fnType);	// 执行当前回调生命周期
    }
    afterEachHooks.call(this, _from, _to);
    await this.lifeCycle.routerAfterHooks[0].call(this); // 触发内部跳转前的生命周期
};
/**
 * 主动触发导航守卫
 * @param {Object} Router 当前路由对象
 *
 * this  当前vue页面组件对象
 */
export const triggerLifeCycle = function (Router) {
    const topPage = getCurrentPages()[0];
    if (topPage == null) {
        return warn('打扰了,当前一个页面也没有 这不是官方的bug是什么??');
    }
    const { query, page } = getPageVmOrMp(topPage, false);
    transitionTo.call(Router, { path: page.route, query }, 'push', async (finalRoute, fnType) => {
        let variation = [];
        if (`/${page.route}` == finalRoute.route.path) {		// 在首页不动的情况下
            uniAppHook.pageReady = true;		// 标致着路由已经就绪 可能准备起飞
            await callwaitHooks.call(this, true);
        } else {	// 需要跳转
            variation = await callwaitHooks.call(this, false);	// 只触发app.vue中的生命周期
            await uniPushTo(finalRoute, fnType);
        }
        plus.nativeObj.View.getViewById('router-loadding').close();
        callVariationHooks(variation);
        uniAppHook.pageReady = true;		// 标致着路由已经就绪 可能准备起飞
    });
};

/**
 * 处理tabbar点击拦截事件
 * @param {Object} path 当前需要跳转的tab页面路径
 *
 * this 为当前 Router 对象
 */
export const beforeTabHooks = function (path) {
    transitionTo.call(this, { path: `/${path}`, query: {} }, 'pushTab', (finalRoute, fnType) => {
        uniPushTo(finalRoute, fnType);
    });
};