不同平台使用不同技术实现微信好友、朋友圈分享汇总（H5、taro、uni-app）_微信分享开发

作者：代码探险家 | 2024-06-26 11:54:00

踩

微信分享开发

人生路漫漫，坑，是活久了见。程序猿世界里各种奇葩的需求都有，随之而来的各种坑也是层出不穷。

应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他，刷到的朋友们就赚到了，你懂的~~~~~~收藏吧！

事情前情概述，昨天IBM的同事前来咨询我怎样实现微信分享功能。经过一系列的细细道来。原来他们前端是用uniapp开发的一个app，现在要实现分享功能。他们前端的小伙伴没有这方面的经验，折腾了半天没有眉目。那么接下来我从以下三个方面来解剖如何实现分享。

功能介绍：微信分享及收藏是指第三方 App 通过接入该功能，让用户可以从 App 分享文字、图片、视频、网页、小程序、音乐视频至微信好友会话、朋友圈或添加到微信收藏。微信分享及收藏功能已向全体开发者开放，开发者在微信开放平台账号下申请 App 并通过审核后，即可获得微信分享及收藏权限。微信分享及收藏目前支持文字、图片、视频、网页、小程序、音乐视频共六种类型（海外应用支持网页、小程序类型分享）

说白了，对于分享功能来说，是一个非常普遍而又常见的功能。但是面临不同的环境、不同的技术栈确实有点头大。特别是对于初入行的猴子们。

这里就针对分享功能在不同平台、不同技术栈应该怎样去实现做简单的分享。

1、h5分享-微信好友、朋友圈（移动端浏览器）
h5是如何实现微信分享功能？？
参考微信分享官方文档：微信开发者官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
官网有点啰嗦，很多小伙伴看着看着就迷茫了这里我做简单的小结：

(1)在微信开发平台按照官方要求提供相关资料开通公众号，在开发设置里面配置安全域名。先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”

(2)引入js文件：可以使用传统的引入方式：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

（3）业务功能模块开发直接上代码


export function weixinShareInfo(name,title,url,logo){// name 活动名称   title 活动活动简介  url 分享的地址  logo
    var data={//请求参数
     data:url,//分享的页面地址
    }
    requestMethods("/weChat/getSign",data).then(res=>{
      if (res.code == "SUCCESS") {
        let weChatData = res.data
          wx.config({
            debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: weChatData.appId,         // 必填，公众号的唯一标识，填自己的！
            timestamp: weChatData.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
            nonceStr: weChatData.nonceStr,   // 必填，生成签名的随机串
            signature: weChatData.signature, // 必填，签名，见附录1
            jsApiList: [
              'updateAppMessageShareData',//分享好友
              'updateTimelineShareData',// 分享朋友圈
              'onMenuShareAppMessage',
              'onMenuShareTimeline'
            ]
          })
        wx.error(function(res){
          alert(JSON.stringify(res))
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        
        wx.ready(function () {
          //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
          wx.updateTimelineShareData({
            title: name,   // 分享时的标题
            desc:title,
            link: weChatData.shareUrl,     // 分享时的链接
            imgUrl:logo,    // 分享时的图标
            success: function () {
              console.log('分享成功')
            },
            cancel: function () {
                console.log('取消分享')
            }
          });
          //自定义分享给朋友、以及分享给qq好友
          wx.updateAppMessageShareData({
            title:name,
            desc:title, 
            link:weChatData.shareUrl,
            imgUrl:logo, 
            dataUrl: '', 
            success: function () {
              console.log('分享成功')
            },
            cancel: function () {
              // console.log('取消分享')
            }
          });
// 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareAppMessage({
            title: name, // 分享标题
            desc: title, // 分享描述
            link:weChatData.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:logo, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl:'', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
              // 用户点击了分享后执行的回调函数
            }
          });
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareTimeline({  // 分享到朋友圈
            title:  name, // 分享标题
            desc: title, // 分享描述
            link: weChatData.shareUrl, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: logo, // 分享图标
            success: function () {
            // 用户点击了分享后执行的回调函数
            }
          })
      //分享到微博
          wx.onMenuShareWeibo({
            title: name, // 分享标题
            desc: title, // 分享描述
            link: weChatData.shareUrl, // 分享链接
            imgUrl: logo, // 分享图标
            success: function () {
            // 用户确认分享后执行的回调函数
            },
            cancel: function () {
            // 用户取消分享后执行的回调函数
            }
          })
 
        })
      }
    })  
}

