C#开发微信门户及应用使用微信JSSDK实现签到功能的介绍

本文讲述C#开发微信门户及应用使用微信JSSDK实现签到功能的介绍

随着微信开逐步开放更多JSSDK的接口，我们可以利用自定义网页的方式来调用更多微信的接口，实现我们更加丰富的界面功能和效果，例如我们可以在页面中调用各种手机的硬件来获取信息，如摄像头拍照，GPS信息、扫描二维码等等，本篇介绍如何利用这些JSSDK接口实现签到的功能，其中签到需要报送地理坐标和地址，调用摄像头实时拍照，以及获取当前用户的相关信息等等。

1、JSSDK的说明

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

目前JSSDK支持的接口分类包括下面几类：基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付，随着微信功能的全部整合，估计更多的接口会陆续开放出来。

在微信的后台进入【开发者文档】模块，我们可以看到对应的JSSDK的功能分类和介绍，如下所示。

C#开发微信门户及应用使用微信JSSDK实现签到功能的介绍

从右侧我们可以详细看到各个接口的使用说明，基本上JSSDK的使用方法都类似，因此调试通过并掌握其中一两个，其他的也就依葫芦画瓢，照着做就可以了。

1）JSSDK使用步骤

步骤一：绑定域名

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

C#开发微信门户及应用使用微信JSSDK实现签到功能的介绍

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

步骤二：引入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 标准模块加载方法加载

当然，我们一般编辑页面，为了方便实现更多的效果，可能还会引入其他JS，如JQuery的类库等等。还有，我们还可以基于WeUI的jquery-weui类库，实现更加丰富的功能，如下是我们案例代码里面的JS引用。

    <script src=~/Content/wechat/jquery-weui/lib/jquery-2.1.4.js></script>
    <script src=~/Content/wechat/jquery-weui/js/jquery-weui.js></script>
    <script type=text/javascript src=http://res.wx.qq.com/open/js/jweixin-1.1.0.js></script>

步骤三：通过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

});

以上的配置就是JSSDK的核心所在，里面需要配置好对应的appid，还有timestamp，nonceStr这些都没有特别之处，最值得注意的是signature的实现机制，这样我们在后台生成好对应的值，赋给JS页面就可以了，这样也是最为安全的做法。

如下代码是我们实际项目里面，在Asp.net的视图页面里面的HTML代码，如下所示。

<script language=javascript>
    var appid = '@ViewBag.appid';
    var noncestr = '@ViewBag.noncestr';
    var signature = '@ViewBag.signature';
    var timestamp = '@ViewBag.timestamp';

        wx.config({
            debug: false,
            appId: appid, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: [
               'checkJsApi',
               'onMenuShareTimeline',
               'onMenuShareAppMessage',
               'onMenuShareQQ',
               'onMenuShareWeibo',
               'onMenuShareQZone',
               'hideMenuItems',
               'showMenuItems',
               'hideAllNonBaseMenuItem',
               'showAllNonBaseMenuItem',
               'translateVoice',
               'startRecord',
               'stopRecord',
               'onVoiceRecordEnd',
               'playVoice',
               'onVoicePlayEnd',
               'pauseVoice',
               'stopVoice',
               'uploadVoice',
               'downloadVoice',
               'chooseImage',
               'previewImage',
               'uploadImage',
               'downloadImage',
               'getNetworkType',
               'openLocation',
               'getLocation',
               'hideOptionMenu',
               'showOptionMenu',
               'closeWindow',
               'scanQRCode',
               'chooseWXPay',
               'openProductSpecificView',
               'addCard',
               'chooseCard',
               'openCard'
            ]
        });

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

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

这个ready的接口，也就是在页面顺利加载完毕后的处理内容了，一般我们需要做很多操作，都是需要在页面加载完毕后才能调用相关的对象进行赋值、处理等操作。

例如我们在页面ready后，获取对应的GPS坐标等操作，可以用下面的JS代码实现。

wx.ready(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; // 位置精度
                    $(#lblLoacation).text(latitude + , + longitude);
                }
            });
        });

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

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

这个error接口也就是用来处理异常信息的，一般情况下可以在这里提示用户出现的错误。

2）、签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2.签名用的url必须是调用JS接口页面的完整URL。

3.出于安全考虑，开发者必须在服务器端实现签名的逻辑。

如出现invalid signature 等错误详见附录5常见错误及解决办法。

微信开发

C#开发微信门户及应用使用微信JSSDK实现签到功能的介绍

相关文章