寮步镇网站建设公司百度关键词挖掘工具爱站网

我这里使用的是vue-cli构建的移动端项目，普通html页面使用步骤，
可以参考官方文档，很简单，这里不叙述了。

目录

1. 打开官网 http://www.bshare.cn/ ----- 找到bShareAPI.

2. 打开之后我们在范例代码中发现，最后一行要使用一个脚本，把这个script标签，放在index.html中。如下所示

3. 构建一个vue模板，命名为bshare.vue,写入样式。

4. 对每一个想要分享的img标签，注册注册一个事件dealShare。例如，微信：

<img @click="dealShare($event,'weixin')" src="../../assets/img/wechat.jpg" alt="" /> <span>微信好友</span>

事件dealShare，传入一个事件监听even和一个类型type
然后在methods中，对bshare进行处理

dealShare(event, type) {//console.log("type = "+type)//设置分享内容bShare.addEntry({title: this.dict.title,url: location.href,summary: this.dict.forward,pic: this.netif.imagePrefix+this.dict.img_url});if(type != "more"){//开始分享bShare.share(event, type, 0)return false}else{bShare.more(event);return false}}

其中：

1. even表示事件监听
2. type表示分享类型，如，微信，就传入weixin，QQ就传入qqim，这个可以在官网上查到。（在网站bShare下面 点击分享平台代码按钮 参考中可以看到每个平台所对应的type代码值）

@click=“dealShare($event,‘weixin’)” 微信

@click=“dealShare($event,‘sinaminiblog’)” 新浪

@click=“dealShare($event,‘qzone’)” QQ空间

3. bShare.addEntry表示要分享的内容

   title:标题
   url：链接
   summary：关键词、简介
   pic：图片地址

4. 如果分享类型不等于more type != “more” 也就是点击的不是那个更多按钮，就开始分享，点击更多，则加载更多平台

注意：

我这里dict是传进来的当前详情页面的json信息，我把它放在了dict中了，和bshare分享没关系，仅仅为了拿到我的详情页面的标题、url、简介等等

分享页面还有一个取消按钮，我们如果想点击取消，让分享页面消失，怎么办呢？

<div class="cancel"><span @click="dealCancel">取消</span></div>

dealCancel() {this.$emit("close")
},

给取消按钮加一个事件，然后对父级页面传入一个close事件，通过 $emit 传。

在父级页面对这个事件进行处理：@close=“isShowShare=false”

<share :dict="dict" @close="isShowShare=false" v-if="isShowShare"></share>

isShowShare 仅仅控制share模板的显示和隐藏而已

好了，最终效果如下：