微信JSSDK分享到朋友圈和朋友自定义内容功能实现

官网文档。请自行仔细阅读

https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.6433997488875112#gaishu

本Demo是基于之前几个例子写的。本Demo相当简单。

JSSDK使用步骤

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: '', // 必填,公众号的唯一标识

    timestamp: , // 必填,生成签名的时间戳

    nonceStr: '', // 必填,生成签名的随机串

    signature: '',// 必填,签名,见附录1

    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

通过Ajax请求Java后台返回数据

$(function(){
		$.ajax({
			type:'get',
			url:url,//填写自己的后台方法路径
			dataType:'jsonp',
			jsonpCallback: "js",
			success:function(sign){
			$("#url").val(sign.url);
			$("#tk").val(sign.jsapi_ticket);
			$("#appId").val(sign.appId);
			$("#nonceStr").val(sign.signature);
			$("#timestamp").val(sign.timestamp);
			$("#signature").val(sign.signature);
			wx.config({
			      debug: true,//必须开启的debug调试 以便查询错误,快速定位解决
			      //jsapi_ticket:sign.jsapi_ticket,
		      	      //url:sign.url,
			      appId: sign.appId,
			      timestamp: sign.timestamp,
			      nonceStr: sign.nonceStr,
			      signature: sign.signature,
                              //接口列表
			      jsApiList: [
			                'checkJsApi',
					        'onMenuShareTimeline',
					        'onMenuShareAppMessage',
					        'onMenuShareQQ',
					        'onMenuShareWeibo',
					        'hideMenuItems',
					        'showMenuItems',
					        'hideAllNonBaseMenuItem',
					        'showAllNonBaseMenuItem',
					        'translateVoice',
					        'startRecord',
					        'stopRecord',
					        'onRecordEnd',
					        'playVoice',
					        'pauseVoice',
					        'stopVoice',
					        'uploadVoice',
					        'downloadVoice',
					        'chooseImage',
					        'previewImage',
					        'uploadImage',
					        'downloadImage',
					        'getNetworkType',
					        'openLocation',
					        'getLocation',
					        'hideOptionMenu',
					        'showOptionMenu',
					        'closeWindow',
					        'scanQRCode',
					        'chooseWXPay',
					        'openProductSpecificView',
					        'addCard',
					        'chooseCard',
					        'openCard',
					        'configWXDeviceWiFi'
			      	]
				  });
			}
		});
});

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.ready(function () {
        // 分享到朋友圈
	wx.onMenuShareTimeline({
           title: '测试朋友圈', // 商品名
	   link: 'http://www.qq.com', // 商品购买地址
           desc: '测试分享到朋友圈', // 描述
           imgUrl: 'http://135523_DRVV_1444646.jpg', // 分享的图标
           fail: function (res) {
		 alert(JSON.stringify(res));
		  }
            });
      });

“分享到朋友圈”按钮点击状态及自定义分享内容接口截图示意

图1显示为JSSDK接入成功。可以查看我的另一篇博文。

图2则是选择分享到朋友圈操作

图3显示点击后是分享到朋友圈还是转发给朋友的信息

图4显示为分享到朋友圈的一个操作

图5显示分享到朋友圈成功。如果取消。则显示取消信息

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.ready(function () {
		    // 分享给朋友
		    wx.onMenuShareAppMessage({
		      title: '测试分享转发给朋友', // 商品名
		      desc: '测试分享转发给朋友', // 描述
		      link: 'http://www.qq.com', // 商品购买地址
		      imgUrl: 'http://stati_1444646.jpg', // 分享的图标
		      fail: function (res) {
		        alert(JSON.stringify(res));
		      }
		    });
});

获取“分享给朋友”按钮点击状态及自定义分享内容接口截图示意

图1显示为J选择分享给朋友。

图2则是选择分享到朋友打印的信息

图3显示点击后是分享到指定朋友的一个操作

图4显示为分享到朋友完成后的一个信息

微信JSSDK分享到 “朋友圈”转发给“朋友”例子就这些。JSSDK接口相对于来说难度较小。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

定时任务调度与管理平台JobCenter | crontab替代者

没有JobCenter时我们要面对的: 电商业务链条很长,业务逻辑也较为复杂,需要成百上千种定时任务。窝窝的大多数定时任务其实调用的是本地或远端 Java/PH...

1K11
来自专栏微信小开发

说说微信小程序那些遇到的坑,看看你有没有进坑,跳坑指南!小白快来看看吧

什么是小程序 小程序是微信推出的一种新的公众号的形态 不需要下载安装即可在微信中使用的应用 小程序、订阅号、服务号、企业号是并行的体系 ? 微信小程序在微信开发...

3767
来自专栏jojo的技术小屋

原 荐 如何扒视频

8895
来自专栏技术换美食换不换

picu后端架构总结

首先我们项目的定位是一个图片,音频为主体的分享应用,于是服务器对于大资源的存储有了常规数据库,nginx静态资源存储和对象存储服务的选型问题.常规数据库(如my...

1282
来自专栏JackieZheng

文件预览——一路躺过来的那些坑

因为最近项目比较紧,所以dubbo源码系列是顾不上了。 恰巧这周花了几天在做文件预览这块,两三天的时间下来,有过一些走弯路的经验教训(准确说,全都是弯路),在这...

8176
来自专栏Coding01

使用 PubSubHubbub 制作 RSS 定时器 —— Laravel RSS (三)

由于我们使用 xpath 方式去抓取网站的内容,这些网站更新了内容,但它们不会实时告诉你它们更新了;所以「RSS 阅读器如何做到所谓的的「更新」呢?」

1432
来自专栏Jacklin攻城狮

iOS权限完整解决

4255
来自专栏二次元

正式开启全站HTTPS加密之旅

2、微语不见了 当初emlog弄上微语的时候我就感觉那是多此一举了,弄的很粗糙,但等到大家都熟悉了之后,又去掉了,未免有点。。。 其实这也能用第三方插件...

1280
来自专栏技术之路

Eclipse智能提示

想利用业余时间学习一下java 装好sdk和Eclipse 后写个小程序 发现它的智能提示真不敢恭维 要按  alt+/  才能出来 但是感觉一个好不ide不能...

2579
来自专栏FreeBuf

反击“猫眼电影”网站的反爬虫策略

0x01 前言 前两天在百家号上看到一篇名为《反击爬虫,前端工程师的脑洞可以有多大?》的文章,文章从多方面结合实际情况列举了包括猫眼电影、美团、去哪儿等大型电商...

7395

扫码关注云+社区

领取腾讯云代金券