一、记录
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
