前言（继续废话篇）

万众期待的开发篇新鲜出炉了，这一篇内容会有点长，请各位童鞋耐心观看！！！

微信开发总结开始

一.开发所需准备工作（请仔细阅读微信公众平台开发文档）

a:下载微信开发者工具（此工具也可用于小程序开发）。下载链接：https://developers.weixin.qq/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html#5

b: 在需要调用JS接口的页面引入如下JS文件，（支持https）：
http://res.wx.qq/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：
http://res2.wx.qq/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
C:微信UI框架推荐使用微信自带的weui库，可根据项目要求自定义UI库。

<link rel="stylesheet" href="https://cdn.bootcss/weui/1.1.3/style/weui.min.css">
<script src="http://res.wx.qq/open/js/jweixin-1.6.0.js"></script>
<script src="https://res.wx.qq/open/libs/weuijs/1.2.1/weui.min.js"></script>

二.微信网页开发jssdk使用

1.首先要先获取access_token

access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效

（a）获取access_token方式：公众号和小程序均可以使用AppID和AppSecret调用本接口来获取access_token：获取接口（https请求方式: GET https://api.weixin.qq/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET）

具体方式参考链接：https://developers.weixin.qq/doc/offiaccount/Basic_Information/Get_access_token.html

2.前端微信签名生成及微信签名算法

（a）生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。
(b)用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注：
（1）签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
（2）签名用的url必须是调用JS接口页面的完整URL。
（3）出于安全考虑，开发者必须在服务器端实现签名的逻辑（不考虑安全前端签名算法也可）
具体参考链接：https://developers.weixin.qq/doc/offiaccount/OA_Web_Apps/JS-SDK.html#54
（c）上面说的如果看懵了下面我就直接上点代码干货，嘿嘿嘿！

//先获取access_token
$.get('https://api.weixin.qq/cgi-bin/token', {
    grant_type:'client_credential',
    appid:'你的appid',
    secret:'你的secret'
}, function (access_token) {
    //得到access_token过后就需要获取jsapi_ticket
    https://api.weixin.qq/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
    $.get('https://api.weixin.qq/cgi-bin/ticket/getticket', {
        access_token:access_token,//传入上面得到的access_token
        type:'jsapi'//固定写法
    }, function (jsapi_ticket) {
        //得到access_token过后就需要获取jsapi_ticket
        var ret = sign(jsapi_ticket, location.href);//这里的sign方法是前端的签名算法我会上传。location.href代表当前地址是必传参数
        ret.appId = '你的appid';
        Config(ret);//此方法对应注册wx.config配置，只有注册了之后才能调用微信的自带api方法。
    });
});
function Config(ret) {
    wx.config({
        debug: false,
        appId: ret.appId,
        timestamp: ret.timestamp,
        nonceStr: ret.nonceStr,
        signature: ret.signature,
        jsApiList: [
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'startRecord',
            'stopRecord',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'translateVoice',
            'openLocation',
            'getLocation',
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
    });
}


if (wx) {
    wx.error(function (res) {//此方法是抛出微信错误
        alert(res.errMsg);
    });
}
wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
//例:拍照或从手机相册中选图接口
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
  var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});

（d）签名较验工具链接：https://mp.weixin.qq/debug/cgi-bin/sandbox?t=jsapisign