微信分享內容給朋友、朋友圈、QQ、QQ空間等

阿新 • • 發佈：2019-01-19

示例網頁

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="author" content="ershuai" />
<meta name="Copyright" content="ershuai" />


<title>二帥</title>


<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="../scripts/common/wx_share/wechat_common_share.js"></script>
</head>
<body>
	init share
</body>
<script type="text/javascript">
	$(document).ready(function() {
		var initUrl = window.location.href;
		var shareLogo = "http://img3.imgtn.bdimg.com/it/u=224917259,3388622236&fm=21&gp=0.jpg";
		var lineLink = "https://www.baidu.com";
		var shareContent = "分享的內容描述";
		var shareTitle = "分享的標題描述";
		initShare(initUrl, lineLink, shareTitle, shareContent, shareLogo);
	});
</script>
</html>

wechat_common.share.js

var init_share_url = "http://[host]/wechat/initWechatConfig.xhtml";


/**
 * 初始化分享
 * @param initUrl			當前初始化網頁地址
 * @param lineLink			點選後跳轉地址
 * @param shareTitle		分享標題
 * @param shareContent		分享內容
 * @param shareLogo			分享logo
 */
function initShare(initUrl, lineLink, shareTitle, shareContent, shareLogo) {
	$.ajax({
		type : "post",
		url : init_share_url,
		data : {
			"initUrl" : initUrl,
			"initType" : "jsapi"
		},
		dataType : "json",
		error : function(request) {
			alert('初始化分享失敗，請稍後重試');
		},
		success : function(ajaxRes) {
			var state = ajaxRes.state;
			if (state == 1) {
				var data = ajaxRes.data;
				//初始化微信配置
				wxShareConfig(data.appId, data.timestamp, data.nonceStr, data.signature);
				//分享準備
				wxShareReady(lineLink, shareTitle, shareContent, shareLogo);
			} else {
				alert(ajaxRes.msg);
			}
		}
	});
};


/**
 * 初始化微信分享配置
 * @param appId
 * @param timestamp
 * @param nonceStr
 * @param signature
 */
function wxShareConfig(appId, timestamp, nonceStr, signature) {
	wx.config({
		debug: false,
		appId: appId,
		timestamp: timestamp,
		nonceStr: nonceStr,
		signature: signature,
		jsApiList: [
			'checkJsApi',
			'onMenuShareTimeline',
			'onMenuShareAppMessage',
			'onMenuShareQQ',
			'onMenuShareQZone'
		]
	});
	
	wx.error(function (res) {
		alert(res.errMsg);
	});
}


/**
 * 分享準備
 * @param lineLink
 * @param shareTitle
 * @param shareContent
 * @param shareLogo
 */
function wxShareReady(lineLink, shareTitle, shareContent, shareLogo) {
	wx.ready(function () {
		//獲取“分享到朋友圈”
		wx.onMenuShareTimeline({
		    title: shareTitle, // 分享標題
		    link: lineLink, // 分享連結
		    imgUrl: shareLogo, // 分享圖示
		    success: function () { 
		        // 使用者確認分享後執行的回撥函式
		    },
		    cancel: function () { 
		        // 使用者取消分享後執行的回撥函式
		    }
		});
		
		//獲取“分享給朋友”
		wx.onMenuShareAppMessage({
		    title: shareTitle, // 分享標題
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享連結
		    imgUrl: shareLogo, // 分享圖示
		    type: 'link', // 分享型別,music、video或link，不填預設為link
		    dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
		    success: function () { 
		        // 使用者確認分享後執行的回撥函式
		    	//alert('已分享');
		    	//window.location.href = "https://www.baidu.com";
		    },
		    cancel: function () { 
		        // 使用者取消分享後執行的回撥函式
		    	//alert('已取消');
		    }
		});
		
		//獲取“分享到QQ”
		wx.onMenuShareQQ({
		    title: shareTitle, // 分享標題
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享連結
		    imgUrl: shareLogo, // 分享圖示
		    success: function () { 
		       // 使用者確認分享後執行的回撥函式
		    },
		    cancel: function () { 
		       // 使用者取消分享後執行的回撥函式
		    }
		});
		
		//獲取“分享到QQ空間”
		wx.onMenuShareQZone({
		    title: shareTitle, // 分享標題
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享連結
		    imgUrl: shareLogo, // 分享圖示
		    success: function () { 
		       // 使用者確認分享後執行的回撥函式
		    },
		    cancel: function () { 
		       // 使用者取消分享後執行的回撥函式
		    }
		});
		
		//獲取“分享到騰訊微博”
		wx.onMenuShareWeibo({
		    title: shareTitle, // 分享標題
		    desc: shareContent, // 分享描述
		    link: lineLink, // 分享連結
		    imgUrl: shareLogo, // 分享圖示
		    success: function () { 
		       // 使用者確認分享後執行的回撥函式
		    },
		    cancel: function () { 
		        // 使用者取消分享後執行的回撥函式
		    }
		});
	});
}

