vue开发APP使用微信分享和QQ分享功能
条件微信开放平台申请微信开放平台appid腾讯开放平台申请腾讯开放平台appid打包环境Hbuildermanifest.json中plus下的plugins下添加如下代码,并填写你的appid"share" : {"weixin" : {"appid" : "wx****************","UniversalLinks" : ""},"QQ"
·
条件
微信开放平台申请微信开放平台appid
腾讯开放平台申请腾讯开放平台appid
打包环境Hbuilder
manifest.json中plus下的plugins下添加如下代码,并填写你的appid
"share" : {
"weixin" : {
"appid" : "wx****************",
"UniversalLinks" : ""
},
"QQ" : {
"appid" : "**********",
"UniversalLinks" : ""
}
},
代码片段
html
此次使用vant的默认分享模板样式,有疑问的可以参考
Vant ShareSheet 分享面板
<van-share-sheet v-model="showShare" :options="options" @select="onSelect"/>
js
封装share.js
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast);
let Share = new Object();
var shares = null;
Share.service = function(){
plus.share.getServices(function(s){
shares={};
for(var i in s){
var t=s[i];
shares[t.id]=t;
}
console.log(JSON.stringify(s));
}, function(e){
alert("获取分享服务列表失败: "+JSON.stringify(e));
});
}
/**
* 分享操作
*/
Share.shareAction = function(id, ex,shareUrl,detail) {
var s = null;
if (!id || !(s = shares[id])) {
Toast("无效的分享服务!");
return;
}
if (s.authenticated) {
console.log("---已授权---");
// shareMessage(s, ex,shareUrl,detail);
shareMsg(s, ex,detail);
} else {
console.log("---未授权---");
s.authorize(function() {
// shareMessage(s, ex,shareUrl,detail);
shareMsg(s, ex,detail);
}, function(e) {
Toast("认证授权失败");
});
}
}
/**
* 发送分享消息
*/
function shareMsg(s, ex,detail) {
var msg = {
href: detail.link,
title: detail.title,
content: detail.desc,
thumbs: detail.imgUrl,
pictures: detail.imgUrl,
extra: {
scene: ex
}
};
s.send(msg, function() {
Toast("分享成功!");
}, function(e) {
Toast("分享失败!");
});
}
export default Share;
页面设置与调用
import shareJS from "@/assets/js/share.js"
document.addEventListener("plusready",function(){
shareJS.service()
}, false);
//data中添加分享选项
data () {
return {
showShare:false,
options: [
{ index:0, id: "weixin", name: '微信', icon: 'wechat' ,ex:"WXSceneSession"},
{ index:1, id: "weixin", name: '朋友圈', icon: 'wechat-moments',ex:"WXSceneTimeline" },
{ index:2, id: "qq", name: 'QQ', icon: 'qq' },
{ index:3, name: '复制连接', icon: 'link' },
]
}
},
//methods中根据分享选项调用功能
methods:{
onSelect(e){
this.showShare = false;
if(e.index==3){
this.copyLink(e);
}else{
this.wxShare(e);
}
},
//分享到微信或QQ功能
wxShare(e){
let option={
title: "<分享标题>", // 分享标题
link: '<分享链接>', // 分享链接,可根据参数调整
imgUrl: '<分享图标>', // 分享图标
desc: "<分享描述>", // 分享描述
};
shareJS.shareAction(e.id,e.ex,option.link,option);
},
//复制链接功能
copyLink(e){
let link= <分享链接>
this.$copyText(link)
.then(()=>{
this.$toast('复制链接成功,请分享');
})
.catch((e)=>{console.log(e);})
}
更多推荐
已为社区贡献3条内容
所有评论(0)