h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器
需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈。这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个浏览器都有分享到微信的能力,所以我们可以利用浏览器的这个能力去解决。
看看效果
如何完成
html部分
注意引入nativeShare.js文件
<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>
<button onclick="setTitle('fa-ge NativeShare')">设置标题</button>
</div>
<script type="text/javascript" src="NativeShare.js"></script>
js部分
var nativeShare = new NativeShare()
var shareData = {
title: '分享标题',
desc: '描述内容',
// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
link: 'www.你的连接地址',
icon: '图片地址',
// 不要过于依赖以下两个回调,很多浏览器是不支持的
success: function() {
alert('success')
},
fail: function() {
alert('fail')
}
}
nativeShare.setShareData(shareData)
function call(command) {
try {
nativeShare.call(command)
} catch (err) {
// 如果不支持,你可以在这里做降级处理
alert(err.message)
}
}
function setTitle(title) {
nativeShare.setShareData({
title: title,
})
}
这样,方案实现了
js文件地址:h5网页唤起微信,分享好友朋友圈插件js地址