微信JS-SDK开发指南

一、引入微信JS-SDK

在使用微信JS-SDK之前，首先需要在你的公众号后台开启JS-SDK，并获得一个appId和appSecret。然后，我们需要引入微信JS-SDK的JavaScript文件。这可以通过以下代码实现：

    
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    

可以看到，我们只需从微信提供的url中引入jweixin-1.6.0.js文件即可。

接下来，你需要使用你的appId和appSecret通过微信官方文档提供的接口获取一个access_token。这个access_token是通过微信服务器进行审核和授权的。

    
    // 获取access_token
    $.get("https://api.weixin.qq.com/cgi-bin/token", {
        grant_type: 'client_credential',
        appid: 'your_appid',
        secret: 'your_secret'
    }, function (data) {
        var access_token = data.access_token;
    });
    

注意，这里使用了jQuery的AJAX方法，但是也可以使用原生的JavaScript实现。

二、配置微信JS-SDK参数

在获取到access_token之后，我们需要进行一些配置才能正式地开始使用微信JS-SDK。具体的配置如下：

    
    // 配置微信JS-SDK参数
    wx.config({
        debug: true,
        appId: 'your_appid',
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.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'
        ]
    });
    

其中，需要注意的是appId、timestamp、nonceStr和signature这几个参数。这几个参数是通过接口返回的JSON数据中获取的，而且这些数据每隔一段时间都会发生变化。

另外，jsApiList参数是微信JS-SDK支持的所有API，是在页面加载后必须立刻声明的。该声明必须在wx.ready()调用之前进行，而wx.ready()是在wx.config()之后进行的。

三、使用微信JS-SDK API

当我们完成以上两个步骤之后，就可以进行微信JS-SDK的API调用了。以下是几个常见的API调用示例：

1. 获取当前位置

需要用户授权才能获取当前位置，具体实现代码如下：

    
    // 获取当前位置
    wx.getLocation({
        success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        }
    });
    

2. 分享到朋友圈

可以自定义分享的标题、链接和图片。实现代码如下：

    
    //分享到朋友圈
    wx.onMenuShareTimeline({
        title: '分享标题',
        link: 'http://example.com',
        imgUrl: 'http://example.com/icon.png',
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    

3. 微信支付

可以实现用户在微信内使用微信支付的操作。具体实现代码如下：

    
    // 微信支付
    wx.chooseWXPay({
        appId: '',
        timestamp: 0,
        nonceStr: '',
        package: '',
        signType: 'MD5',
        paySign: '',
        success: function (res) {
            // 支付成功后的回调函数
        }
    });
    

四、结语

到此，我们简单介绍了微信JS-SDK的基本应用。如有更多需要，可以参考微信官方文档，了解更多微信JS-SDK的API。