微信公众号开发之微信JSSDK -微信开发-PHP中文网

首页

微信小程序

微信开发

微信公众号开发之微信JSSDK

高洛峰

Feb 22, 2017 pm 03:58 PM

微信公众号

概述

　　微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

　　通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

　　此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

JSSDK使用步骤

　　步骤一：绑定域名

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

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

步骤二：引入JS文件

　　在需要调用JS接口的页面引入如下JS文件，（支持https）：http://www.php.cn/

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

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

　　所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

步骤四：通过ready接口处理成功验证

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：通过error接口处理失败验证

wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

接口调用说明

　　所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

　　备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

　　以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："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: &#39;@ViewData["AppId"]&#39;, // 必填，公众号的唯一标识
            timestamp: &#39;@ViewData["Timestamp"]&#39;, // 必填，生成签名的时间戳
            nonceStr: &#39;@ViewData["NonceStr"]&#39;, // 必填，生成签名的随机串
            signature: &#39;@ViewData["Signature"]&#39;,// 必填，签名
            jsApiList: [
                  "checkJsApi",
                    &#39;onMenuShareTimeline&#39;,
                    &#39;onMenuShareAppMessage&#39;,
                    &#39;onMenuShareQQ&#39;,
                    &#39;onMenuShareWeibo&#39;,
                    &#39;hideMenuItems&#39;,
                    &#39;showMenuItems&#39;,
                    &#39;hideAllNonBaseMenuItem&#39;,
                    &#39;showAllNonBaseMenuItem&#39;,
                    &#39;translateVoice&#39;,
                    &#39;startRecord&#39;,
                    &#39;stopRecord&#39;,
                    &#39;onRecordEnd&#39;,
                    &#39;playVoice&#39;,
                    &#39;pauseVoice&#39;,
                    &#39;stopVoice&#39;,
                    &#39;uploadVoice&#39;,
                    &#39;downloadVoice&#39;,
                    &#39;chooseImage&#39;,
                    &#39;previewImage&#39;,
                    &#39;uploadImage&#39;,
                    &#39;downloadImage&#39;,
                    &#39;getNetworkType&#39;,
                    &#39;openLocation&#39;,
                    &#39;getLocation&#39;,
                    &#39;hideOptionMenu&#39;,
                    &#39;showOptionMenu&#39;,
                    &#39;closeWindow&#39;,
                    &#39;scanQRCode&#39;,
                    &#39;chooseWXPay&#39;,
                    &#39;openProductSpecificView&#39;,
                    &#39;addCard&#39;,
                    &#39;chooseCard&#39;,
                    &#39;openCard&#39;
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。详见：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
        });
        wx.error(function (res) {
            console.log(res);
            alert(&#39;验证失败&#39;);
        });
        wx.ready(function () {
            var url = &#39;http://weixin.senparc.com&#39;;
            var link = url + &#39;@(Request.Url.PathAndQuery)&#39;;
            var imgUrl = url + &#39;/images/v2/ewm_01.png&#39;;
            //转发到朋友圈
            wx.onMenuShareTimeline({
                title: &#39;JSSDK朋友圈转发测试&#39;,
                link: link,
                imgUrl: imgUrl,
                success: function () {
                    alert(&#39;转发成功！&#39;);
                },
                cancel: function () {
                    alert(&#39;转发失败！&#39;);
                }
            });
            //转发给朋友
            wx.onMenuShareAppMessage({
                title: &#39;JSSDK朋友圈转发测试&#39;,
                desc: &#39;转发给朋友&#39;,
                link: link,
                imgUrl: imgUrl,
                type: &#39;link&#39;,
                dataUrl: &#39;&#39;,
                success: function () {
                    alert(&#39;转发成功！&#39;);
                },
                cancel: function () {
                    alert(&#39;转发失败！&#39;);
                }
            });
        });
    </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();
        }
    }

更多微信公众号开发之微信JSSDK 相关文章请关注PHP中文网！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn