blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/assets/js/v-b15becb0.9810a63f.js

1 line
44 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[172],{8504:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-b15becb0",path:"/reference/plugin/plugins/qiankun.html",title:"@fesjs/plugin-qiankun",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"主应用配置",slug:"主应用配置",children:[{level:3,title:"第一步：注册子应用",slug:"第一步-注册子应用",children:[]},{level:3,title:"第二步：装载子应用",slug:"第二步-装载子应用",children:[]}]},{level:2,title:"子应用配置",slug:"子应用配置",children:[{level:3,title:"第一步：插件注册",slug:"第一步-插件注册",children:[]},{level:3,title:"第二步：配置运行时生命周期钩子（可选）",slug:"第二步-配置运行时生命周期钩子-可选",children:[]}]},{level:2,title:"父子应用通讯",slug:"父子应用通讯",children:[{level:3,title:"配合 useModel 使用",slug:"配合-usemodel-使用",children:[]},{level:3,title:"基于 props 传递",slug:"基于-props-传递",children:[]},{level:3,title:"MicroApp",slug:"microapp",children:[]},{level:3,title:"MicroAppWithMemoHistory",slug:"microappwithmemohistory",children:[]}]}],filePathRelative:"reference/plugin/plugins/qiankun.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5574:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});var p=a(6252);const t=(0,p._)("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),(0,p.Uk)(" @fesjs/plugin-qiankun")],-1),e={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},o={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},c=(0,p.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>\n <span class="token property">&quot;@fesjs/plugin-qiankun&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步：注册子应用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// 注册子应用信息</span>\n <span class="token literal-property property">apps</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>\n <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8001&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>\n <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 传递给子应用的数据</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app2&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>\n <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8002&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步：装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径！！！待完善...</p></div><p>假设我们的系统之前有这样的一些路由：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>，只需要增加这样一些配置即可：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/son&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;son&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;子应用&quot;</span><span class="token punctuation">,</span>\n <span class="token string-property property">&quot;microApp&quot;</span><span class="token operator">:</span> <span class="token string">&quot;app1&quot;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>当前我们依然提倡约定路由的方式，在<code>src/pages</code> 目录新建 <code>son.vue</code>：</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>config</span><span class="token punctuation">&gt;</span></span>\n{\n &quot;name&quot;: &quot;son&quot;,\n &quot;title&quot;: &quot;子应用&quot;,\n &quot;microApp&quot;: &quot;app1&quot;\n}\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>config</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroApp /&gt;</code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。</p></div><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroAppWithMemoHistory /&gt;</code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 <code>hash</code> 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<code>&lt;MicroAppWithMemoHistory /&gt;</code> 出现了，完美解决上面的问题。</p><p><code>&lt;MicroAppWithMemoHistory /&gt;</code> 相比 <code>&lt;MicroApp /&gt;</code> ，需要多传入 <code>url</code> 参数，用于指定加载子应用什么路由页面。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步：插件注册</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步：配置运行时生命周期钩子（可选）</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象，并实现每一个生命周期钩子，其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 应用加载之前</span>\n <span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 bootstrap&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 应用 render 之前触发</span>\n <span class="token keyword">async</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 mount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 当 props 更新时触发</span>\n <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 update&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 应用卸载之后触发</span>\n <span class="token keyword">async</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 unmount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p>',33),l={id:"配合-usemodel-使用",tabindex:"-1"},r=(0,p._)("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),u=(0,p.uE)('<p>确保已经安装了 <code>@fesjs/plugin-model</code>：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>\n <span class="token property">&quot;@fesjs/plugin-model&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用，直接通过 props 传递即可：</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>\n <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">,</span>\n user\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ul><li>如果使用路由绑定式消费子应用，那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用，如：</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n state\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>， 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">&#39;qiankunStateFromMain&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n mainState\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）</li><li>子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table>',16),i={},k=(0,a(3744).Z)(i,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),i=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p.Uk)("Fes.js plugin for "),(0,p._)("a",e,[(0,p.Uk)("qiankun"),(0,p.Wm)(a)]),(0,p.Uk)("，参考"),(0,p._)("a",o,[(0,p.Uk)("@umijs/plugin-qiankun"),(0,p.Wm)(a)]),(0,p.Uk)(" 实现，喜欢 React 的同学推荐直接用 Umi。")]),c,(0,p._)("h3",l,[r,(0,p.Uk)(" 配合 "),(0,p.Wm)(i,{to:"/reference/plugin/plugins/model.html"},{default:(0,p.w5)((()=>[(0,p.Uk)("useModel")])),_:1}),(0,p.Uk)(" 使用")]),u],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]);
Reference in New Issue View Git Blame Copy Permalink