简单的网页案例,杭州seo网站推广,网站建设的版块,小程序游戏开发公司我这里使用的是vue-cli构建的移动端项目#xff0c;普通html页面使用步骤#xff0c;
可以参考官方文档#xff0c;很简单#xff0c;这里不叙述了。目录 打开官网 http://www.bshare.cn/ ----- 找到bShareAPI. 打开之后我们在范例代码中发现#xff0c;最后一行要使用一个…我这里使用的是vue-cli构建的移动端项目普通html页面使用步骤
可以参考官方文档很简单这里不叙述了。目录 打开官网 http://www.bshare.cn/ ----- 找到bShareAPI. 打开之后我们在范例代码中发现最后一行要使用一个脚本把这个script标签放在index.html中。如下所示 构建一个vue模板命名为bshare.vue,写入样式。 对每一个想要分享的img标签注册注册一个事件dealShare。例如微信
img clickdealShare($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.imagePrefixthis.dict.img_url});if(type ! more){//开始分享bShare.share(event, type, 0)return false}else{bShare.more(event);return false}}其中
even表示事件监听type表示分享类型如微信就传入weixinQQ就传入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 classcancelspan clickdealCancel取消/span/divdealCancel() {this.$emit(close)
},给取消按钮加一个事件然后对父级页面传入一个close事件通过 $emit 传。 在父级页面对这个事件进行处理close“isShowSharefalse”
share :dictdict closeisShowSharefalse v-ifisShowShare/shareisShowShare 仅仅控制share模板的显示和隐藏而已 好了最终效果如下
