高端网站设计 必荐骏网添城科技电商推广工作内容
我这里使用的是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模板的显示和隐藏而已
好了，最终效果如下：
