h5-patch.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. // #ifdef H5
  2. import { DOM } from '../component/h5-dom';
  3. import init from '../vueRouter/init';
  4. // #endif
  5. import { warn } from '../helpers/warn';
  6. class Patch {
  7. constructor(H5) {
  8. this.H5 = H5;
  9. this.isLoading = true;
  10. this.loadingCount = 0; // 在APP.vue中进行跳转时,DOMContentLoaded过慢。使用索引来判断
  11. }
  12. on(fun, args, callback) {
  13. if (this.H5) {
  14. return this[fun](args);
  15. }
  16. if (callback) {
  17. callback();
  18. }
  19. }
  20. /**
  21. *把vueRouter的生命周期代理过来
  22. * @param {Object} Router
  23. * @param {Object} vueRouter
  24. * @param {VueComponent} vueVim
  25. */
  26. // eslint-disable-next-line
  27. registerHook(Router, vueRouter, vueVim) {
  28. init(Router, vueRouter, vueVim);
  29. }
  30. /**
  31. * H5 专属 history.back API
  32. * @param {Number} backLayer 需要返回的层级必须是正整数
  33. * 2020年1月14日14:39:38 修复 https://github.com/SilurianYang/uni-simple-router/issues/73
  34. */
  35. // eslint-disable-next-line
  36. historyBack({ backLayer, delta = { from: 'navigateBack' } } = {}) {
  37. const pages = getCurrentPages();
  38. const page = pages[pages.length - 1];
  39. const { onBackPress } = page.$options;
  40. if (onBackPress != null && onBackPress.constructor === Array) {
  41. const callFun = onBackPress[onBackPress.length - 1];
  42. const isNext = callFun.call(page, delta);
  43. if (isNext) {
  44. return true;
  45. }
  46. }
  47. // eslint-disable-next-line
  48. history.go(-backLayer);
  49. }
  50. /**
  51. * 把加载动画添加到dom下面,为什么一定要先添加,后移除。保证动画的连续性
  52. */
  53. appendHTML({
  54. style,
  55. html,
  56. script,
  57. }) {
  58. window.addEventListener('DOMContentLoaded', () => {
  59. const body = document.querySelector('body');
  60. body.appendChild(style);
  61. body.appendChild(html);
  62. body.appendChild(script);
  63. this.toogle('startLodding', true);
  64. });
  65. }
  66. /**
  67. * 页面是否加载完毕触发对应事件
  68. */
  69. toogle(toogle, DOMContentLoaded = false) {
  70. if (DOMContentLoaded && this.loadingCount !== 0) {
  71. this.loadingCount += 1;
  72. return false;
  73. }
  74. try {
  75. this.loadingCount += 1;
  76. if (this.isLoading) {
  77. window[toogle]();
  78. }
  79. } catch (error) {
  80. warn('你使用了 addRoutes API 提前进行了生命周期 并触发了startLodding');
  81. }
  82. }
  83. async setLoadingStatus({
  84. loading,
  85. replaceStyle,
  86. resetStyle,
  87. }) {
  88. this.isLoading = loading;
  89. if (loading) { // 确认需要加载样式 开始插入节点
  90. const userStyle = resetStyle();
  91. const userStyleKeys = Object.keys(userStyle);
  92. for (let i = 0; i < userStyleKeys.length; i += 1) {
  93. const key = userStyleKeys[i];
  94. let html = userStyle[key];
  95. if (key === 'style' && !replaceStyle) { // 开发者设置为追加style
  96. html = DOM[key].innerHTML + html;
  97. }
  98. DOM[key].innerHTML = html;
  99. }
  100. this.appendHTML(DOM);
  101. }
  102. }
  103. }
  104. export default Patch;