uniapp多端分享（app，小程序，公众号）

媒介

开发uniapp程序的项目，用它生成多端应用，由于兼容各种多端应用，程序代码需要相应的适配，在项目里分享功能是很常见的一个功能，但是在不同的端有不同的方法，我们如何实现多端分享呢？（app，小程序，公众号）
app

app端实现分享功能用到了uniapp内置的api
uni.share() 可以分享到微信、QQ、微博，每个交际平台被称为分享服务提供商，即provider,可以分享笔墨、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友
详细Object参数阐明参考文档
只能在app端里调用这个api

给分享按钮绑定一个方法，使用条件编译的方式来判定当前是不是app端

1. <button class="invite-button" @click="share">
2.         分享好友
3. </button>
5. share(){
6. // #ifdef APP
7.     uni.share({
8.         provider:'weixin',//分享服务提供商（即weixin|qq|sinaweibo）
9.         type:0,//图文
10.         scene:'WXSceneSession',//provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
11.         title:'邀请好友领取海量现金券!',//分享内容的标题
12.         summary:'我正在使用xxxApp，赶紧跟我一起来体验！',//分享内容的摘要
13.         href:'http://uniapp.dcloud.io/',//跳转链接，type 为 0 时必选
14.         imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',//图片地址，type 为 0、2、5 时必选
15.         success(res) {
16.             //成功返回的参数
17.             console.log(res);
18.         },
19.         fail(err) {
20.             //失败返回的参数
21.             console.log(err);
22.         }
23.     })
24. // #endif

复制代码

小程序

小程序端分享也可以通过uni.share（）实现，也可以通过右上角胶囊分享，但另有其他的分享方式
onShareAppMessage()，需要给按钮设置open-type="share",小程序中用户点击分享后，在 js 中界说 onShareAppMessage 处置处罚函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息，此事件需要 return 一个Object，用于自界说分享内容

1. <button class="invite-button" open-type="share" @click="share">
2.         分享好友
3. </button>
5. onShareAppMessage(){
6.     return{
7.         title:'邀请好友领取海量现金券!',
8.         path:'/pages/my/invite/invite',//页面 path ，必须是以 / 开头的完整路径
9.         imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
10.         desc:'我正在使用xxxApp，赶紧跟我一起来体验！',
11.     }
12. },

复制代码

公众号

公众号中的分享需要使用微信的JS-SDK,详细文档参考JS-SDK阐明文档，需要设置好公众号js域名，可以直接下载js文件引入，也可以通过npm下载npm install weixin-js-sdk --save，公众号的分享比力繁琐，我们可以新建一个js文件封装起来

1. import wx from "weixin-js-sdk"
3. /*
4. * 微信分享
5. * 获取微信加签信息
6. * @param{data}:获取的微信加签
7. * @param{shareData}:分享配置参数
8. */
9. export const wexinShare = (data, shareData) => {
11.     let appId = data.appId;
12.     let timestamp = data.timestamp;
13.     let nonceStr = data.nonceStr;
14.     let signature = data.signature;
15.     wx.config({//通过config接口注入权限验证配置
16.         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
17.         appId: appId, // 必填，公众号的唯一标识
18.         timestamp: timestamp, // 必填，生成签名的时间戳
19.         nonceStr: nonceStr, // 必填，生成签名的随机串
20.         signature: signature, // 必填，签名，见附录1
21.         jsApiList: [
22.                 'updateAppMessageShareData',
23.                 'updateTimelineShareData'
24.             ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
25.     });
26.     wx.checkJsApi({
27.         jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
28.         success: function(res) {
29.             // 以键值对的形式返回，可用的api值true，不可用为false
30.             // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
31.             console.log(res, 'checkJsApi')
32.         }
33.     });
34.     wx.ready(function() {//通过ready接口处理成功验证
35.         // //分享到朋友圈”及“分享到QQ空间”
36.         wx.updateTimelineShareData({
37.             title: shareData.title, // 分享标题
38.             link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
39.             imgUrl: shareData.imgUrl, // 分享图标
40.             success: function(res) {
41.                 console.log("分享朋友圈成功返回的信息:", res);
42.             }
43.         })
45.         //“分享给朋友”及“分享到QQ”
46.         wx.updateAppMessageShareData({
47.             title: shareData.title, // 分享标题
48.             desc: shareData.desc, // 分享描述
49.             link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
50.             imgUrl: shareData.imgUrl, // 分享图标
51.             success: function(res) {
52.                 console.log("分享朋友成功返回的信息:", res);;
53.             }
54.         })
56.     });
57.     wx.error(function(res) {
58.         // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
59.         console.log('验证失败返回的信息:', res);
60.     });
61. }

复制代码

引入刚刚封装暴暴露来的方法
import { wexinShare } from '@/common/js/utils.js'
在页面创建的时候.调用后端接口获取签名等数据，把获取到的数据和要分享的数据传入方法

1. created(){
2.     this.share()
3. },
5. //methods
6. share(){
7.     // #ifdef H5
8.         let currentUrl = location.href //获取当前页面链接
9.         this.$post('xxxxxx',{
10.             currentUrl
11.         }).then((res)=>{
12.             console.log(res);
13.             if(res.code==200){
14.                 //获取的微信加签
15.                 let obj={
16.                     appId: res.appId,
17.                     nonceStr: res.nonceStr,
18.                     signature: res.signature,
19.                     timestamp: res.timestamp,
20.                     jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
21.                 }
22.                 //分享的内容
23.                 let shareData={
24.                         title:'邀请好友领取海量现金券!',
25.                         desc:'我正在使用xxxApp，赶紧跟我一起来体验！',
26.                         link:res.url,
27.                         imgUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png'
28.                 }
29.                 //调用封装好的方法，传入微信加签和内容
30.                 wexinShare(obj,shareData)
31.             }else{
32.                 uni.showToast({
33.                         title: '获取sdk参数失败!',
34.                         icon:'none'
35.                     });
36.                 }
37.         })
38.     // #endif
39. }

复制代码

注意：如果分享失败，查看wx.error（）返回的res参数显示the permission value is offline verifying且错误码为40048，原因是微信公众号js域名没有设置或者分享链接的域名或路径没有与当前页面对应的公众号JS安全域名一致

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。