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

1、JSSDK的说明

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
目前JSSDK支持的接口分类包括下面几类：基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付，随着微信功能的全部整合，估计更多的接口会陆续开放出来。
在微信的后台进入【开发者文档】模块，我们可以看到对应的JSSDK的功能分类和介绍，如下所示。

从右侧我们可以详细看到各个接口的使用说明，基本上JSSDK的使用方法都类似，因此调试通过并掌握其中一两个，其他的也就依葫芦画瓢，照着做就可以了。
1）JSSDK使用步骤
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如下所示，在公众平台进行设置。

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

步骤二：引入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引用。

步骤三：通过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代码，如下所示。

其中的chooseImage()是我们在页面开始的时候，让用户拍照的操作，具体JS代码如下所示。

//拍照显示
var localIds;
function chooseImage() {
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: [\'camera\'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            $(\"#imgUpload\").attr(\"src\", localIds);
        }
    });
}

但用户使用摄像头拍照后，就会返回一个res.localIds集合，因为我们拍照一个，那么可以把它直接赋值给图片对象，让它显示当前拍照的图片。

拍照完成，我们单击【签到】应该把图片和相关的坐标等信息上传到服务器的，图片首先是保存在微信服务器的，上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。

为了实现我们自己的业务数据，我们需要把图片集相关信息存储在自己的服务器，这样才可以实现信息的保存，最后提示【签到操作成功】，具体过程如下所示。

//上传图片
var serverId;
function upload() {
    wx.uploadImage({
        localId: localIds[0],
        success: function (res) {
            serverId = res.serverId;

            //提交数据到服务器

            //提示信息
            $.toast(\"签到操作成功\");
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });
}

另外，我们为了实现单击图片控件，实现重新拍照的操作，以及签到的事件处理，我们对控件的单击处理进行了绑定，如下代码所示。

document.querySelector(\'#imgUpload\').onclick = function () {
    chooseImage();
};

$(document).on(\"click\", \"#btnSignIn\", function () {
    if (localIds == undefined || localIds== null) {
        $.toast(\'请先拍照\', \"forbidden\");
        return;
    }
    //调用上传图片获得媒体ID
    upload();
});

如果对这个《C#开发微信门户及应用》系列感兴趣，可以关注我的其他文章.