本文将详细介绍如何使用 npm 包 Ember-cli-intercom-messenger，包括安装、配置和示例代码等内容。该 npm 包可以方便地在 Ember 应用中集成 intercom messenger，实现即时通讯功能。
安装
使用 npm 安装该包：
npm install ember-cli-intercom-messenger --save
配置
在 config/environment.js 文件中添加以下配置：
ENV['intercom-messenger'] = {
appId: 'your-app-id'
};其中，appId 为 intercom 应用的 ID。此外，还需在应用的 index.html 文件中引入 intercom 应用的脚本：
<script>
window.intercomSettings = {
app_id: 'your-app-id'
};
</script>
<script>
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/your-app-id';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>使用
在需要使用 intercom 的地方，添加以下代码：
-- -------------------- ---- -------
------ --------------- ---- -------------------------------------------------
------ ------- ------------------------
--------- -----------------------
-------- -
--------------- -
-------------------------------------
--
---------------- -
-------------------------------------
--
----------- -
---------------------------------
-
-
---在模板文件中，使用以下代码触发消息窗口：
<button {{action "openMessenger"}}>Open messenger</button>
<button {{action "closeMessenger"}}>Close messenger</button>
<button {{action "openInbox"}}>Open inbox</button>以上代码中，showMessenger() 方法用于打开消息窗口，hideMessenger() 方法用于关闭消息窗口，而 showInbox() 方法用于打开收件箱。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
------------------- -
------ -------------
-
--
------ ----
---- -------------------- ---- -------
---- ---------- ---
--------
----------------------- - -
------- -------------
--
---------
--------
--------------- ------------ ----------------------- ----------------------------------------------------------------------------------- -------------- --------------------------------------------------------------------------------------- ---------------- --------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------- -------------------- ---- -------
-- ------------------------------------
------ ----- ---- --------
------ --------------- ---- -------------------------------------------------
------ ------- ------------------------
--------- -----------------------
-------- -
--------------- -
-------------------------------------
--
---------------- -
-------------------------------------
--
----------- -
---------------------------------
-
-
---<!-- app/templates/components/intercom-messenger.hbs -->
<button {{action "openMessenger"}}>Open messenger</button>
<button {{action "closeMessenger"}}>Close messenger</button>
<button {{action "openInbox"}}>Open inbox</button>总结
通过本文的介绍，你已经掌握了如何使用 Ember-cli-intercom-messenger 包在 Ember 应用中集成 intercom messenger。在实际应用中，你还可以根据需求做相应的定制和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be081e8991b448d98a3