微信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接口相對於來講難度較小。