npm 是 Node.js 的包管理器，用来帮助开发者更方便地管理自己的项目依赖。而 wshare 则是一个非常有用的 npm 包，它可以帮助我们把网页中的内容快速分享到社交媒体上，并且不需要配置一系列的 API。本文就详细介绍一下 wshare 的使用方法。
wshare 的功能
wshare 可以将我们的网页快速分享到 Facebook、Twitter 和 LinkedIn 等社交媒体上，它使用的分享链接是该网页的链接，而不是特定的接口。同时，wshare 还自带了模板代码和样式，我们可以自定义分享按钮和样式。
安装
首先需要安装 wshare。
npm install wshare --save
使用
在我们的 HTML 文件中，需要引入 wshare 的代码，如下所示：
<link rel="stylesheet" href="node_modules/wshare/dist/wshare.min.css"> <script src="node_modules/wshare/dist/wshare.min.js"></script>
接着在页面 HTML 中需要出现分享按钮的位置创建一个容器 div，如下所示：
<div id="share-buttons"></div>
最后，在页面的底部或 script 中添加下面代码：
-- -------------------- ---- -------
----- ------------ - ----------------------------------------
----- ------------ - -
------ -------
------------ -------
---- ---------------------
------ -------------------------------
-
----- ----- - --- --------
---------- -------------
--------- -
-
--- -----------
----- --- ----------------------
----- -----------
---- --------------------------------------------------------------------------------------------------------------
--
-
--- ----------
----- --- ------------
----- ----------
---- ----------------------------------------------------------------------------------------------------------------
--
-
--- -----------
----- --- --------------------
----- -----------
---- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--
--
--以上代码创建了一个 wshare 的实例 share，创建时需要传入容器元素 container 和需要分享到的网络 networks，其中 networks 按钮的信息包括 id、icon、name、url 等。此时，我们的分享按钮就已经生成了。
自定义样式
如果你对 wshare 自带的样式不太满意，可以通过覆盖它的 CSS 样式来实现自定义样式。例如，我们可以将分享按钮的样式改为圆形，代码如下：
-- -------------------- ---- ------- -- ---- -- -------------- - -------- ----- ---------------- -------------- - -------------- - -------------- ---- ------ ----- ------- ----- - -------------- - - -------- ----- ------------ ------- ---------------- ------- ------- ----- ------ ----- - -- ------ -- ----------------------- - ----------------- -------- - ---------------------- - ----------------- -------- - ----------------------- - ----------------- -------- -
总结
在本文中，我们介绍了如何使用 npm 包 wshare 快速创建一个网页分享功能，使用该 npm 包可以省去了配置各种 API 的繁琐过程，并且提供了自定义分享按钮和样式的灵活性。希望本文对使用 wshare 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe6e4