使用 NativeShare.js 插件做 h5（uniapp）的分享功能

一、记录

uniapp官网中对分享有平台差异，APP直接使用uni.share进行分享，配置完各类字段即可；小程序不支持方法调用，只能用户主动点击触发分享；H5则分为普通浏览器和温馨内嵌浏览器，普通浏览器使用自带的分享按钮，而微信内嵌浏览器需要调用js-sdk。点击此处查看官网解释

但是对于目前公司的功能来说，直接使用自带分享功能并不符合需求：① 分享首页；② 分享其中某个页面并携带参数。

第一个需求是正常的分享功能，使用自带分享功能也能解决问题，但是第二个需求并不能简单使用自带分享来实现。

于是找到了一个插件 —— NativeShare.js 来解决这个需求，总的来说还是很好用的，但是此插件针对的是原生的js，里边的demo也是用的纯html页面来显示的，所以我在其基础上改成了使用uniapp来实现。

当然里边的一些兼容性的问题以及原生使用方式，在GitHub上都有解释。（GitHub地址在文章末尾）

对于GitHub中插件的文件中只需要src和NativeShare.js即可，剩下的都是一些启动此次项目的配置文件，如果直接引入你自己的项目的话并不用去下载仔细研究。

二、使用

1.前期准备（多看几遍官网）

① 微信公众号配置js安全域名

此安全域名只需要配置你页面‘#’前面的域名完全一样即可，‘#’后面的页面以及参数不用配置，那是在页面自行控制的。

示例：
你需要跳转项目中index2页面，你在微信公众号中配置：http://xxx.xx就行了，在页面中需要分享的链接中写index2及参数即可：link: ‘http://xxx.xx/#/pages/index/index2?param=’ + param。

② 服务端生成签名，生成签名时的url必须是动态的，可以使用request来让前台给服务端传当前页面的url，但需要注意的是此url是‘#’前面的域名。
具体常见错误及解决方法见官网的附录5点我查看

2.项目目录

3.页面使用

① 新建一个页面，在页面将common下的NativeShare.js引入，再new一个NativeShare即可使用，具体代码：

4.写在最后的话

此插件有一个不太好的地方就是在微信内嵌浏览器以及qq空间APP中仍然需要用户手动去点击右上角进行分享。
但是可以设置不同的文案，即使分享项目中某一个页面的话也能携带不同的参数，能基本解决问题。大家有什么好的方法可以供我参考的一定要告诉我哦…好啦，下次见啦_(^o^)/

GitHub地址：https://github.com/yayunD/NativeShare
demo地址：demo