WeChat 공개 계정 개발을 위한 WeChat JSSDK
- 高洛峰원래의
- 2017-02-22 15:58:462369검색
개요
WeChat JS-SDK는 WeChat 공개 플랫폼에서 웹 개발자를 위해 제공하는 WeChat 기반의 웹 개발 툴킷입니다.
WeChat JS-SDK를 사용하면 웹 개발자는 WeChat을 사용하여 사진 촬영, 사진 선택, 음성 선택, 위치 등 휴대폰 시스템의 기능을 효율적으로 사용하는 동시에 WeChat을 직접 사용할 수 있습니다. 공유, 스캔, 쿠폰 등. 결제와 같은 WeChat의 고유한 기능은 WeChat 사용자에게 더 나은 웹 경험을 제공합니다.
이 문서는 웹 개발자를 대상으로 WeChat JS-SDK 사용 방법 및 관련 주의사항을 소개하기 위해 작성되었습니다.
JSSDK 사용 단계
1단계: 도메인 이름 바인딩
먼저 WeChat 공개 플랫폼에 로그인하고 "공식 계정 설정"의 "기능 설정"에 들어가 "JS 인터페이스 보안 도메인 이름"을 입력합니다.
참고: 로그인 후 "개발자 센터"에서 해당 인터페이스 권한을 확인할 수 있습니다.
2단계: JS 파일 도입
JS 인터페이스를 호출해야 하는 페이지에 다음 JS 파일을 도입합니다. (https 지원) : http://www.php.cn/
비고: AMD/CMD 표준 모듈 로딩 방법을 사용한 로딩 지원
3단계: config 인터페이스를 통해 권한 확인 구성 삽입
JS-SDK를 사용해야 하는 모든 페이지는 먼저 구성 정보를 삽입해야 합니다. 그렇지 않으면 호출되지 않습니다. (동일한 URL은 한 번만 호출하면 되며 SPA 웹 앱은 변경됩니다. URL이 변경될 때마다 URL이 호출될 수 있습니다. 현재 Android WeChat 클라이언트는 pushState의 새로운 H5 기능을 지원하지 않으므로 pushState를 사용하여 웹 앱 페이지를 구현하면 이 문제가 해결됩니다. 안드로이드 6.2에서).
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
4단계: 준비된 인터페이스를 통해 성공적인 확인 처리
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
5단계: 오류 인터페이스를 통해 실패한 검증 처리
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
인터페이스 호출 지침
모든 인터페이스는 wx 객체를 전달합니다(또한 jWeixin 객체를 사용하여 호출할 수 있습니다. 매개변수는 각 인터페이스 자체에서 전달해야 하는 매개변수 외에도 다음과 같은 일반 매개변수도 있습니다.
-
success: 인터페이스 호출 성공 시 실행되는 콜백 함수입니다. fail: 인터페이스 호출이 실패했을 때 실행되는 콜백 함수입니다.
완료: 성공, 실패에 관계없이 인터페이스 호출이 완료되면 실행되는 콜백 함수입니다.
cancel: 사용자가 취소를 클릭할 때의 콜백 함수는 사용자가 작업을 취소하는 경우에만 사용됩니다.
trigger: 메뉴의 버튼을 클릭했을 때 실행되는 메서드입니다. 이 메서드는 메뉴의 관련 인터페이스만 지원합니다.
- 참고: 현재 클라이언트 공유 작업은 동기 작업이므로 트리거에서 ajax 비동기 요청을 사용하여 이 공유의 내용을 수정하지 마십시오. ajax 반환 패키지를 사용하십시오. 아직 반환되지 않았습니다.
사용자가 취소한 경우: "xxx: cancel" , 여기서 xxx는 호출된 인터페이스의 이름입니다.
호출이 실패할 경우 해당 값은 특정 오류 메시지입니다.
/// <summary> /// 微信参数准备 /// </summary> private void WxSdkPramas(bool isShare) { var jsSdk = new JSSDKHelper(); //获取时间戳 var timestamp = JSSDKHelper.GetTimestamp(); //获取随机码 var nonceStr = JSSDKHelper.GetNoncestr(); var appId = WeiXinAppId; var appSecret = WeiXinAppSecret; //获取票证 var jsTicket = JsApiTicketContainer.TryGetTicket(appId, appSecret); //获取签名 var signature = jsSdk.GetSignature(jsTicket, nonceStr, timestamp, Request.Url.AbsoluteUri); ViewData["AppId"] = appId; ViewData["Timestamp"] = timestamp; ViewData["NonceStr"] = nonceStr; ViewData["Signature"] = signature; } 아래는 js 관련 코드입니다:
<head>
<meta name="viewport" content="width=device-width" />
<title>公众号JSSDK演示</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '@ViewData["AppId"]', // 必填，公众号的唯一标识
timestamp: '@ViewData["Timestamp"]', // 必填，生成签名的时间戳
nonceStr: '@ViewData["NonceStr"]', // 必填，生成签名的随机串
signature: '@ViewData["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'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
});
wx.error(function (res) {
console.log(res);
alert('验证失败');
});
wx.ready(function () {
var url = 'http://weixin.senparc.com';
var link = url + '@(Request.Url.PathAndQuery)';
var imgUrl = url + '/images/v2/ewm_01.png';
//转发到朋友圈
wx.onMenuShareTimeline({
title: 'JSSDK朋友圈转发测试',
link: link,
imgUrl: imgUrl,
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
//转发给朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈转发测试',
desc: '转发给朋友',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
alert('转发成功！');
},
cancel: function () {
alert('转发失败！');
}
});
});
</script>
</head>- 위에 사용된 Helper:
public class JSSDKHelper { public JSSDKHelper() { Parameters = new Hashtable(); } protected Hashtable Parameters; /// <summary> /// 设置参数值 /// </summary> /// <param name="parameter"></param> /// <param name="parameterValue"></param> private void SetParameter(string parameter, string parameterValue) { if (!string.IsNullOrEmpty(parameter)) { if (Parameters.Contains(parameter)) { Parameters.Remove(parameter); } Parameters.Add(parameter, parameterValue); } } private void ClearParameter() { Parameters.Clear(); } /// <summary> /// 获取随机字符串 /// </summary> /// <returns></returns> public static string GetNoncestr() { Random random = new Random(); return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK"); } /// <summary> /// 获取时间戳 /// </summary> /// <returns></returns> public static string GetTimestamp() { TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0); return Convert.ToInt64(ts.TotalSeconds).ToString(); } /// <summary> /// sha1加密 /// </summary> /// <returns></returns> private string CreateSha1() { StringBuilder sb = new StringBuilder(); ArrayList akeys = new ArrayList(Parameters.Keys); akeys.Sort(); foreach (string k in akeys) { string v = (string)Parameters[k]; if (sb.Length == 0) { sb.Append(k + "=" + v); } else { sb.Append("&" + k + "=" + v); } } return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower(); } /// <summary> /// 生成cardSign的加密方法 /// </summary> /// <returns></returns> private string CreateCardSha1() { StringBuilder sb = new StringBuilder(); ArrayList akeys = new ArrayList(Parameters.Keys); akeys.Sort(); foreach (string k in akeys) { string v = (string)Parameters[k]; sb.Append(v); } return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower(); } /// <summary> /// 获取JS-SDK权限验证的签名Signature /// </summary> /// <param name="ticket"></param> /// <param name="noncestr"></param> /// <param name="timestamp"></param> /// <param name="url"></param> /// <returns></returns> public string GetSignature(string ticket, string noncestr, string timestamp, string url) { //清空Parameters ClearParameter(); SetParameter("jsapi_ticket", ticket); SetParameter("noncestr", noncestr); SetParameter("timestamp", timestamp); SetParameter("url", url); return CreateSha1(); } /// <summary> /// 获取位置签名AddrSign /// </summary> /// <param name="appId"></param> /// <param name="appSecret"></param> /// <param name="noncestr"></param> /// <param name="timestamp"></param> /// <param name="url"></param> /// <returns></returns> public string GetAddrSign(string appId, string appSecret, string noncestr, string timestamp, string url) { //清空Parameters ClearParameter(); var accessToken = AccessTokenContainer.TryGetToken(appId, appSecret); SetParameter("appId", appId); SetParameter("noncestr", noncestr); SetParameter("timestamp", timestamp); SetParameter("url", url); SetParameter("accesstoken", accessToken); return CreateSha1(); } /// <summary> /// 获取卡券签名CardSign /// </summary> /// <param name="appId"></param> /// <param name="appSecret"></param> /// <param name="locationId"></param> /// <param name="noncestr"></param> /// <param name="timestamp"></param> /// <param name="cardId"></param> /// <param name="cardType"></param> /// <returns></returns> public string GetCardSign(string appId, string appSecret, string locationId, string noncestr, string timestamp, string cardId, string cardType) { //清空Parameters ClearParameter(); SetParameter("appId", appId); SetParameter("appsecret", appSecret); SetParameter("location_id", locationId); SetParameter("nonce_str", noncestr); SetParameter("times_tamp", timestamp); SetParameter("card_id", cardId); SetParameter("card_type", cardType); return CreateCardSha1(); } } WeChat 공용 계정 개발을 위한 WeChat JSSDK와 관련된 더 많은 기사를 보려면 주목해 주세요. PHP 중국어 웹사이트로!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.