晓夏

小皇

教育信息化方案砖家

微信分享到朋友圈,分享给朋友JS代码

浏览量:157769

说明:2015年,微信公众平台升级了开发文档。

其实就是限制了没有加入公众平台的人的分享权限。

如果你没有公众平台的账号,你也可以copy过去使用,只是分享的时候没有介绍,只有标题和图片。

右下角灰色的介绍会用一个当前的网址代替。

说明:该代码所示没有图样,只有点击右上角的分享到朋友圈或者分享给朋友,才会显示出效果。

URL中不能含有? 建议使用伪静态


提示:最好去注册个账号https://mp.weixin.qq.com

注册的应该是非个人的订阅号,不然没有分享的功能。不用谢~

效果如下图所示:


我的是php,首先要做一个php的函数(我php差,我就这么叫,不服来打我~)

代码如下:

function jssdk(){
		$appid = '这里替换成你的appid';
		$secret = '这里替换成你的key';
		$_title = '微信';
		$code = $_GET['code'];//获取code
		$_SESSION['code'] = $code;//设置code缓存给微信付账使用
		$auth = file_get_contents("https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=".$secret."&code=".$code."&grant_type=authorization_code");//通过code换取网页授权access_token
		$jsonauth = json_decode($auth); //对JSON格式的字符串进行编码
		$arrayauth = get_object_vars($jsonauth);//转换成数组
		$openid = $arrayauth['openid'];//输出openid
		$access_token = $arrayauth['access_token'];
		$_SESSION['openid'] = $openid;
		
		$accesstoken = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$secret."");//获取access_token
		$token = json_decode($accesstoken); //对JSON格式的字符串进行编码
		$t = get_object_vars($token);//转换成数组
		$access_token = $t['access_token'];//输出access_token
		
		$jsapi = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi");
		$jsapi = json_decode($jsapi);
		$j = get_object_vars($jsapi);
		$jsapi = $j['ticket'];//get JSAPI
		
		$time = 14999923234;
		$noncestr= $time;
		$jsapi_ticket= $jsapi;
		$timestamp=$time;
		$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
		$and = "jsapi_ticket=".$jsapi_ticket."&noncestr=".$noncestr."&timestamp=".$timestamp."&url=".$url."";
		$signature = sha1($and);
		return $signature;
	}

最后的一句代码,就是说,如果你在输出页面使用<?=jssdk();?>,那么就会输出$signature的内容。其中上面的$time是我手动指定的,这个一定要跟输出页面的js代码的值一样。

输出页面代码如下:

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script language="javascript" type="text/javascript">
wx.config({
    debug: false,//这里是开启测试,如果设置为true,则打开每个步骤,都会有提示,是否成功或者失败
    appId: '这里换成你的appid',
    timestamp: '14999923234',//这个一定要与上面的php代码里的一样。
    nonceStr: '14999923234',//这个一定要与上面的php代码里的一样。
    signature: '<?=jssdk();?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
	    'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo'
    ]
});
wx.ready(function () {
	wx.onMenuShareTimeline({
		title: "<?=$act['act_name']?>", // 分享标题
		link: "http://www.brandhd.com/v/events/view/<?=$act['act_id']?>", // 分享链接
		imgUrl: "http://www.brandhd.com<?=$act['act_poster_small']?>", // 分享图标
		success: function () { 
			// 用户确认分享后执行的回调函数
		},
		cancel: function () { 
			// 用户取消分享后执行的回调函数
		}
	});
	wx.onMenuShareAppMessage({
		title: "<?=$act['act_name']?>", // 分享标题
		desc: "<?=substr($act['act_stime'],0,10)?><?=$act['act_place']?>", // 分享描述
		link: "http://www.brandhd.com/v/events/view/<?=$act['act_id']?>", // 分享链接
		imgUrl: "http://www.brandhd.com<?=$act['act_poster_small']?>", // 分享图标
		type: '', // 分享类型,music、video或link,不填默认为link
		dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
		success: function () { 
			// 用户确认分享后执行的回调函数
		},
		cancel: function () { 
			// 用户取消分享后执行的回调函数
		}
	});
	wx.onMenuShareQQ({
		title: "<?=$act['act_name']?>", // 分享标题
		desc: "<?=substr($act['act_stime'],0,10)?>\n<?=$act['act_place']?>", // 分享描述
		link: "http://www.brandhd.com/v/events/view/<?=$act['act_id']?>", // 分享链接
		imgUrl: "http://www.brandhd.com<?=$act['act_poster_small']?>", // 分享图标
		success: function () { 
		   // 用户确认分享后执行的回调函数
		},
		cancel: function () { 
		   // 用户取消分享后执行的回调函数
		}
	});
	wx.onMenuShareWeibo({
		title: "<?=$act['act_name']?>", // 分享标题
		desc: "<?=substr($act['act_stime'],0,10)?>\n<?=$act['act_place']?>", // 分享描述
		link: "http://www.brandhd.com/v/events/view/<?=$act['act_id']?>", // 分享链接
		imgUrl: "http://www.brandhd.com<?=$act['act_poster_small']?>", // 分享图标
		success: function () { 
		   // 用户确认分享后执行的回调函数
		},
		cancel: function () { 
			// 用户取消分享后执行的回调函数
		}
	});
});
</script>