我这里稍微封装了一下，不同页面调用的时候传入相对应的参数即可（根据实际业务来定）。

2、小程序分享

微信小程序分享主要针对使用不同的技术框架来定不同的开发方案和方法。万卷不离其宗，都是离不开微信官方api onShareAppMessage 。那么接下来就针对目前市面上常用的几种技术框架展开分一下：
2.1 微信小程序原生实现分享


onShareAppMessage: function () { //分享朋友
  return {
    path: '分享的页面地址，默认是小程序首页',
    title: '分享的标题',
    imageUrl: '小程序对用的图片地址'
  }
}
 
 onShareTimeline: function () {//分享朋友圈
    return {
      query: '自定义页面路径中携带的参数',
      title:'分享的标题',
      imageUrl: '小程序对用的图片地址'
    }
  }

2.2 uniapp开发的微信小程序实现分享
由于uniapp框架不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容。

第一步，在微信公众平台申请开通微信公众号，具体的看上面的第一个案例h5分享。https://ask.dcloud.net.cn/article/208

第二步，在uniapp项目里面进行配置要分享的渠道（填入第一步申请的微信公众平台上拿到的appid）。具体操作如图所示：

第三步，业务页面功能开发
首先来熟悉一下相关的api 参数以及相关的说明，太多了补贴了。感兴趣的直接去阅读官网。

直接上干货：


uni.share({
    provider: 'weixin',
    scene: "WXSceneSession",
    type: 5,
    imageUrl: '',
    title: '爆款大活动，多多参与',
    miniProgram: {
        id: 'gh_73d3d7ff6319',//小程序原始ID
        path: 'pages/index/index',
        type: 2,//0-正式版；1-测试版；2-体验版。 默认值为0。
        webUrl: '小程序的域名'
    },
    success: ret => {
        console.log(JSON.stringify(ret));
    }
});

另外一种实现方式：

uniapp开发的 App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）


uni.share({
    provider: 'weixin',
    scene: "WXSceneSession",
    type: 5,
    imageUrl: '图片地址',
    title: '欢迎体验uniapp',
    miniProgram: {
        id: 'gh_abcdefg',
        path: 'pages/index/index',
        type: 0,
        webUrl: 'http://uniapp.dcloud.io'
    },
    success: ret => {
        console.log(JSON.stringify(ret));
    }});

3、第三方app分享之云闪付小程序分享

关于云闪付小程序开发可以参考我之前的文章-云闪付小程序崛起之玩转云闪付小程序

由于云闪付右上角的胶囊api没有对外开放，我们只能对其进行二次开发

图文分享案例直接上干货


function share(shareList){// title,desc,logo,url
    let that = this;
    let params = {"toLink": encodeURIComponent(shareList.url),"encryptAppId":AppId,};// "dc99e8750707d2ea"
    let paramsData = JSON.stringify(params);
    let str = CryptoJS.enc.Utf8.parse(paramsData);
    let base64 = CryptoJS.enc.Base64.stringify(str);
    upsdk.pluginReady (function(){
        upsdk.showSharePopup({ //appletSharePopup shareSinglePlugin  appletSharePopup showSharePopup
            title:shareList.title,
            desc:shareList.desc,
            shareUrl: '云闪付官方地址详情见云闪付开发者平台?params='+ base64,// 默认为当前页面链接即location.href
            picUrl: logo, //默认显示银联云闪付图标 
            shareId: '3', // 详细见备注  '0' 短信,'1' 新浪微博,'3' 微信,'4' 朋友圈,'5' qq,'6' qqzon,'7' 拷贝链接;
            shareType: '1', //'1':链接分享，'2':文字分享，'4'：图片分享， 详细见备注
            shareData: {  // 详细见备注
            content:'', //可选，当shareType为2时，必传
            image:'', //图片的base64数据，可选，仅当shareType为4时，传
            },
            success:function(data){ // 插件调用成功
            },
            fail:function(code){
                console.log('分享失败');
            console.log(code);
            
            }
        });
    });
}