到這裡，前端就完事了

現在實現，init_share_url方法

var init_share_url = "http://[host]/wechat/initWechatConfig.xhtml";

initWechatConfig方法內容：

（因為我這個有多個服務號要維護，是根據rawId來判斷的；一般情況是不用rawId引數的）

@RequestMapping("/initWechatConfig.xhtml")
	public void initWechatConfig(HttpServletRequest request, HttpServletResponse response) throws Exception {
		try {
			String initUrl = getParams("initUrl");//當前網頁地址
			String initType = getParams("initType");
			if (CommonUtil.isNull(initUrl) || CommonUtil.isNull(initType)) {//判斷null
				throw new BizException(ErrorMsg.PARAMS_NULL);
			}
			String rawId = getParams("rawId");
			if (CommonUtil.isNull(rawId)) {
				rawId = Constants.RawId_broker;
			}
			HashMap<String, Object> respMap = new HashMap<String, Object>();
			if ("jsapi".equals(initType)) {//初始化分享
				String noncestr = RandomUtil.nextInt(initType.toUpperCase(), 100, 999);//隨機數，用uuid什麼的也可以
				String timestamp = DateUtil.getTimestampWx();//時間戳 Long.toString(System.currentTimeMillis() / 1000)
				String signature = null;
				//獲取
				Ticket ticket = this.wechatService.getJsapiTicket(rawId);
				signature = SHA1Util.signForJsapiTicket(ticket.getTicket(), noncestr, timestamp, initUrl);
				respMap.put("appId", Constants.getAppId(rawId));
				respMap.put("timestamp", timestamp);
				respMap.put("nonceStr", noncestr);
				respMap.put("signature", signature);
			} else if ("pay".equals(initType)) {//初始化支付
				
			}
			writeSuccMsg(response, respMap);
		} catch (Exception e) {
			log.error("初始化微信配置 異常：", e);
			writeErrorMsg(response, e.getMessage());
		}
	}

RequestAddr的引數配置

// 獲取access_token的介面地址（GET） API要求每天限制2000 - 全域性access_token
public static final String access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";

// 獲取ticket_url的介面地址（GET） API
public static final String ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
// 獲取ticket_url的引數
public static final String ticket_url_params = "jsapi_ticket=JSAPI_TICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=INIT_URL";

getJsapiTicket方法

public Ticket getJsapiTicket(String rawId) throws Exception {
		//請求全域性access_token
		AccessToken accessToken = getAccessToken(rawId);
		//獲取jsapi_ticket
		Ticket ticket = WeChatUtils.getJsapiTicket(accessToken.getAccess_token());
		return ticket;
	}

/**
	 * 獲取全域性access_token 公共方法
	 * @author ershuai 
	 * @version V1.0 
	 * @param rawId
	 * @return
	 * @throws Exception
	 */
	public AccessToken getAccessToken(String rawId) throws Exception {
		//請求全域性access_token
		AccessToken accessToken = WeChatUtils.getAccessToken(rawId);
		return accessToken;
	}

WeChatUtils類

