bshare:bshare分享 插件使用教程 2024-04-16 07:03:21 0 0 我这里使用的是vue-cli构建的移动端项目,普通html页面使用步骤,可以参考官方文档,很简单,这里不叙述了。 目录 打开官网 http://www.bshare.cn/ ----- 找到bShareAPI. 构建一个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模板的显示和隐藏而已 好了,最终效果如下: 收藏(0)