Browse Source

feat: 大会员pc微前端框架qiankun改造

cuiyalong 3 năm trước cách đây
mục cha
commit
28530f47c1
1 tập tin đã thay đổi với 42 bổ sung193 xóa
  1. 42 193
      src/web/templates/frontRouter/pc/page_big_pc/sess/index.html

+ 42 - 193
src/web/templates/frontRouter/pc/page_big_pc/sess/index.html

@@ -13,57 +13,28 @@
     <link href='{{Msg "seo" "cdn"}}/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>
     <link href='{{Msg "seo" "cdn"}}/css/pc.css?v={{Msg "seo" "version"}}' rel="stylesheet"/>
     <link href='{{Msg "seo" "cdn"}}/pccss/public-nav-1200.css?v={{Msg "seo" "version"}}' rel="stylesheet" type="text/css"/>
-    <!-- S-注入  -->
-    <!-- 反爬虫验证码 -->
     <script src='{{Msg "seo" "cdn"}}/antiRes/js/mainHook.js?v={{Msg "seo" "version"}}'></script>
-    <meta name="importmap-type" content="systemjs-importmap">
+    <!-- 高级语法兼容性处理  -->
     <script>
-      if (String.prototype.startsWith === 'undefined') {
-        String.prototype.startsWith = function (str) {
-          if(str==null||str==""||this.length==0||str.length>this.length)
-            return false;
-          if(this.substr(0,str.length)==str)
-            return true;
-          else
-            return false;
+        if (String.prototype.startsWith === 'undefined') {
+            String.prototype.startsWith = function (str) {
+                if (str==null || str == "" || this.length == 0 || str.length > this.length) {
+                    return false
+                }
+                if (this.substr(0,str.length) == str) {
+                    return true
+                } else {
+                    return false
+                }
+            }
         }
-      }
-      if (typeof Promise === 'undefined')
-        document.write('<script src="https://cdn-common.jianyu360.com/cdn/lib/bluebird/3.7.2/js/browser/bluebird.core.min.js"><\/script>');
-      if (typeof fetch === 'undefined')
-        document.write('<script src="//cdn-common.jianyu360.com/cdn/lib/whatwg-fetch/3.4.1/dist/fetch.umd.min.js"><\/script>');
-    </script>
-    <script type="systemjs-importmap" crossorigin="anonymous">
-      {
-        "imports": {
-          "app": "/page_big_pc/js/app.js?v={{Msg "seo" "big_pc_v"}}",
-          "single-spa": "https://cdn-common.jianyu360.com/cdn/lib/single-spa/4.3.7/lib/system/single-spa.min.js",
-          "vue": "https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js",
-          "vue-router": "https://cdn-common.jianyu360.com/cdn/lib/vue-router/3.1.5/vue-router.min.js",
-          "vuex": "https://cdn-common.jianyu360.com/cdn/lib/vuex/3.4.0/vuex.min.js",
-          "axios": "https://cdn-common.jianyu360.com/cdn/lib/axios/0.19.2/axios.min.js",
-          "echarts": "https://cdn-common.jianyu360.com/cdn/lib/echarts/4.8.0/echarts.min.js",
-          "lodash": "https://cdn-common.jianyu360.com/cdn/lib/lodash/4.17.21/lodash.min.js",
-          "moment": "https://cdn-common.jianyu360.com/cdn/lib/moment/2.29.1/min/moment.min.js"
+        if (typeof Promise === 'undefined') {
+            document.write('<script src="https://cdn-common.jianyu360.com/cdn/lib/bluebird/3.7.2/js/browser/bluebird.core.min.js"><\/script>');
+        }
+        if (typeof fetch === 'undefined') {
+            document.write('<script src="//cdn-common.jianyu360.com/cdn/lib/whatwg-fetch/3.4.1/dist/fetch.umd.min.js"><\/script>');
         }
-      }
     </script>
-    <!-- S 预加载一些库资源 -->
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/single-spa/4.3.7/lib/system/single-spa.min.js" as="script" crossorigin="anonymous" />
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js" as="script" crossorigin="anonymous" />
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/axios/0.19.2/axios.min.js" as="script" crossorigin="anonymous" />
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/echarts/4.8.0/echarts.min.js" as="script" crossorigin="anonymous" />
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/lodash/4.17.21/lodash.min.js" as="script" crossorigin="anonymous" />
-    <link rel="preload" href="//cdn-common.jianyu360.com/cdn/lib/moment/2.29.1/min/moment.min.js" as="script" crossorigin="anonymous" />
-     <!-- E 预加载库资源 -->
-     <!-- S 注入 -->
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/import-map-overrides/2.2.0/dist/import-map-overrides.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/systemjs/6.8.3/dist/system.min.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/systemjs/6.8.3/dist/extras/amd.min.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/systemjs/6.8.3/dist/extras/named-exports.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/systemjs/6.8.3/dist/extras/named-register.min.js"></script>
-    <script src="https://cdn-common.jianyu360.com/cdn/lib/systemjs/6.8.3/dist/extras/use-default.min.js"></script>
-    <!-- E-注入  -->
     <style>
         #public-nav {
             border-bottom: 1px solid #e0e0e0;
@@ -78,163 +49,41 @@
 </head>
 <body class="page--docs--index">
 {{include "/common/pchead.html"}}
-<!-- S-注入  -->
-<div class="w-box page-container">
-    <div id="single-spa-app"></div>
+<div class="w-box page-container" >
+    <div id="main-app"></div>
 </div>
-<!-- See https://github.com/joeldenning/import-map-overrides#user-interface  -->
-<import-map-overrides-full show-when-local-storage="overrides-ui"></import-map-overrides-full>
-<!-- E-注入  -->
+<!-- 主应用依赖 -->
+<script src=//cdn-common.jianyu360.com/cdn/lib/url-polyfill/1.1.12/url-polyfill.min.js></script>
+<script src=//cdn-common.jianyu360.com/cdn/lib/qiankun/2.7.0/index.umd.min.js></script>
 <script>
-  // 按需引入参考 https://github.com/systemjs/systemjs/blob/master/docs/errors.md#8
-  (function() {
-    Promise.all([
-      System.import('single-spa'),
-      System.import('vue'),
-      System.import('vue-router'),
-      System.import('vuex'),
-      System.import('axios'),
-      System.import('moment').then(function (moment) {
-        moment.defineLocale('zh-cn', {
-          months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
-            '_'
-          ),
-          monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(
-            '_'
-          ),
-          weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
-          weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
-          weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
-          longDateFormat: {
-            LT: 'HH:mm',
-            LTS: 'HH:mm:ss',
-            L: 'YYYY/MM/DD',
-            LL: 'YYYY年M月D日',
-            LLL: 'YYYY年M月D日Ah点mm分',
-            LLLL: 'YYYY年M月D日ddddAh点mm分',
-            l: 'YYYY/M/D',
-            ll: 'YYYY年M月D日',
-            lll: 'YYYY年M月D日 HH:mm',
-            llll: 'YYYY年M月D日dddd HH:mm',
-          },
-          meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
-          meridiemHour: function (hour, meridiem) {
-            if (hour === 12) {
-              hour = 0;
-            }
-            if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') {
-              return hour;
-            } else if (meridiem === '下午' || meridiem === '晚上') {
-              return hour + 12;
-            } else {
-              // '中午'
-              return hour >= 11 ? hour : hour + 12;
+    window.__RouterBase = '/swordfish/page_big_pc'
+    qiankun.registerMicroApps(
+        [
+            {
+                name: 'bigmember-pc',
+                entry: '/page_big_pc/index.html',
+                container: '#main-app',
+                activeRule: '/'
             }
-          },
-          meridiem: function (hour, minute, isLower) {
-            var hm = hour * 100 + minute;
-            if (hm < 600) {
-              return '凌晨';
-            } else if (hm < 900) {
-              return '早上';
-            } else if (hm < 1130) {
-              return '上午';
-            } else if (hm < 1230) {
-              return '中午';
-            } else if (hm < 1800) {
-              return '下午';
-            } else {
-              return '晚上';
-            }
-          },
-          calendar: {
-            sameDay: '[今天]LT',
-            nextDay: '[明天]LT',
-            nextWeek: function (now) {
-              if (now.week() !== this.week()) {
-                return '[下]dddLT';
-              } else {
-                return '[本]dddLT';
-              }
-            },
-            lastDay: '[昨天]LT',
-            lastWeek: function (now) {
-              if (this.week() !== now.week()) {
-                return '[上]dddLT';
-              } else {
-                return '[本]dddLT';
-              }
+        ],
+        {
+            beforeLoad: function (app) {
+                console.log('before load', app) 
             },
-            sameElse: 'L',
-          },
-          dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
-          ordinal: function (number, period) {
-            switch (period) {
-              case 'd':
-              case 'D':
-              case 'DDD':
-                return number + '日';
-              case 'M':
-                return number + '月';
-              case 'w':
-              case 'W':
-                return number + '周';
-              default:
-                return number;
-            }
-          },
-          relativeTime: {
-            future: '%s后',
-            past: '%s前',
-            s: '几秒',
-            ss: '%d 秒',
-            m: '1 分钟',
-            mm: '%d 分钟',
-            h: '1 小时',
-            hh: '%d 小时',
-            d: '1 天',
-            dd: '%d 天',
-            w: '1 周',
-            ww: '%d 周',
-            M: '1 个月',
-            MM: '%d 个月',
-            y: '1 年',
-            yy: '%d 年',
-          },
-          week: {
-            // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
-            dow: 1, // Monday is the first day of the week.
-            doy: 4, // The week that contains Jan 4th is the first week of the year.
-          },
-        })
-      }),
-      System.import('lodash')
-    ]).then(function (modules) {
-      var singleSpa = modules[0];
-      var Vue = modules[1];
-      var VueRouter = modules[2];
-
-      Vue.use(VueRouter)
-
-      singleSpa.registerApplication(
-        'app',
-        function() {
-          return System.import('app')
-        },
-        function (location) {
-          return true
+            beforeMount: [
+                function (app) {
+                    console.log('before mount', app) 
+                }
+            ]
         }
-      )
-
-      singleSpa.start();
-    })
-  })()
+    )
+    qiankun.start()
 </script>
 <script src='{{Msg "seo" "cdn"}}/js/jquery.cookie.js?v={{Msg "seo" "version"}}' type="text/javascript"></script>
 <script src='{{Msg "seo" "cdn"}}/js/public-nav.js?v={{Msg "seo" "version"}}' type="text/javascript"></script>
 <script>
     $(function () {
-      haslogin({{.T.logid}});
+        haslogin({{.T.logid}});
     })
 </script>
 <!--S-百度统计-->