微信jssdk

1.申请微信公众平台测试号

https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

2.提供URL能正确响应微信发送的Token验证

        public ActionResult Index(string signature, string timestamp, string nonce, string echostr)
        {
            LogHelper.WCInfo("验证开发者服务器");
            LogHelper.WCInfo(string.Format("signature:{0},timestamp:{1},nonce:{2},echostr:{3}", signature, timestamp, nonce, echostr));
            var token = CachedConfigContext.Current.WeixinConfig.Token;
            if (string.IsNullOrEmpty(token)) return Content("请先设置Token!");
            var ent = "";
            if (!BasicAPI.CheckSignature(signature, timestamp, nonce, token, out ent))
            {
                return Content("参数错误!");
            }
            LogHelper.WCInfo("验证通过");
            return Content(echostr); //返回随机字符串则表示验证通过
        }
controller
        public static bool CheckSignature(string signature, string timestamp, string nonce, string token, out string ent)
        {
            var arr = new[] { token, timestamp, nonce }.OrderBy(z => z).ToArray();
            var arrString = string.Join("", arr);
            var sha1 = System.Security.Cryptography.SHA1.Create();
            var sha1Arr = sha1.ComputeHash(Encoding.UTF8.GetBytes(arrString));
            StringBuilder enText = new StringBuilder();
            foreach (var b in sha1Arr)
            {
                enText.AppendFormat("{0:x2}", b);
            }
            ent = enText.ToString();
            return signature == enText.ToString();
        }
CheckSignature

3.修改JS接口安全域名

参考域名:ceshi303.ttyouni.net

官方参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

4.引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

5.通过config接口注入权限验证配置

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: '', // 必填,公众号的唯一标识

    timestamp: , // 必填,生成签名的时间戳

    nonceStr: '', // 必填,生成签名的随机串

    signature: '',// 必填,签名,见附录1

    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});
View Code
        public static string Sha1(string orgStr, string encode = "UTF-8")
        {
            var sha1 = new SHA1Managed();
            var sha1bytes = System.Text.Encoding.GetEncoding(encode).GetBytes(orgStr);
            byte[] resultHash = sha1.ComputeHash(sha1bytes);
            string sha1String = BitConverter.ToString(resultHash).ToLower();
            sha1String = sha1String.Replace("-", "");
            return sha1String;
        }
sha1加密

6.在需要调用JS接口的页面引入如下JS库文件

var wxJs = {
    Init: function (param) {
        wx.config({
            debug: param.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: param.appId, // 必填,公众号的唯一标识
            timestamp: param.timestamp, // 必填,生成签名的时间戳
            nonceStr: param.nonceStr, // 必填,生成签名的随机串
            signature: param.signature, // 必填,签名,见附录1
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo",
                "startRecord",
                "stopRecord",
                "onVoiceRecordEnd",
                "playVoice",
                "pauseVoice",
                "stopVoice",
                "onVoicePlayEnd",
                "uploadVoice",
                "downloadVoice",
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage",
                "translateVoice",
                "getNetworkType",
                "openLocation",
                "getLocation",
                "hideOptionMenu",
                "showOptionMenu",
                "hideMenuItems",
                "showMenuItems",
                "hideAllNonBaseMenuItem",
                "showAllNonBaseMenuItem",
                "closeWindow",
                "scanQRCode",
                "chooseWXPay",
                "openProductSpecificView",
                "addCard",
                "chooseCard",
                "openCard"
            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
    },
    Ready: function (callback) {
        wx.ready(function () {
            callback();
        });
    },
    onMenuShareTimeline: function (callback) {
        wx.onMenuShareTimeline({
            title: callback.title, // 分享标题
            link: callback.link, // 分享链接
            imgUrl: callback.imgUrl, // 分享图标
            success: function () {
                callback.ok();
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                callback.cancel();
                // 用户取消分享后执行的回调函数
            }
        });
    },
    onMenuShareAppMessage: function (callback) {
        wx.onMenuShareAppMessage({
            title: callback.title, // 分享标题
            link: callback.link, // 分享链接
            imgUrl: callback.imgUrl, // 分享图标
            desc: callback.desc, // 分享描述
            success: function () {
                callback.ok();
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                callback.cancel();
                // 用户取消分享后执行的回调函数
            }
        });
    },
    closeWindow: function () {
        wx.closeWindow();
    },
    showmenu: function () {
        wx.showOptionMenu();
    }

};
wxjs.js

7.调用wxjs.js库中函数

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="~/Content/Scripts/weixin/wxjs.js"></script>
<script type="text/javascript">
    $(function () {

        wxJs.Init({ debug: false, appId: '@ViewBag.JSSDK.appId', timestamp: '@ViewBag.JSSDK.timestamp', nonceStr: '@ViewBag.JSSDK.nonceStr', signature: '@ViewBag.JSSDK.signature' });
        wxJs.Ready(function () {
            var title = "@ViewBag.JSSDK.title"; // 分享标题
            var link = '@Server.UrlDecode(ViewBag.JSSDK.shareUrl)'; // 分享链接
            var imgUrl = '@ViewBag.JSSDK.shareImg'; // 分享图标
            var desc = "@ViewBag.JSSDK.desc"; // 分享描述
            wxJs.showmenu();
            //朋友圈
            wxJs.onMenuShareAppMessage({ title: title, link: link, imgUrl: imgUrl, desc: desc, ok: function () {
                //分享成功后,增加分享记录
                jsprint("分享成功", "", "success");

            }, cancel: function () {
                jsprint("分享取消", "", "error");
  
            }
            });
            //转发给朋友的
            wxJs.onMenuShareTimeline({ title: title, link: link, imgUrl: imgUrl, ok: function () {
               
                jsprint("分享成功", "", "success");

            }, cancel: function () {

                jsprint("分享取消", "", "error");
            }
            });
        })
    })
</script>
View Code

 

 

  

posted @ 2017-07-21 11:06  连先森  阅读(226)  评论(0编辑  收藏  举报