安装及使用
<p>[TOC]</p>
<h4>安装</h4>
<p>七巧板基于 VUE （2.5）， Webpack (4.0) 请确保已具备较新的 node 环境。</p>
<ol>
<li>
<p>请在工程下，添加 vhall 私有 npm 源配置文件.npmrc</p>
<blockquote>
<p>@vhall:registry <a href="http://192.168.66.26:4873">http://192.168.66.26:4873</a></p>
</blockquote>
</li>
<li>
<p>在工程下执行</p>
<blockquote>
<p>npm i @vhall/fe-bu-components</p>
</blockquote>
</li>
<li>
<p>在项目中引入 七巧板组件库</p>
<blockquote>
<p>tangram 默认会有 vss 接口配置文件，但如果有额外接口需要配置，可以在 Vue.use 时，传入 config 配置项，同时 baseUrl 需要根据构建环境传入不同的值</p>
</blockquote>
<p>示例代码</p>
<pre><code class="language-javascript">import tangram from "@vhall/fe-bu-components";
Vue.use(tangram, {
config: {
startLive: ["/api/webinar/v1/webinar/start-live", "POST"]
},
baseUrl: "//t-vss.vhall.com"
});</code></pre>
</li>
</ol>
<h4>使用</h4>
<ol>
<li>
<p>$vhallFecth
tangram 会在原型上绑定通用请求方式 $vhallFecth 并返回 Promise，请求 vss 接口可以直接使用，请求业务接口时需要在 Vue.use 时传入自定义 api 配置，或者自己实现请求方法。 项目中使用方式如下：</p>
<blockquote>
<p>his.$vhallFetch('startLive', data).then</p>
</blockquote>
</li>
<li>
<p>$vhallEvent
tangram 会在原型上绑定一个 EventBus 用于业务和组件之间相互通信，项目中使用方式如下：</p>
<blockquote>
<p>this.$vhallEvent.$on('live_start',data=>{})
this.$vhallEvent.$off('live_start',data=>{})</p>
</blockquote>
</li>
<li>从业务接口获取的某些信息需要存入 sessionStorage 中，目前有
<ul>
<li>vhall-vsstoken // vssToken，字符串</li>
<li>vhall-permission // 权限码数组，/v1/user/get-access-list 获得
<pre><code class="language-javascript">sessionStorage.setItem("vhall-permission", JSON.stringify(res.data));
sessionStorage.setItem("vhall-vsstoken", res.data.vss_token);</code></pre></li>
</ul></li>
<li>从业务接口获取的某些信息需要存入 localStorage 中，目前有
<ul>
<li>vhall-userInfo // 个人信息，object ,登录接口获得
<pre><code class="language-javascript">localStorage.setItem("vhall-userInfo", JSON.stringify(res.data));</code></pre></li>
</ul></li>
<li>聊天 SDK、文档 SDK,播放器 SDK,都是在组件内实例化，互动 SDK 是在组件外实例化，实例化顺序为：聊天 > 文档 > 播放器/互动，所以 需要监听聊天组件派发的聊天实例成功的事件再初始化文档组件和其他组件。 pc 和 mobile 的 聊天组件，文档组件，播放器组件 SDK 实例初始化成功派发的事件统一为
<ul>
<li>component_chatSDK_ready</li>
<li>component_docSDK_ready</li>
<li>component_playerSDK_ready</li>
</ul></li>
</ol>