前言
开发 uniapp 程序的项目，用它生成多端应用，由于兼容各种多端应用，程序代码需要相应的适配，在项目里分享功能是很常见的一个功能，但是在不同的端有不同的方法，我们如何实现多端分享呢？（app，小程序，公众号）
app
app 端实现分享功能用到了 uniapp 内置的 api
uni.share() 可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即 provider,可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本 API。即在 App 里可以通过本 API 把一个内容以小程序（通常为内容页）方式直接分享给微信好友
具体 Object 参数说明参考文档
只能在 app 端里调用这个 api
给分享按钮绑定一个方法，使用条件编译的方式来判断当前是不是 app 端
<button class="invite-button" @click="share"> 分享好友</button>
share(){// #ifdef APP uni.share({ provider:'weixin',//分享服务提供商（即weixin|qq|sinaweibo） type:0,//图文 scene:'WXSceneSession',//provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏 title:'邀请好友领取海量现金券!',//分享内容的标题 summary:'我正在使用xxxApp，赶紧跟我一起来体验！',//分享内容的摘要 href:'http://uniapp.dcloud.io/',//跳转链接，type 为 0 时必选 imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',//图片地址，type 为 0、2、5 时必选 success(res) { //成功返回的参数 console.log(res); }, fail(err) { //失败返回的参数 console.log(err); } })// #endif
复制代码
小程序
小程序端分享也可以通过 uni.share（）实现，也可以通过右上角胶囊分享，但还有其他的分享方式
onShareAppMessage()，需要给按钮设置open-type="share",小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息，此事件需要 return 一个 Object，用于自定义分享内容
<button class="invite-button" open-type="share" @click="share"> 分享好友</button>
onShareAppMessage(){ return{ title:'邀请好友领取海量现金券!', path:'/pages/my/invite/invite',//页面 path ，必须是以 / 开头的完整路径 imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', desc:'我正在使用xxxApp，赶紧跟我一起来体验！', }},
复制代码
公众号
公众号中的分享需要使用微信的 JS-SDK,具体文档参考JS-SDK说明文档，需要配置好公众号 js 域名，可以直接下载 js 文件引入，也可以通过 npm 下载npm install weixin-js-sdk --save，公众号的分享比较繁琐，我们可以新建一个 js 文件封装起来
import wx from "weixin-js-sdk"
/* * 微信分享 * 获取微信加签信息 * @param{data}:获取的微信加签 * @param{shareData}:分享配置参数 */export const wexinShare = (data, shareData) => {
let appId = data.appId; let timestamp = data.timestamp; let nonceStr = data.nonceStr; let signature = data.signature; wx.config({//通过config接口注入权限验证配置 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉） appId: appId, // 必填，公众号的唯一标识 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature, // 必填，签名，见附录1 jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.checkJsApi({ jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} console.log(res, 'checkJsApi') } }); wx.ready(function() {//通过ready接口处理成功验证 // //分享到朋友圈”及“分享到QQ空间” wx.updateTimelineShareData({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.imgUrl, // 分享图标 success: function(res) { console.log("分享朋友圈成功返回的信息:", res); } })
//“分享给朋友”及“分享到QQ” wx.updateAppMessageShareData({ title: shareData.title, // 分享标题 desc: shareData.desc, // 分享描述 link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.imgUrl, // 分享图标 success: function(res) { console.log("分享朋友成功返回的信息:", res);; } })
}); wx.error(function(res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log('验证失败返回的信息:', res); });}
复制代码
引入刚刚封装暴露出来的方法
import { wexinShare } from '@/common/js/utils.js'
在页面创建的时候.调用后端接口获取签名等数据，把获取到的数据和要分享的数据传入方法
created(){ this.share()},
//methodsshare(){ // #ifdef H5 let currentUrl = location.href //获取当前页面链接 this.$post('xxxxxx',{ currentUrl }).then((res)=>{ console.log(res); if(res.code==200){ //获取的微信加签 let obj={ appId: res.appId, nonceStr: res.nonceStr, signature: res.signature, timestamp: res.timestamp, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] } //分享的内容 let shareData={ title:'邀请好友领取海量现金券!', desc:'我正在使用xxxApp，赶紧跟我一起来体验！', link:res.url, imgUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png' } //调用封装好的方法，传入微信加签和内容 wexinShare(obj,shareData) }else{ uni.showToast({ title: '获取sdk参数失败!', icon:'none' }); } }) // #endif }
复制代码
注意：如果分享失败，查看 wx.error（）返回的 res 参数显示 the permission value is offline verifying 且错误码为 40048，原因是微信公众号 js 域名没有设置或者分享链接的域名或路径没有与当前页面对应的公众号 JS 安全域名一致
评论