1、生成二维码截屏法
生成一个当前页面(或者计算过的链接)的二维码,提示用户截屏转发到朋友圈(因为现在在微信生态可以长按二维码识别)
2、在h5页面调用APP的分享方法,需APP具有分享生态;(待验证,网上有这种说法,但我未具体验证过,先做记录)
3、在原生的导航栏或底部做原生的分享按钮,点击分享按钮直接将H5的链接和分享的URL给微信分享接口。
4、微信JSSDK仅能在微信内置浏览器中分享,且需要开通公众号或服务号,在安全域名的前提下。
5、诱导法
点击分享,出现一个弹层,弹层上面是图片或文字,让用户自己找到浏览器自带的分享工具;
6、使用NativeShare分享
原文地址:https://github.com/fa-ge/NativeShare
兼容性(毫无疑问是兼容浏览器最多的插件了)
移动端几乎所有浏览器都支持分享到QQ和QQ空间
QQ浏览器
UC浏览器
QQ自带浏览器
QQ空间APP
百度浏览器
ios 搜狗浏览器
支持分享到web微博
支持safari,chome浏览器(页面地址必须是https)
(PS:git地址上面说支持微信内置浏览器,但我测试的时候发现不行,估计还是和微信的安全域名有关,微信内置浏览器限制较多,具体还是得看微信文档。还有就是如果浏览器本身不支持分享,也不行,亲测荣耀V20自带浏览器环境下就不能调起微信分享)
安装插件:npm install --save nativeshare
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) {
// 如果不支持,你可以在这里做降级处理
}