再最近给客户定制开发一套WordPress移动端主题的时候,使用到了社交分享功能,说到这里很多人可能想这有什么可说的,以前可以直接使用百度分享代码,现在百度分享代码好像不能用了,但是还可以使用像share.js这样的。但是你会发现其实这些主要还是针对PC端的,如果你的WordPress主题只是移动端的,那么用户体验就不太好了,这个时候你可能想要的是点击对应分享按钮后能够直接弹出手机上的对应的APP直接进行分享,比如分享到微信就不用点击分享弹出个二维码,然后保存二维码,识别二维码然后再用浏览器的自带分享功能分享到微信,这样的分享到微信没有一点意义,因为当前网页下就可以直接使用浏览器自带的分享到微信进行分享,所以经过筛选,我们最终选择了NativeShare这个JS插件。
存在的问题
npm install --save nativeshare
支持ES6模块,AMD,CMD引入 如果你的项目没有模块化。你也可以直接用script标签引入NativeShare.js。可以参考demo
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) {
// 如果不支持,你可以在这里做降级处理
}
NativeShare一共只有五个实例方法
{
icon: '',
link: '',
title: '',
desc: '',
from: '',
// 以下两个个回调目前只有在微信和百度APP中很好的支持
success: noop,
fail: noop,
// 只有微信支持
trigger: noop,
}
调用call方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是
还没有任何评论,你来说两句吧