前端微信公众号开发总结(开发篇)

admin管理员组

文章数量:1794759

前端微信公众号开发总结(开发篇)

前言（继续废话篇）

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

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

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

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

<link rel="stylesheet" href="cdn.bootcss/weui/1.1.3/style/weui.min.css"> <script src="res.wx.qq/open/js/jweixin-1.6.0.js"></script> <script src="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 api.weixin.qq/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET）

具体方式参考链接：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）：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）出于安全考虑，开发者必须在服务器端实现签名的逻辑（不考虑安全前端签名算法也可） 具体参考链接：developers.weixin.qq/doc/offiaccount/OA_Web_Apps/JS-SDK.html#54 （c）上面说的如果看懵了下面我就直接上点代码干货，嘿嘿嘿！

//先获取access_token $.get('api.weixin.qq/cgi-bin/token', { grant_type:'client_credential', appid:'你的appid', secret:'你的secret' }, function (access_token) { //得到access_token过后就需要获取jsapi_ticket api.weixin.qq/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi $.get('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）签名较验工具链接：mp.weixin.qq/debug/cgi-bin/sandbox?t=jsapisign

结尾

暂时性的结尾了。要下班了，，，准备溜了溜了，后面不定时持续性更新完善！！（手动狗头） 微信签名算法已上传！需要的童鞋自行下载。。。

本文标签： 公众