海报分享案例：


function shareImage(shareListTepy){
    let that = this;
 
let shareUrl = decodeURIComponent(window.location.href)
if(shareUrl.indexOf("?") != -1  && shareUrl.indexOf("userId") == -1){ //hareUrl.split(0,shareUrl.indexOf("userId"))
    shareUrl = shareUrl+'&userId='+user
  }else if(shareUrl.indexOf("userId") > -1) {
    // shareUrl = shareUrl.substr(0,shareUrl.indexOf("userId"))+'userId='+user
  }else{
    shareUrl = window.location.href +'?userId='+user
  }
   let params = {"toLink": encodeURIComponent(shareUrl),"encryptAppId":AppId,};// "dc99e8750707d2ea"
   let paramsData = JSON.stringify(params);
   let str = CryptoJS.enc.Utf8.parse(paramsData);
   let base64 = CryptoJS.enc.Base64.stringify(str);
 upsdk.pluginReady (function(){
   upsdk.shareSinglePlugin({
       title: '银联云闪付随机立减大优惠～！',
       desc: '我刚刚使用银联云闪付, 省了30元,大家快来使用吧.',
       shareUrl:  '云闪付官方地址详情见云闪付开发者平台?params='+ base64,// 默认为当前页面链接即location.href,// 默认为当前页面链接即location.href
       picUrl: strlog, //默认显示银联云闪付图标 
       shareId: shareListTepy.shareId, // 详细见备注 //shareId, 必填，可选值为：'0','1','3','4','5','6','7';渠道shareId;短信:0,新浪微博:1,微信:3,朋友圈:4,QQ:5,QZone:6,拷贝链接  7
       shareType: '4', //'1':链接分享，'2':文字分享，'4'：图片分享， 详细见备注
       shareData: {  // 详细见备注
           content:'', //可选，当shareType为2时，必传
           image:shareListTepy.imagesData //图片的base64数据，可选，仅当shareType为4时，传
       },
       fail:function(code){
           // code: '01':对应渠道的应用未安装，例如微信未安装，或该渠道调用失败
           // code: '02':检查shareType,shareaId是否正确
           console.log(code)
       }
   });
 })
}

角度二：对于刚入行的程序员，你有什么想说的呢（建议或忠告）？

个人总结：认真分析需求，仔细阅读相关官方文档。没有实现不了的功能，互联网已经发展了几十年了，现在所有遇到的坑，基本上都有人踩过，踩过必有痕迹……

角度三：如何才能成为一名更优秀的程序员？

曾经在ＩＢＭ一个团队呆过，当时的架构师这样说过：复杂的事情简单做，简单的事情重复做，重复的事情工具做，我们只做工具。这里分享给大家，希望能够帮助众多猴子们。

还有就是在工作中不管事哪级leader指派任务，都要问清楚对方三个问题：１、具体需求是什么？２、开发周期是多久什么时候启动？３、对接配合的相关团队是哪些（ＵＩ、后台、前端、测试、产品）

同样在做项目前要自己吃透需求，同时要问清楚自己三个问题：１、为什么要这么干？２、这样干有什么好处？３、还有没有更好的方式方法去做？

项目结束要及时的进行自我复盘、review。同时把做项目前问自己的三个问题在问一边。

相信时间久了，对自己的成长会有所帮助。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/759284