vue项目中如何使用百度三方分享

百度三方分享

今天项目中用到分享功能，正好是vue项目，本来想着在网上找下操作教程，结果找了半天，发现也没几个能用的，还一个比一个能吹，步骤没一点思绪，就一气之下自己着手摸索出来一个，还没写样式，但功能已经能用了。
效果图如下：

步骤

1. 在百度分享官网下载代码：http://share.baidu.com/,如下：（我这里用的是图标式，一般选择浮窗式，因为浮窗式只有js，不用加载html）
   
2. 下载好之后，发现上半部分是html代码，下边是js代码，
3. 项目分类（我这里使用的是vue-cli）
   3.1 如果是普通项目，把div放在html标签里就行了，js放在script标签里就好了
   3.2 这里是vue项目，
   新建一个vue文件，share.vue

html代码放在template的位置，js处理放在自己新建的setShare方法之中，

在mounted生命周期里去处理它，style写它的样式，这样做完之后发现，还不行！！！

q为什么?

因为这里还有一个跨域问题，自己的项目是在https域名上面，然而百度的js是在http域名上的，在https上引用http的js会报错。

解决方法：

1. 需要下载一个插件，GitHub地址：https://github.com/hrwhisper/baiduShare
2. 将下载插件放到项目的static静态文件目录下；
3. 把倒数第三行代码：http://bdimg.share.baidu.com/ 这些前缀去掉。（因为路径要引用咱们下载好的api）

处理好之后运行项目，发现分享就可以用了。

另外：百度分享有自动销毁的逻辑，所以当显示一次之后，就没有了，
要处理一下，在我们定义的setShare()方法中加一段代码： 

if(window._bd_share_main){
	window._bd_share_main.init();
}

重新初始化就没问题了。