/**
	 * 憑證access_token的獲取方法	-	全域性access_token
	 * @author ershuai
	 * @version V1.0 
	 * @return
	 * @throws Exception
	 */
	public static AccessToken getAccessToken(String rawId) throws Exception {
		String appId = Constants.getAppId(rawId);
		String appSecret = Constants.getAppSecret(rawId);
		//url
		String access_token_url = RequestAddr.access_token_url;
		//匹配引數
		access_token_url = access_token_url.replace("APPID", appId);
		access_token_url = access_token_url.replace("SECRET", appSecret);
		//匹配引數
		//請求
		String respStr = WebUtils.doGet(access_token_url, null);
		AccessToken accessToken = null;
		if (null != respStr) {
			accessToken = JSON.parseObject(respStr, AccessToken.class);
		}
		return accessToken;
	}

	
	/**
	 * 憑證JsapiTicket的獲取方法
	 * @author ershuai 
	 * @version V1.0 
	 * @param accessToken
	 * @return
	 * @throws Exception
	 */
	public static Ticket getJsapiTicket(String accessToken) throws Exception {
		//url
		String jsapi_ticket_url = RequestAddr.ticket_url.replace("ACCESS_TOKEN", accessToken);
		//匹配引數
		jsapi_ticket_url = jsapi_ticket_url.replace("ACCESS_TOKEN", accessToken);
		//請求
		String respStr = WebUtils.doGet(jsapi_ticket_url, null);
		Ticket ticket = null;
		if (null != respStr) {
			ticket = JSON.parseObject(respStr, Ticket.class);
		}
		return ticket;
	}

SHA1Util類

/**
	 * sign簽名，對於 jsapi_ticket
	 * @author ershuai
	 * @version V1.0
	 * @param jsapiTicket
	 * @param noncestr
	 * @param timestamp
	 * @param initUrl
	 * @return
	 */
	public static String signForJsapiTicket(String jsapiTicket, String noncestr, String timestamp, String initUrl) {
		String signature = null;
		// 注意這裡引數名必須全部小寫，且必須有序
		String signatureStr = RequestAddr.ticket_url_params;
		signatureStr = signatureStr.replace("JSAPI_TICKET", jsapiTicket);
		signatureStr = signatureStr.replace("NONCESTR", noncestr);
		signatureStr = signatureStr.replace("TIMESTAMP", timestamp);
		signatureStr = signatureStr.replace("INIT_URL", initUrl);
		try {
			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
			crypt.reset();
			crypt.update(signatureStr.getBytes("UTF-8"));
			signature = byteToHex(crypt.digest());
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		return signature;
	}

	private static String byteToHex(final byte[] hash) {
		Formatter formatter = new Formatter();
		for (byte b : hash) {
			formatter.format("%02x", b);
		}
		String result = formatter.toString();
		formatter.close();
		return result;
	}

PS：做完以上流程，應該就可以完成分享功能了；出現最多的錯誤應該就是簽名不正確，這個問題檢查幾個微信引數就好了；

config:invalid url domain 錯誤是需要去公眾號設定 - 功能設定 - JS介面安全域名；配置域名

微信分享內容給朋友、朋友圈、QQ、QQ空間等

微信分享內容給朋友、朋友圈、QQ、QQ空間等

自定義微信分享內容

.Net微信網頁開發之使用微信JS-SDK自定義微信分享內容

微信分享到朋友圈、傳送給朋友開發注意事項

關於微信分享朋友圈、分享給朋友、隱藏“傳播類”和“保護類”按鈕

微信分享朋友圈分享程式碼自定義標題、說明、圖示和分享連結

簡單粗暴教你在VUE中引入微信SDK 呼叫微信分享、朋友圈分享、QQ分享......

iOS開發之第三方分享微信分享、朋友圈分享，史上最新最全第三方分享微信方式實現、朋友圈方式實現

微信分享到朋友圈，分享給朋友JS程式碼

微信“分享到朋友圈”介面— wx.onMenuShareTimeline() 和 onMenuShareAppMessage — 分享給朋友介面

微信分享到朋友圈失敗，分享給朋友等正常

原微信分享自定義樣式&微信分享給朋友自定義圖文資訊

iOS9中實現微信分享到好友、朋友圈

Android APP中跳轉至微信，分享圖文給好友或者朋友圈（加跳轉QQ好友或QQ群）

微信分享給朋友及朋友圈JS程式碼

微信公眾平臺網頁開發實戰--1.微信分享一個網頁到朋友圈

h5 微信分享朋友和朋友圈

php實現微信分享朋友圈

iOS 微信分享到朋友圈

Vux+Cordova打包的安卓App實現微信分享朋友和朋友圈

微信分享內容給朋友、朋友圈、QQ、QQ空間等

相關推薦