父组件调用
// 分享
sharePage() {
let me = this;
this.shareConfig = {
url: 'http://www.baidu.com',
title: '测试',
desc: 'desc-----',
img: 'https://www.baidu.com/img/dong_54209c0ff3da32eecc31f340c08a18f6.gif',
type: 2
};
// 浏览器默认分享优先级最高
if (window.navigator.share === undefined) {
this.$refs.shareInfo.shareShow();
}
else {
window.navigator.share({
title: this.config.title,
text: this.config.desc,
url: this.config.url
}).then(() => {
me.$refs.shareInfo.shareShow();
}).catch(err => {
console.log(err);
});
}
}
子组件
<template>
<section>
<nut-actionsheet :is-visible="isVisible"
@close="shareShow">
<div slot="custom" class="custom-wrap">
<div class="share-l" @click="handleShare(1)">朋友圈</div>
<div class="share-r" @click="handleShare(8)">好友</div>
</div>
</nut-actionsheet>
</section>
</template>
<script>
import commonjs from './common';
import jwx from 'weixin-js-sdk';
export default {
data() {
return {
isVisible: false,
qqBridgeLoaded: false
};
},
props: [
'config'
],
mixins: [commonjs],
components: {
},
created() {
let UA = navigator.appVersion;
/**
* 是否是 UC 浏览器
*/
this.uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
/**
* 判断 qq 浏览器
* 然而qq浏览器分高低版本
* 2 代表高版本
* 1 代表低版本
*/
this.qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
/**
* 是否是微信
*/
this.wx = /micromessenger/i.test(UA);
/**
* 浏览器版本
*/
this.qqVs = this.qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
this.ucVs = this.uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
this.os = this.osType();
},
methods: {
shareShow() {
this.isVisible = !this.isVisible;
if (this.isVisible) {
this.initwx(this.config);
this.loadqqApi(() => {
this.qqBridgeLoaded = true;
});
}
},
osType() {
let ua = navigator.userAgent;
if (/iphone|ipod/i.test(ua)) {
return 1;
} else if (/android/i.test(ua)) {
return 2;
} else {
return 0;
}
},
initwx(config) {
this.$axios({
url: '/bizcrm/prism/followUpRecord',
// url: '/bizcrm/prism/wechatShare',
method: 'POST',
data: {
params: {
url: config.url
}
}
}).then(res => {
let self = this;
self.readFlag = false;
if (+res.code === 0) {
const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage'];
jwx.config({
debug: true,
appId: 'wxd981cc94fb1a8d81',
timestamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
accessToken: res.data.accessToken,
signature: res.data.signature,
jsApiList: jsApiList
});
jwx.ready(() => {
self.readFlag = true;
});
jwx.error(function (res) {
self.readFlag = false;
console.error(res);
});
}
}).catch(res => {
});
},
handleShare(type) {
let me = this;
if (typeof type !== 'undefined') {
this.config.type = type;
}
try {
if (this.uc) {
this.ucShare(this.config);
me.isVisible = false;
}
else if (this.qq && !this.wx) {
this.qqShare(this.config);
me.isVisible = false;
}
else if (this.wx) {
this.wxShare(this.config);
}
else {
// if (window.navigator.share === undefined) {
this.wxShare(this.config);
// }
// else { // 浏览器默认分享
// window.navigator.share({
// title: this.config.title,
// text: this.config.desc,
// url: this.config.url
// }).then(() => {
// me.isVisible = false;
// }).catch(err => {
// console.log(err);
// });
// }
}
}
catch (e) {}
},
// UC浏览器分享
ucShare(config) {
// 关于platform
// ios: kWeixin || kWeixinFriend;
// android: WechatFriends || WechatTimeline
// uc 分享会直接使用截图
let platform = '';
let shareInfo = null;
// 指定了分享类型
if (config.type) {
if (+this.os === 2) {
platform = +config.type === 1 ? 'WechatTimeline' : 'WechatFriends';
} else if (+this.os === 1) {
platform = +config.type === 1 ? 'kWeixinFriend' : 'kWeixin';
}
}
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
// android
if (window.ucweb) {
window.ucweb.startRequest && window.ucweb.startRequest('shell.page_share', shareInfo);
return;
}
if (window.ucbrowser) {
window.ucbrowser.web_share && window.ucbrowser.web_share.apply(null, shareInfo);
return;
}
},
// qq 浏览器分享函数
qqShare(config) {
let type = config.type;
// 微信好友 1, 微信朋友圈 8
type = type ? ((type === 1) ? 8 : 1) : '';
let share = function () {
let shareInfo = {
url: config.url,
title: config.title,
description: config.desc,
'img_url': config.img,
'img_title': config.title,
'to_app': type,
'cus_txt': ''
};
if (window.browser) {
window.browser.app && window.browser.app.share(shareInfo);
} else if (window.qb) {
window.qb.share && window.qb.share(shareInfo);
}
};
if (this.qqBridgeLoaded) {
share();
} else {
this.loadqqApi(share);
}
},
// qq浏览器下面 根据不同版本 加载对应的bridge
loadqqApi(cb) {
// qq == 0
if (!this.qq) {
return cb && cb();
}
let script = document.createElement('script');
script.src = (+this.qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
/**
* 需要等加载过 qq 的 bridge 脚本之后
* 再去初始化分享组件
*/
script.onload = function () {
cb && cb();
};
document.body.appendChild(script);
},
// 微信浏览器分享
wxShare(config) {
let me = this;
if (+config.type === 8) { // 好友
jwx.onMenuShareAppMessage({
title: config.title, // 分享标题
desc: config.desc, // 分享描述
link: config.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: config.img, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: () => {
me.isVisible = false;
}
});
}
else { // 朋友圈
jwx.onMenuShareTimeline({
title: config.title, // 分享标题
desc: config.desc, // 分享描述
link: config.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: config.img, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: () => {
me.isVisible = false;
}
});
}
}
},
destroyed() {
}
};
</script>
<style lang='less' scoped>
.custom-wrap {
width: 100%;
height: 660px;
display: flex;
justify-items: flex-start;
align-content: center;
font-size: 42px;
.share-l {
width: 50%;
height: 100%;
background-image: url(../../assets/share.png);
background-repeat: no-repeat;
background-position: 50% 180px;
background-size: auto 150px;
padding-top: 350px;
text-align: center;
}
.share-r {
width: 50%;
height: 100%;
background-image: url(../../assets/share.png);
background-repeat: no-repeat;
background-position: 50% 180px;
background-size: auto 150px;
padding-top: 350px;
text-align: center;
}
}
</style>
网友评论