微信分享到朋友圈接口用法

下面是微信分享的关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
wx.ready( function (){
     wx.onMenuShareTimeline({
         title:  '嘻嘻' , // 分享标题 
         link:  'https://www.xttblog.com' '?id=' + res.data.id,// 分享链接 
         imgUrl:  'http://xx.com/test.jpg' ,// 分享图标
         success:  function () {}, // 用户确认分享后执行的回调函数 
         cancel:  function () {}, // 用户取消分享后执行的回调函数 
         fail:  function (res) { 
             alert( "分享失败,请重新尝试" ); 
         }
     });
     wx.onMenuShareAppMessage({
         title:  '哈哈哈' , // 分享标题 
         desc:  'CODE大全' , // 分享描述 
         link:  'https://www.xttblog.com' '?id=' + res.data.id ,// 分享链接 
         imgUrl:  'http://xx.com/test.jpg' ,
         type:  'link' ,
         success:  function () {}, // 用户确认分享后执行的回调函数
         cancel:  function () {} // 用户取消分享后执行的回调函数 
     });
     $.ajax({
         url: (HOST+ '/config' ),
         type:  'GET' ,
         dataType:  'json' ,
         data: {
             url : location.href
         },
         success:  function (res){
             if (res.code === 1){
                 res.data.jsApiList = [ 'checkJsApi' 'onMenuShareTimeline' 'onMenuShareAppMessage' 'closeWindow' ];
                 wx.config(res.data);
             }
         }
     });
}
  1. 虽然微信提供了JSSDK,但是这不意味着你可以用自定义的按钮来直接打开微信的分享界面,这套JSSDK只是把微信分享接口的内容定义好了,实际还是需要用户点击右上角的菜单按钮进行主动的分享,用户点开分享界面之后,出现的内容就会是你定义的分享标题、图片和链接。
  2. wx.config()注入配置成功之后,会触发wx.ready()函数(同样失败的时候会触发wx.error()函数),所以之后的有必要的接口调用,比如定义分享到朋友圈、分享给好友的内容,还是放在wx.ready()中进行调用以保证正确性。
  3. wx.checkJsApi无需wx.config即可调用,用来判断当前客户端是否能支持微信JSSDK的接口。
  4. 分享出去的链接,会被微信在链接后面追加参数。这个问题十分重要,本人在开发过程中,第一次分享出去,成功没有任何问题,但是再次打开链接,会提示invalid signature,也就是签名错误,这个问题出现的原因,就是因为原来链接的被追加了参数,传递到自己服务器后台的页面原地址和提交给微信的页面原地址不匹配,解决方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pageUrl = window.location.href.split( '#' )[0]; 
pageUrl = pageUrl.replace(/\&/g,  '%26' );</span> 
initJsApiTicket(pageUrl,  function (data) { 
     if (data.errcode ==  '0' ) { 
         wx.config({ 
             debug:  false
             appId: data.appId, 
             timestamp: data.timestamp, 
             nonceStr: data.nonceStr, 
             signature: data.signature, 
             jsApiList: [ 'onMenuShareTimeline' 'onMenuShareAppMessage'
         }); 
    
});

注意如果你是用这种方式将页面原地址作为参数传递到后台的话,需要将参数中的&全部替换为%26,否则后台接收到的地址会丢失参数,导致最后签名不一致。另外,在你分享出去的URL中,必须将微信附加的参数去掉,否则会导致第二次分享成功,但是第三次、第四次以及后续的分享都失败。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UniApp是一种基于Vue.js的跨平台开发框架,可以用于同时开发iOS、Android和Web应用。要实现微信分享朋友圈,你可以按照以下步骤进行操作: 1. 在UniApp项目中安装并引入微信JSSDK,可以通过npm安装或者直接引入CDN链接。 2. 在项目的`main.js`文件中,使用`Vue.prototype`将微信JSSDK挂载到Vue实例上,以便在全局使用。 3. 在需要分享的页面中,调用微信JSSDK提供的接口进行分享配置和分享操作。 具体的实现步骤如下: 1. 安装微信JSSDK: ``` npm install weixin-js-sdk ``` 2. 在`main.js`中引入并挂载微信JSSDK: ```javascript import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx ``` 3. 在需要分享的页面中,调用微信JSSDK提供的接口进行分享配置和分享操作。例如,在`Share.vue`组件中: ```javascript export default { mounted() { this.wxConfig() }, methods: { wxConfig() { // 获取后端提供的微信配置信息 // 这里假设后端返回的配置信息为wxConfigData const wxConfigData = { appId: 'your_appId', timestamp: 'your_timestamp', nonceStr: 'your_nonceStr', signature: 'your_signature' } // 调用微信JSSDK的config方法进行配置 this.$wx.config({ debug: false, appId: wxConfigData.appId, timestamp: wxConfigData.timestamp, nonceStr: wxConfigData.nonceStr, signature: wxConfigData.signature, jsApiList: ['onMenuShareTimeline'] // 需要使用的接口列表 }) // 配置成功后,调用微信JSSDK的ready方法 this.$wx.ready(() => { // 在ready回调中进行分享操作 this.wxShareTimeline() }) }, wxShareTimeline() { // 调用微信JSSDK的onMenuShareTimeline方法进行分享朋友圈 this.$wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', success: function () { // 分享成功的回调函数 console.log('分享成功') }, cancel: function () { // 取消分享的回调函数 console.log('取消分享') } }) } } } ``` 以上就是使用UniApp实现微信分享朋友圈的基本步骤。你可以根据自己的需求进行配置和定制化。如果有其他问题,请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值