我这里使用的是vue-cli构建的移动端项目,普通html页面使用步骤,
可以参考官方文档,很简单,这里不叙述了。
目录
-
打开官网 http://www.bshare.cn/ ----- 找到bShareAPI.
-
打开之后我们在范例代码中发现,最后一行要使用一个脚本,把这个script标签,放在index.html中。如下所示
-
构建一个vue模板,命名为bshare.vue,写入样式。
-
对每一个想要分享的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
}
}
其中:
- even表示事件监听
- type表示分享类型,如,微信,就传入weixin,QQ就传入qqim,这个可以在官网上查到。(在网站bShare下面 点击分享平台代码按钮 参考中可以看到每个平台所对应的type代码值)
@click=“dealShare($event,‘weixin’)” 微信
@click=“dealShare($event,‘sinaminiblog’)” 新浪
@click=“dealShare($event,‘qzone’)” QQ空间
-
bShare.addEntry表示要分享的内容
title:标题
url:链接
summary:关键词、简介
pic:图片地址 -
如果分享类型不等于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模板的显示和隐藏而已
好了,最终效果如下: