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); }); };