vue jssdk 是一款非常方便的JavaScript SDK工具,在Vue应用中进行社交分享非常的好用。
首先,我们需要在项目中安装 vue-jssdk:
npm install vue-jssdk --save
然后,在main.js中引入 vue-jssdk,并且初始化分享配置:
import VueJSSDK from 'vue-jssdk'
Vue.use(VueJSSDK, {
title: '分享标题',
desc: '分享描述',
link: '分享链接',
imgUrl: '分享图片链接'
})
现在已经成功初始化分享配置,下一步,我们需要使用 vue-jssdk 提供的组件来完成分享功能。
首先,我们需要在需要分享的组件中引入社交分享组件:
<template>
<div>
<social-share
:wechat="true"
:qq="true"
:weibo="true"
:qzone="true"
:list="list"
@share-success="shareSuccess">
<i class="icon-share"></i>分享到
</social-share>
</div>
</template>
在以上代码中,我们引入了社交分享组件,并且设置了分享列表以及分享成功回调函数。
最后,我们需要在Vue实例中定义 list 变量:
<script>
export default {
data() {
return {
list: [
{name: 'wechat', title: '微信'},
{name: 'qq', title: 'QQ'},
{name: 'weibo', title: '微博'},
{name: 'qzone', title: 'QQ空间'},
]
}
},
methods: {
shareSuccess(res) {
console.log('分享成功')
}
}
}
</script>
现在,我们已经完成了在Vue应用中使用 vue-jssdk 进行社交分享的全部过程。