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

我的小程序。能够扫描体验哦。点击广告此博文代码免费赠予

 

本博文实现了自定义分享朋友圈、转发朋友、获取网络状态、地理位置、扫一扫等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'
			      	]
				  });
			}
		});
});

页面获取网络状态、地理位置按钮代码

<input type="button" id="network" value="获取网络状态" class="button button-khaki"/>
<br/>
<input type="button" id="location" value="获取地理位置" class="button button-khaki"/>
<br/>
<input type="button" id="scan" value="微信扫一扫" class="button button-khaki"/>

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

//分享到朋友圈
wx.onMenuShareTimeline({
	title : '自定义内容分享朋友圈', // 分享的标题
	link : 'http://xs.kundadahh.club/', // 分享的地址 必须是公众号配置的JS域名 不然不会显示自定义内容
	desc : '自定义内容分享朋友圈', // 描述
	imgUrl : 'http://xs.kundadahh.club/timg.jpg', // 分享的图标 必须是公众号配置的JS域名 不然不会显示自定义内容
	fail : function(res) {
		alert(JSON.stringify(res));
	}
});

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

 

 

 

图1显示为JSSDK接入成功。能够查看个人另外一篇博文https://my.oschina.net/xshuai/blog/726459。

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

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

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

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

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

// 分享给朋友
wx.onMenuShareAppMessage({
	title : '自定义内容转发给朋友', // 分享的标题
	desc : '自定义内容转发给朋友', // 描述
	link : 'http://xs.kundadahh.club/', // 分享的地址 必须是公众号配置的JS域名 不然不会显示自定义内容
	imgUrl : 'http://xs.kundadahh.club/timg.jpg', // 分享的图标 必须是公众号配置的JS域名 不然不会显示自定义内容
	fail : function(res) {
		alert(JSON.stringify(res));
	}
});
});

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

 

 

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

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

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

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

设备信息接口定义

//在这里写微信获取设备状态的接口
$("#network").bind("click",function(){
wx.getNetworkType({
	success : function(res) {
		alert('您的网络状态为:'+res.networkType);// 返回网络类型2g，3g，4g，wifi
	}
});
});

接口截图示意

 

地理位置接口定义

//在这里写微信获取地理位置的接口
 $("#location").bind("click",function(){
		wx.getLocation({
		type : 'wgs84', // 默认为wgs84的gps坐标，若是要返回直接给openLocation用的火星坐标，可传入'gcj02'
		success : function(res) {
			var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
			var speed = res.speed; // 速度，以米/每秒计
			var accuracy = res.accuracy; // 位置精度
		}
	});
});

接口截图示意

微信扫一扫接口定义

//在这里写微信扫一扫的接口
 $("#scan").bind("click",function(){
	wx.scanQRCode({
		needResult :1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		scanType : [ "qrCode", "barCode" ], // 能够指定扫二维码仍是一维码，默认两者都有
		success : function(res) {
			alert('扫描的内容为:'+res.resultStr);// 当needResult 为 1 时，扫码返回的结果
		}
	});
});

接口截图示意

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