移动端实现分享功能(设置标题,副标题和缩略图封面)
一.NativeShare.js(毫无疑问是兼容浏览器最多的插件了)
- 移动端几乎所有浏览器都支持分享到QQ和QQ空间
- QQ浏览器
- UC浏览器
- 微信自带浏览器
- QQ自带浏览器
- QQ空间APP
- 百度浏览器
- 百度APP自带浏览器
- ios 搜狗浏览器
- 支持分享到web微博
- 即将支持(android 搜狗浏览器，微博APP）
存在的问题
- 安卓的QQ自带浏览器不支持.com以外的域名后缀。可能会支持.cn,.com.cn，但明确不支持.me,.io这个具体可以自己测试。
- 安卓的QQ自带浏览器分享url必须跟页面url同一个域名，否则所有设置不生效。
- 安卓的QQ自带浏览器无法直接分享
- 虽然几乎所有的浏览器都支持分享到QQ和QQ空间，但是webview中基本都会不支持。我也很难判断当前浏览器是否支持，浏览器是否唤起QQ APP我也很难判断，所有除了上述支持的浏览器，APP外其他情况调用分享到QQ我也会抛出异常。
- UC浏览器安卓端不能设置icon
- 百度浏览器，百度APP不能直接分享
- QQ空间APP，微信自带浏览器只能设置文案，分享需要用户手动点击右上角
使用
支持ES6模块,AMD，CMD引入 如果你的项目没有模块化。你也可以直接用script标签引入NativeShare.js。
import NativeShare from 'nativeshare'
// 先创建一个实例
var nativeShare = new NativeShare()
// 如果你需要在微信浏览器中分享，那么你需要设置额外的微信配置
// 特别提示一下微信分享有一个坑，不要分享安全域名以外的链接(具体见jssdk文档)，否则会导致你配置的文案无效
// 创建实例应该带参数
var nativeShare = new NativeShare({
wechatConfig: {
appId: '',
timestamp: '',
nonceStr: '',
signature: '',
},
// 让你修改的分享的文案同步到标签里，比如title文案会同步到<title>标签中
// 这样可以让一些不支持分享的浏览器也能修改部分文案，默认都不会同步
syncDescToTag: false,
syncIconToTag: false,
syncTitleToTag: false,
})
// 你也可以在setConfig方法中设置配置参数
nativeShare.setConfig({
wechatConfig: {
appId: '',
timestamp: '',
nonceStr: '',
signature: '',
}
})
// 设置分享文案
nativeShare.setShareData({
icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
link: 'https://github.com/fa-ge/NativeShare',
title: 'NativeShare',
desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
from: '@fa-ge',
})
// 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
try {
nativeShare.call()
// 如果是分享到微信则需要 nativeShare.call('wechatFriend')
// 类似的命令下面有介绍
} catch(err) {
// 如果不支持，你可以在这里做降级处理
}API
NativeShare一共只有五个实例方法:
getShareData() 获得分享的文案
setShareData() 设置分享的文案
call(command = 'default', [options]) 调用浏览器原生的分享组件
setConfig() 设置配置参数和new NativeShare()中设置的一样
getConfig() 获得配置参数
{
icon: '',
link: '',
title: '',
desc: '',
from: '',
// 以下两个个回调目前只有在微信和百度APP中很好的支持
success: noop,
fail: noop,
// 只有微信支持
trigger: noop,
}调用call方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是
default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令
wechatTimeline 分享到朋友圈
wechatFriend 分享给微信好友
qqFriend 分享给QQ好友
qZone 分享到QQ空间
weibo 分享到微博
实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="qq175023117的博客">
<title>qq175023117的博客</title>
</head>
<body>
<div>
<button onclick="call()">通用分享</button>
<button onclick="call('wechatFriend')">微信好友</button>
<button onclick="call('wechatTimeline')">朋友圈</button>
<button onclick="call('qqFriend')">QQ</button>
<button onclick="call('qZone')">QQ空间</button>
<button onclick="call('weibo')">微博</button>
</div>
<script type="text/javascript" src="./nativeShare.js"></script>
<script>
var nativeShare = new NativeShare()
var shareData = {
title: 'qq175023117的博客',
desc: 'qq175023117的博客',
// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
link: 'https://juejin.cn/user/4195392103917101',
icon: 'https://avatar.csdn.net/5/2/E/1_qq175023117.jpg?1539049275',
// 不要过于依赖以下两个回调，很多浏览器是不支持的
success: function() {
alert('分享成功')
},
fail: function() {
alert('分享失败')
}
}
nativeShare.setShareData(shareData)
function call(command) {
try {
nativeShare.call(command)
} catch (err) {
// 如果不支持，你可以在这里做降级处理
alert(err.message)
}
}
function setTitle(title) {
nativeShare.setShareData({
title: title,
})
}
</script>
</body>
</html>最后配上判断浏览器的方法，可以配合判断一下是否微信浏览器做出不同操作：
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }
//判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }
//判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }
//检测浏览器语言
currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);
二.微信分享网页设置缩略图和描述和标题
1.后端进入公众号设置配置js接口安全域名
2.前端调用接口
// 微信分享网页设置缩略图和描述和标题
let url = window.location.href;
Vue.http.post(config.api + 'weixin/jsconfig', {
url: url,
}).then(res => {
let obj = res.body.obj.jsconfig;
wx.config({
debug: obj.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: obj.appId, // 必填，公众号的唯一标识
timestamp: obj.timestamp, // 必填，生成签名的时间戳
nonceStr: obj.nonceStr, // 必填，生成签名的随机串
signature: obj.signature, // 必填，签名
jsApiList: obj.jsApiList // 必填，需要使用的JS接口列表
});
wx.ready(function () {
wx.updateAppMessageShareData({
title: Object.keys(to.meta).length > 0 ? '人是云，企业全域智慧管理平台-' + to.meta.title : '人是云，企业全域智慧管理平台',
desc: Object.keys(to.meta).length > 0 ? to.meta.description : '人是云，企业全域智慧管理平台',
link: url,
imgUrl: Object.keys(to.meta).length > 0 ? `${config.url}static/images/${to.meta.imgUrl}` : `${config.url}static/images/index.png`,
success: function () {
console.log('分享好友设置成功')
}
})
wx.updateTimelineShareData({
title: Object.keys(to.meta).length > 0 ? '人是云，企业全域智慧管理平台-' + to.meta.title : '人是云，企业全域智慧管理平台',
link: url,
imgUrl: Object.keys(to.meta).length > 0 ? `${config.url}static/images/${to.meta.imgUrl}` : `${config.url}static/images/index.png`,
success: function () {
console.log('分享朋友圈设置成功')
}
})
});
}).catch((err) => {
console.log(err);
})
