微信好友、朋友圈分享汇总

微信好友、朋友圈分享汇总

适用人群：

1、适用前端初学者

2、适用对微信、qq等平台分享功能不熟悉的朋友

3、适用对前端开发不了解并且认为前端开发分享很简单的朋友

4、适用开发技术栈比较单一，又不知道自己所用的技术栈是否能实现的朋友

5、对微信官方文档看的一知半解犯迷糊的朋友

大纲

1、手把手教学开通微信平台

2、H5项目如何实现微信分享？

3、H5分享代码解刨

4、解刨官方API

5、微信小程序分享

6、Uniapp开发分享是怎么样配置的

7、uni-app开发分享代码实现

8、react+taro架构项目如何实现微信分享

9、云闪付小程序如何开通入网

10、云闪付小程序如何绕开原生胶囊开发分享

11、云闪付小程序如何二次开发分享功能

12、云闪付小程序如何开发分享海报

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

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

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

注意：若移动应用未上架，则天分享量受限制为 100 次，包括分享到会话和朋友圈，用于满足调试需求。

1、h5分享-微信好友、朋友圈（移动端浏览器）
h5是如何实现微信分享功能？？
参考微信分享官方文档： 官网有点啰嗦，很多小伙伴看着看着就迷茫了 这里我做简单的小结：

（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 。那么接下来就针对目前市面上常用的几种技术框架展开分一下：

（1）微信小程序原生实现分享

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

 onShareAppMessage: function () { //分享朋友
  return {
    path: '分享的页面地址，默认是小程序首页',
    title: '分享的标题',
    imageUrl: '小程序对用的图片地址'
  }
}

（2）uniap开发的微信小程序实现分享
由于uniapp框架不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容。
第一步，在微信公众平台申请开通微信公众号，具体的看上面的第一个案例h5分享。

ask.dcloud.net.cn/article/208

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

 

弟三步，业务页面功能开发

OBJECT 参数说明

参数名****	类型****	必填****	说明****
provider	String	是	分享服务提供商（即weixin	qq	sinaweibo），通过 uni.getProvider 获取可用的分享服务商，可用是指在manifest.json的sdk配置中配的分享sdk厂商，与本机安装了什么社交App无关
type	Number	否	分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同，具体参考下面type值说明。
title	String	否	分享内容的标题
scene	String	provider 为 weixin 时必选	场景，可取值参考下面说明。
summary	String	type 为 1 时必选	分享内容的摘要
href	String	type 为 0 时必选	跳转链接
imageUrl	String	type 为 0、2、5 时必选	图片地址。type为0时，推荐使用小于20Kb的图片
mediaUrl	String	type 为 3、4 时必选	音视频地址
miniProgram	Object	type 为 5 时必选	分享小程序必要参数
openCustomerServiceChat	Boolean	否	是否启用拉起客服功能（目前仅支持微信。HBuilder X 3.4.3+）
corpid	String	openCustomerServiceChat = true 时必填	客服ID（目前仅支持微信。HBuilder X 3.4.3+）
customerUrl	String	openCustomerServiceChat = true 时必填	客服的页面路径（目前仅支持微信。HBuilder X 3.4.3+）
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

type 值说明

值****	说明****	provider 支持度****
0	图文	weixin、sinaweibo
1	纯文字	weixin、qq
2	纯图片	weixin、qq
3	音乐	weixin、qq
4	视频	weixin、sinaweibo
5	小程序	weixin

scene 值说明

值****	说明****
WXSceneSession	分享到聊天界面
WXSceneTimeline	分享到朋友圈
WXSceneFavorite	分享到微信收藏

miniProgram 值说明

值****	类型****	说明****
id	String	微信小程序原始id
path	String	点击链接进入的页面
type	Number	微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
webUrl	String	兼容低版本的网页链接

 

Html部分 正如第一步所介绍，uniapp没有办法直接调去api，只能用户主动触发。下面我这里给一个按钮主动触发。

 

    
<button class="share" @click="shareBtn" > 分享 </button>

Js功能部分：

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: 'https://zjksmartbus.toponedt.com'
    },
    success: ret => {
        console.log(JSON.stringify(ret));
    }

});
/**App分享为微信小程序**（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）**/
uni.share({

    provider: 'weixin',
    scene: "WXSceneSession",
    type: 5,
    imageUrl: 'https://web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png',
    title: '欢迎体验uniapp',
    miniProgram: {
        id: 'gh_abcdefg',
        path: 'pages/index/index',
        type: 0,
        webUrl: 'http://uniapp.dcloud.io'
    },
    success: ret => {
        console.log(JSON.stringify(ret));
    }});

以上是两个常用典型的案例，其他相关分享请查看uniapp官方文档
uniapp.dcloud.net.cn/api/plugins…

（2）taro开发的微信小程序实现分享

 useShareAppMessage(res => {
        if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
    })

/**Taro 开发的微信小程序分享写法，直接调用微信api onShareAppMessage **/
this.shareInfo = {
      title: '分享标题',
      path: '分享的路径',
      imageUrl: '分享图片地址',
    }
onShareAppMessage = (res) => {
    return this.shareInfo;
  }

3、第三方app分享

云闪付小程序分享

关于云闪付小程序开具体的参考我之前分享的文章

以往作品锦集

1、# uni-app开发小程序和App的发版流程

2、# 云闪付小程序重写分享

3、# 云闪付小程序崛起之玩转云闪付小程序

4、# 低代码工具快速搭建h5活动

5、# 从零开始撸SVG之基础理论篇

6、# 从零开始撸SVG之小试牛刀