神回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  • leo 回复该评论

    非公众账号也可以么

    发布于 2014-06-13 15:53:53

    • 小皇 回复该评论

      可以的,这个只是相对于HTML网页来讲的,分享的时候是分享页面

      发布于 2014-06-14 11:29:50

  • leeking 回复该评论

    高人 怎么知道有这些接口的

    发布于 2014-06-21 00:13:07

    • 小皇 回复该评论

      我看着人家的有,就看人家的源代码分析测试后整理的。

      发布于 2014-06-21 14:00:08

  • 访客 回复该评论

    我直接在页面中添加发送好友按钮,调用shareFriend()函数为什么没有效果?求指点

    发布于 2014-06-23 09:00:36

  • 访客落雪 回复该评论

    亲,我用大神的这段代码了,就是分享朋友圈那段,为什么图片"img_url": imgUrl, 不显示呢?链接,标题都可以的。希望看到后快点给回复。急需。多谢了!谢谢

    发布于 2014-07-03 16:13:44

    • 小皇 回复该评论

      介个要绝对地址才可以,而且要用引号引起来,最好是正方形的,图片不要过大

      发布于 2014-07-03 21:49:18

    • zcj 回复该评论

      你解决了没,我也遇到跟你一样的问题

      发布于 2014-07-16 11:35:37

  • 访客 回复该评论

    请问这个是什么意思 WeixinJSBridge.on('menu:share:timeline'

    发布于 2014-07-04 21:39:57

  • 访客安绮纭 回复该评论

    老是出现System:access_denied怎么整?

    发布于 2014-07-09 09:24:18

    • 访客 回复该评论

      我也是这个消息System:access_denied,解决了?

      发布于 2014-08-26 11:47:57

  • 访客 回复该评论

    为什么的不行呢?分享到好友圈显示 access_control:not_allow

    发布于 2014-07-10 17:26:37

    • 访客 回复该评论

      我也遇到这个问题了,请问解决了吗怎么解决的

      发布于 2014-08-07 18:56:02

  • 访客 回复该评论

    哥们 为什么我的就没有起作用呢

    发布于 2014-07-10 20:13:27

  • 访客 回复该评论

    这个写的太棒了,可是我图片出来了,内容就显示链接,图片不在了,内容就出来了,可以留下联系QQ吗?

    发布于 2014-07-16 11:20:56

  • 访客 回复该评论

    var imgUrl = '˂img src=''/˃';
    var lineLink ='http://zcj0303.sgz.cnmei.com/4g/fengmian.php?u_id=';
    var descContent ='... 诚邀';
    var shareTitle = '新郎 : & 新娘1: 诚邀';
    var appid = '';
    求指教

    发布于 2014-07-16 11:21:38

  • zcj 回复该评论

    我图片出来了,内容就显示链接,图片不在了,内容就出来了,可以留下联系QQ吗?谢谢了

    发布于 2014-07-16 11:26:29

  • zcj 回复该评论

    希望小皇可以帮到我,不希望半途而非 谢谢

    发布于 2014-07-16 11:32:25

    • 小皇 回复该评论

      所以嘛,多看看,多找找bug,对提升自身的能力是很有帮助的。我也是一步一步修改别人提供的乱七八糟的代码,整理出来。这个一般是图片的路径不对,要用绝对地址路径。

      发布于 2014-07-16 22:27:13

  • 访客 回复该评论

    请教楼主,我想把手机页面分享到朋友圈,想直接用楼主的代码是不是要有个先决条件:去申请微信APPID?

    发布于 2014-07-21 10:44:48

  • 访客 回复该评论

    上星期还能用的,今天就不行了,楼主,你那边出现这个问题了么

    发布于 2014-07-21 14:46:41

  • 访客 回复该评论

    请教,如果是易信的朋友圈呢,需要修改哪些部分

    发布于 2014-07-30 10:51:44

  • 访客 回复该评论

    请问一下楼主,如果我想自定义分享按钮,点击按钮后就分享到微信朋友圈,可不可以实现这个功能呢?谢谢

    发布于 2014-08-01 15:46:43

  • 访客 回复该评论

    这些接口不是都被屏蔽了吗?

    发布于 2014-08-07 10:45:51

  • 深蓝 回复该评论

    安卓端的分享到朋友圈取消监听不到

    发布于 2014-08-13 10:31:00

  • ivan 回复该评论

    求楼主指点如何把这套代码植入html里面。。
    十分感谢

    发布于 2014-08-13 20:02:51

  • 访客 回复该评论

    为什么分享朋友圈的内容就是不显示呢 ??? 图片和标题都可以 还要改什么?

    发布于 2014-08-18 15:52:54

  • 访客 回复该评论

    我测试的 分享不成功呢?

    发布于 2014-08-18 17:37:58

  • 访客 回复该评论

    这为啥一定要是微信浏览器中才能显示呢,还有就是调用这个js必须是先点微信自带的分享朋友圈然后在退出来 在点击按钮才显示出来

    发布于 2014-08-19 15:43:50

  • 访客 回复该评论

    请问怎么获取到页面内图片路径呢

    发布于 2014-08-22 14:37:55

    • 小皇 回复该评论

      要用动态代码插入进去就行了,要用绝对地址。

      发布于 2014-08-26 11:02:34

  • 访客 回复该评论

    调用shareFriend()函数为什么没有效果,怎么弄的

    发布于 2014-08-22 15:44:39

  • 访客 回复该评论

    调用shareFriend()函数为什么没有效果,这个要怎么弄

    发布于 2014-08-22 15:51:29

  • 访客 回复该评论

    大神,我能不懂,能详细请教吗= =

    发布于 2014-08-25 18:48:11

  • 访客 回复该评论

    我弄成功了,蛮好的
    http://taobaosoft.com/app/0005wx/fx.asp
    我整理好的资料如下,大家打包下载吧
    http://taobaosoft.com/app/0005wx/

    发布于 2014-08-26 07:52:46

  • 冷暖自知否 回复该评论

    大神,求助,我前面都OK,但是自己做了个按钮,想在网页上直接点击分享,但是报错android 上返回 System:access_denied,ios 上返回not allowed

    发布于 2014-08-26 16:57:58

    • 冷暖自知否 回复该评论

      @小皇大神,我自己做的按钮(分享到朋友圈)必须先点击微信自带的分享到朋友圈后才有反应···,求解!是不是微信自带的按钮还做了些其他的初始化工作,比如网站认证啊,啥的···

      发布于 2014-08-26 17:27:17

      • 小皇 回复该评论

        微信早已经屏蔽了按钮类的触发,必须使用微信自带的分享。这个代码只是圈定分享后的内容是这样的。并非很只能的去自定义分享按钮。

        发布于 2014-08-28 09:20:44

  • 访客 回复该评论

    完美解决分享到朋友圈的问题,再次多谢小皇的分享。

    发布于 2014-09-01 10:37:32

  • 访客 回复该评论

    你这个没法判断用户是否已经成功分享了某篇文章(而不是点击了分享到朋友圈按钮)。怎么办呢。

    发布于 2014-09-01 13:11:17

    • 小皇 回复该评论

      额,还真没关注过这个统计的问题。管他谁分享的,只关注总的访问量就好了,分享再多,没访问量也百搭。

      发布于 2014-09-01 16:00:32

  • 访客 回复该评论

    请教@小皇大神 分享到微博是要按钮出发 还是在微博里直接分享即可,我在微博里直接分享貌似 得不到想要的描述内容!

    发布于 2014-09-10 11:37:40

  • 访客 回复该评论

    你好,我刚才用了你的代码,发现第一次调用弹不出分享界面,当我点击右上角分享到朋友圈,关闭发送界面退到分享界面,这个时候可以调用你的分享到朋友圈代码了

    发布于 2014-09-10 15:20:50

  • 访客 回复该评论

    求教,微信分享上面的代码很好用,感谢。
    可是QQ分享该怎么做?分享给朋友或者发送到QQ空间

    发布于 2014-09-12 16:03:55

  • 访客 回复该评论

    分享到微信

    发布于 2014-09-14 14:33:32

  • 访客 回复该评论

    这个一定要在微信内置的浏览器中 一个按钮绑定这个事件才是有效果的是吗? 普通的浏览器是不行的是吧?

    发布于 2014-09-15 14:35:06

  • 访客 回复该评论

    我写了一个按钮,点击触发“发送给好友”,可是,点击时,没反应,但是如果先点击微信自带的“发送给好友”之后,再点击按钮,就会弹出发送给好友的页面,为什么???

    发布于 2014-09-19 10:39:45

    • ArEs 回复该评论

      看看代码实现, 实际上是提前加载预设的信息, title, desc……
      然后触发右上角按钮, 读取准备好的信息,
      这个接口并不是真正调用发送朋友圈/ 好友信息用的,
      微信实际是监听右上角事件。

      发布于 2014-12-15 12:04:28

      • 小皇 回复该评论

        对的,微信已经屏蔽了自定义分享。只能通过旁门左道来实现这种效果

        发布于 2014-12-15 14:22:53

  • 访客 回复该评论

    分享到朋友圈,为什么只能我自己能看到,其他人看不到??

    发布于 2014-09-23 09:15:58

  • 访客 回复该评论

    ↙℅.、↖~∞/∩:~‘↙'一←`‘↖、七义'“▽↖↖‘

    发布于 2014-10-05 11:27:19

  • 蓝月 回复该评论

    我尝试了,绝对路径也不行呢。。。。

    发布于 2014-10-14 11:08:34

  • 内涵谷 回复该评论

    请问一下,如果当前网页有图就获取网页图片。如果当前没 有图片,分享指定图片的代码怎么写

    发布于 2014-11-17 16:07:46

  • jaaxzz 回复该评论

    用了你的这段代码的shareFriend()方法,返回的res.err_msg的信息是
    access_control: not_allow
    请问大神该怎么解决。谢谢

    发布于 2014-11-18 01:04:59

    • 小皇 回复该评论

      引用代码错误,可能是你调用的数据时错误的或者带有代码的,被识别错误,安全方面会被禁止使用分享。

      发布于 2014-11-18 08:52:13

  • 访客 回复该评论

    你好,请问,发给朋友功能没问题,但是,下面提示:SDK(未审核应用),这是什么情况呢?

    发布于 2014-11-18 16:29:52

    • 访客 回复该评论

      问题已经解决,我用的是测试号,换成服务号即可! 谢谢

      发布于 2014-11-18 18:04:46

  • 访客 回复该评论

    大神,我怎么加个按钮呢???

    发布于 2014-12-17 11:58:31

  • 访客 回复该评论

    不是微信浏览器能调用么?望解答

    发布于 2014-12-17 14:35:53

  • 访客 回复该评论

    为什么ios升级到8.1以上,微信分享功能就不可以了

    发布于 2014-12-22 21:12:36

    • 小皇 回复该评论

      用小米2S的表示,IOS设备没摸过啊,没摸过,解答不了你啊。sorry

      发布于 2014-12-22 22:01:50

  • 访客 回复该评论

    楼主是不是把代码放到页面上,再把链接改成自己的就行了吗?

    发布于 2014-12-26 17:54:44

    • 小皇 回复该评论

      对的啦

      发布于 2014-12-27 14:18:23

      • 访客 回复该评论

        我使用这段代码有的人 手机好使 可以分享指定内容 可是有的人就是获取不到这些指定的图片和内容 以及 url 为什么啊?

        发布于 2014-12-31 12:15:27

        • 访客 回复该评论

          我们也遇到这个问题。从12月30日开始的。不知道是不是腾讯做了屏蔽?????求大神指点。。。

          发布于 2014-12-31 23:13:25

  • 钟建超 回复该评论

    这个代码已经失效了

    发布于 2015-01-01 13:37:07

    • 访客 回复该评论

      你有什么好的方法可以解决吗联系我qq714258790

      发布于 2015-01-04 14:11:49

  • 访客 回复该评论

    我感觉也是失效了,有时候提取不到缩略图和描述!请问如何改写?

    发布于 2015-01-01 14:18:08

    • 访客 回复该评论

      我也是获取不到描述标题和图片。。。

      发布于 2015-01-02 23:26:26

    • 访客 回复该评论

      我的也不能用了可是怎么解决啊

      发布于 2015-01-04 13:53:45

      • 访客 回复该评论

        我也不可以使用了 你们找到了解决办法了么 如果找到了的话 可不可以给我看看 321895446 QQ

        发布于 2015-02-02 17:34:22

  • 访客 回复该评论

    现在貌似没用了,求解

    发布于 2015-01-05 11:20:53

    • 访客 回复该评论

      对呀,我今天测试, 也感觉不好用了。。

      发布于 2015-01-05 13:50:04

      • 访客 回复该评论

        微信6.0以后就不能用了,5.3,5.4还可以

        发布于 2015-01-06 14:55:50

  • 访客 回复该评论

    为什么现在分享代码用不了呢?谁有解决的办法没...

    发布于 2015-01-05 19:45:55

    • 访客 回复该评论

      不能用的情况 是什么,? 是分享到朋友圈成功后的 后续处理么?

      发布于 2015-01-06 17:07:25