专业编程基础技术教程

网站首页 > 基础教程 正文

微信分享,分享朋友圈、朋友,记下下面代码,下回直接粘贴复制哦

ccvgpt 2024-07-20 11:54:05 基础教程 14 ℃

产品说:“这个活动页,为了增加曝光量,增加微信分享功能”

那想这种带图片文字的分享怎么弄的呢?

微信分享,分享朋友圈、朋友,记下下面代码,下回直接粘贴复制哦

一、解析

1.需要一个公众号

2.需要后台将你网站的域名配置到微信开发网页后端

3.需要appId、timestamp、nonceStr、signature(这个让后端给你,具体怎么获取我也会贴后端代码)

二、代码

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
 $(function () {
 var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
 //在微信中打开
 if (ua.match(/MicroMessenger/i) == "micromessenger") {
 getwxconfig();
 var linkurl = "http://dataplat.centaline.com.cn/www_data/data_growth";
 var title = "【中原数据平台】40年中原地产大陆区客户资产,看完热血沸腾";
 var des = "40年中原地产大陆区客户资产";
 var imgurl = "http://dataplat.centaline.com.cn/images/change40.png";
 wxshare(linkurl, title, des, imgurl);
 }
 })
 //获取微信配置信息
 function getwxconfig() {
 var url = location.href.split('#')[0];
 $.ajax({
 type: "POST",
 url: "/www_data/weixintoken",
 data: {
 'action': 'wxApi',
 'url': url
 },
 dataType: "json",
 async:false,
 success: function (data) {
 //console.log('配置成功');
 wx.config({
 debug: false,
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: [
 // 所有要调用的 API 都要加到这个列表中
 'onMenuShareAppMessage',
 'onMenuShareTimeline',
 'onMenuShareQQ',
 'onMenuShareWeibo',
 'onMenuShareQZone',
 'chooseImage',//选择照片或者拍照
 'uploadImage'//上传图片
 ]
 });
 },
 error: function (data) {
 console.log(data);
 console.log('分享配置失败');
 }
 });
 }
 //微信分享
 function wxshare(linkurl,title,des,imgurl) {
 wx.ready(function () {
 //微信分享
 wx.onMenuShareTimeline({
 title: title, // 分享标题
 desc: des, // 分享描述
 link: linkurl, // 分享链接
 imgUrl: imgurl, // 分享图标
 success: function () {
 // 用户确认分享后执行的回调函数
 //alert("成功");
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 //alert("失败");
 }
 });
 wx.onMenuShareAppMessage({
 title: title, // 分享标题
 desc: des, // 分享描述
 link: linkurl, // 分享链接
 imgUrl: imgurl, // 分享图标
 type: '', // 分享类型,music、video或link,不填默认为link
 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
 success: function () {
 // 用户确认分享后执行的回调函数
 //alert("成功");
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 //alert("失败");
 }
 });
 wx.onMenuShareQQ({
 title: title, // 分享标题
 desc: des, // 分享描述
 link: linkurl, // 分享链接
 imgUrl: imgurl, // 分享图标
 success: function () {
 // 用户确认分享后执行的回调函数
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 }
 });
 wx.onMenuShareWeibo({
 title: title, // 分享标题
 desc: des, // 分享描述
 link: linkurl, // 分享链接
 imgUrl: imgurl, // 分享图标
 success: function (res) {
 },
 cancel: function (res) {
 },
 fail: function (res) {
 }
 });
 wx.onMenuShareQZone({
 title: title, // 分享标题
 desc: des, // 分享描述
 link: linkurl, // 分享链接
 imgUrl: imgurl, // 分享图标
 success: function (res) {
 },
 cancel: function (res) {
 },
 fail: function (res) {
 }
 });
 });
 }
</script>

后端怎么获取access_token呢?

1.get请求(参数是appId和appSecret)需要登录微信开发平台查看哦可以返回得到access_token

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+appId+'&secret='+appSecret+'

2.get请求得到ticket

http://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+access_token+'&type=jsapi

3.到到签名(timestamp时间戳、noncestr为随机字符串随便填、url为页面的url、然后凭接成字符串进行hex_sha1加密得到签名)

var access_token =access_token;
var timestamp= Math.round(new Date().getTime()/1000);
var noncestr ="xxxxs12";
var jsapi_ticket="jsapi_ticket="+ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url+"";

4.将数据返回前端appId、access_token、timestamp、nonceStr、signature

三、结语

后端调微信接口获取access_token记得做缓存哦,每天只能获取2000次,不然你就呵呵吧,作者我就是忘记加缓存,导致朋友圈分享没有图片,文字,被批了,那天集团老总还能看到,掉了大。

大家可以收藏哦,或者到github下载源码哦!

Tags:

最近发表
标签列表