失眠网 > 前端微信公众号开发总结(开发篇)

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

时间：2024-01-31 17:50:26

相关推荐

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

前言（继续废话篇）

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

微信开发总结开始

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

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

b: 在需要调用JS接口的页面引入如下JS文件，（支持https）：

http://res./open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：

http://res2./open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

C:微信UI框架推荐使用微信自带的weui库，可根据项目要求自定义UI库。

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

具体方式参考链接：https://developers./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./cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注：

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

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

（3）出于安全考虑，开发者必须在服务器端实现签名的逻辑（不考虑安全前端签名算法也可）

具体参考链接：https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html#54

（c）上面说的如果看懵了下面我就直接上点代码干货，嘿嘿嘿！

//先获取access_token$.get('https://api./cgi-bin/token', {grant_type:'client_credential',appid:'你的appid',secret:'你的secret'}, function (access_token) {//得到access_token过后就需要获取jsapi_tickethttps://api./cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi$.get('https://api./cgi-bin/ticket/getticket', {access_token:access_token,//传入上面得到的access_tokentype:'jsapi'//固定写法}, function (jsapi_ticket) {//得到access_token过后就需要获取jsapi_ticketvar 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, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片}});

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