前端做微信好友分享_前端微信分享,调用微信分享,分享朋友圈,分享微信好友,分享qq空间,qq好友...

项目中很多使用到微信分享的地方,对于前端来说也算很简单了,建议写该功能时使用微信调试工具,便于调试,直接上代码

第一步,引入微信配置文件

//这里的AJAX用于获取后台数据,当然也可以不用这么写,您只需要提取您需要的代码即可

$.ajax({

url: "后台接口地址,用于获取需要的微信配置",

data: {

//需要encodeURIComponent转码,默认为分享当前地址

url: encodeURIComponent(window.location.href)

},

type: 'POST',

success: function(res) {

//获取数据之后的操作,如果配置信息在其他地方获取,删掉这段AJAX请求,该参数就好

console.log(res);

var obj = res.data;

//配置微信参数

wx.config({

debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来

appId:obj.appid, //在微信绑定公众号时生成的appid,有后台返回

timestamp: obj.timestamp, //生成签名的时间戳,由后台返回

nonceStr: obj.nonceStr, //生成签名的随机串,由后台返回

signature: obj.signature, //签名,由后台返回

jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']

//jsApiList参数可以有很多,一下一一对应列出来

//但是下面需要添加对应的参数信息(下面只写了分享到微信好友和朋友圈,方便复制)

//onMenuShareQQ 分享到QQ好友

//onMenuShareWeibo 分享到腾讯微博

//onMenuShareQZone 分享QQ空间

});

wx.onMenuShareTimeline({

//以下是微信的分享的配置信息,建议从后端获取

title: "分享出去的标题",

link: "分享出去的连接地址!!!这里的地址必须是当前在微信绑定的域名下的地址",

imgUrl: "分享出去的图片地址!!!图片也必须是绑定域名下的图片",

desc: "详细描述",

trigger: function(res) {

// 触发时需要做的事...

},

success: function() {

// alert('分享到朋友圈成功');

},

cancel: function() {

// alert('你没有分享到朋友圈');

},

fail: function(res) {

//这里必须写,可以再非微信端弹出错误信息,方便调试

alert(JSON.stringify(res));

}

});

wx.onMenuShareAppMessage({

title: "分享出去的标题",

link: "分享出去的连接地址!!!这里的地址必须是当前在微信绑定的域名下的地址",

desc: "详细描述",

imgUrl: "分享出去的图片地址!!!图片也必须是绑定域名下的图片",

trigger: function(res) {

// 触发时需要做的事...

},

success: function(res) {

//alert('分享给朋友成功');

},

cancel: function(res) {

//alert('你没有分享给朋友');

},

fail: function(res) {

//这里必须写,可以再非微信端弹出错误信息,方便调试

alert(JSON.stringify(res));

}

});

}

});

OK,直接复制粘贴,改改参数就行了,很简单,比较坑的是,我们在配置了这些参数之后,也只能通过微信右上角的按钮来手动分享,这就很尴尬了,哈哈哈。。。。。。

我是这么操作的

分享成功图片

在成功之后的回调里,显示这张图片就好了,感觉好Low的样子,Low就Low吧。。。。。。

写的比较详细,新手试用最佳,如有错希望各位在下方评论出来,谢谢。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值