APP内置H5分享到微信

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) {
  // 如果不支持,你可以在这里做降级处理
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值