使用 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即可使用，具体代码：

<template>
	<view>
		<view class="view"  @click="call()">通用分享</view>
		<view class="view" @click="call('wechatFriend')">微信好友</view>
		<view class="view" @click="call('wechatTimeline')">微信朋友圈</view>
		<view  class="view" @click="call('qqFriend')">QQ</view>
		<view class="view"  @click="call('qZone')">QQ空间</view>
		<view class="view"  @click="call('weibo')">微博</view>
		<view class="view"  @click="setTitle('fa-ge NativeShare')">设置标题</view>
		</view>
</template>

<script>
	import '../../common/NativeShare.js'
	export default {
		data() {
			return {
				code: "",
				nativeShare: {},
				shareData: {},
				shareData2: {}
			}
		},
		onLoad(option) {
			let code = option.code
			this.nativeShare = new NativeShare()
			// 特别提示一下微信分享有一个坑，不要分享安全域名以外的链接(具体见jssdk文档)，否则会导致你配置的文案无效
			uni.request({
				method: 'GET',
				url: 'http://xxx.xx/getWxToken/',
				header: {
					'Content-Type': 'application/json',
					"Accept":"application/json",
				},
				success: (res) => {
					this.nativeShare.setConfig({
						wechatConfig: {
							appId: 'appId',
							timestamp: res.data.timestamp,
							nonceStr: res.data.nonecestr,
							signature: res.data.sign
						}
					})				
					var nowstamp = Math.floor(new Date().getTime() / (1000 * 60))
					this.shareData = {
						title: '',
						desc: '',
						// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
						link: 'http://xxx.xx/#/pages/index/index?code=' + code,
						icon: "/static/img/app-icon.png?t=" + nowstamp,
						// 不要过于依赖以下两个回调，很多浏览器是不支持的
						success: function() {
							uni.showToast({
								title: "设置文案成功",
								icon: 'none'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: "设置文案失败"+err,
								icon: 'none'
							})
						}
					}
					this.shareData2 = {
						title: '',
						// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
						link: 'http://xxx.xx/#/pages/index/index?code=' + code,
						icon: "/static/img/app-icon.png?t=" + nowstamp,
						// 不要过于依赖以下两个回调，很多浏览器是不支持的
						success: function() {
							uni.showToast({
								title: "设置文案成功2",
								icon: 'none'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: "设置文案失败2"+err,
								icon: 'none'
							})
						}
					}

				},
				fail: (err) => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			call(command) {
				// 根据不同的分享设置不同的文案
				if (command == 'wechatFriend') {
					this.nativeShare.setShareData(this.shareData)
				} else if (command == 'wechatTimeline') {
					this.nativeShare.setShareData(this.shareData2)
				}
				// 判断是否是微信内置浏览器（由于此插件并不能在微信浏览器中打开重新打开微信分享，只能用户收到点击右上角进行分享）
				if (ua.search(/MicroMessenger/i) > -1) {  
					uni.showToast({
						title: '请点击右上角进行分享',
						icon: 'none'
					}) 
				} else {  
					try {
						this.nativeShare.call(command)
					} catch (err) {
						// 浏览器不支持
						uni.showToast({
							title: '当前浏览器暂不支持,请使用其他浏览器打开',
							icon: 'none'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.view {
		width: 200rpx;
		height: 200rpx;
		text-align: center;
		margin: 20rpx;
		border: 3rpx solid black;
	}
</style>

4.写在最后的话

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

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