微信开发相关:使用微信 JS-SDK 接口
准备工作接口使用流程公众号设置前端向后端请求 ticket后端向微信获取 `token`后端根据 `token` 生成 `ticket`根据 `ticket` 创建签名前端创建配置信息,并注入验证处理验证SDK接口调用说明通过微信 JS-SDK 接口,可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。
微信开发文档
准备工作
首先需要有一个公众号,该公众号是需要能认证的(企业认证)。
然后需要提前看一下开发帮助文档,了解一下基础。
接口使用流程
接口使用流程为:
开发前端向后端请求微信接口调用配置信息开发者后端服务器使用AppID和AppSecret向微信服务器获取token
后端通过token
获取ticket
并创建签名返回签名至前端,根据需要调用的接口功能创建配置信息前端使用微信提供的 js 方法注入配置信息通过接口使用验证后,使用相应的接口实现需要的功能
在使用前,需要在微信工作号里进行一些设置,并获取AppID和AppSecret。通常token
的有效期是7200秒,即2小时,此时间回随token
一起返回。有效期内可以重复使用,即跳过步骤2。
公众号设置
打开微信公众平台,使用管理员登录设置与开发 —> 公众号设置 —> 功能设置 —> JS接口安全域名,下载 txt 文件放置到经过备案的网址目录下并确保能够访问,并添加后端服务访问域名设置与开发 —> 基本配置 —> 公众号开发者信息获取并记录AppID和AppSecret设置与开发 —> 基本配置 —> 公众号开发者信息设置添加IP白名单前端向后端请求 ticket
前端在页面渲染时使用 ajax 向后端请求ticket
。具体的代码就不写了。
后端向微信获取token
后端收到前端的请求后,向微信的 api 接口发送请求,请求类型为 GET:
https://api./cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
参数说明:
grant_type : 请求token
固定填写client_credentialappid & secret : 公众号设置里获取到的AppID和AppSecret
正常情况下,会返回 json 包:
{"access_token":"ACCESS_TOKEN","expires_in":7200}
这里的access_token
就是我们需要的token
了。expires_in
为有效期,单位秒。
如果请求发生错误,则会返回 json 包:
{"errcode":40013,"errmsg":"invalid appid"}
这个例子是AppID无效,errcode
是错误码,errmsg
为错误信息。
注:后端获取的tocken
可以用在别的微信接口通信上,所以最好在有效期内保存至缓存。当有效期到期时再获取新的。
后端根据token
生成ticket
获取token
后,使用token
向微信服务器请求ticket
,请求类型为 GET:
https://api./cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
ACCESS_TOKEN 就是之前获取到的token
了,准备使用 JS-SDK 接口 type 参数就设置为jsapi。成功后返回一个 json 包:
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}
errcode : 错误码errmsg : 错误信息ticket : 获取到的ticket
数据expires_in : 有效期,单位秒
注:ticket
最好也保存在缓存内,到期时再重新请求。
根据ticket
创建签名
创建签名和配置信息需要这些数据:
noncestr : 随机字符串jsapi_ticket : 微信服务器发送的ticket
timestamp : 时间戳url : 前端要使用 jsapi 的页面地址,注意不包括#号和后面的部分
例如:
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.?params=value
然后对这些数据,按照字段名的 ASCII 码升序排列(字典序)后,使用 URL 键值对的格式(即 key1=value1&key2=value2…)拼接成字符串,注意所有参数名均为小写字符。排序实际上就是 jsapi_ticket -> noncerstr -> timestap -> url 。拼接好后是这样:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.?params=value
最后对此段字符串进行 sha1 签名,得到 signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
将这些数据和appid
返回给前端(其中 url 是前端传送给后端的)
前端创建配置信息,并注入验证
配置信息是一个对象,其格式为:
{debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表}
首先引入微信SDK的一个 JS 文件:
http://res./open/js/jweixin-1.6.0.js
http://res2./open/js/jweixin-1.6.0.js
两个均支持 https ,随便哪个个都可以,另一个是备用
根据后端传入的参数设置配置对象,并注入
wx.config({debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。appId: res.data.appId, // 必填,公众号的唯一标识timestamp: parseInt(res.data.timestamp), // 必填,生成签名的时间戳nonceStr: res.data.nonceStr, // 必填,生成签名的随机串signature: res.data.signature, // 必填,签名jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的 JS 接口列表});
处理验证
可以使用封装好的wx.ready
接口来处理成功验证行为,使用wx.error
接口来处理验证失败行为
wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。});
wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。});
例如实现将页面在微信分享给朋友及分享到朋友圈的功能
// 成功wx.ready(() => {var shareData = {title: "新闻",desc: "每日新闻",link: window.location.href,imgUrl: "/img/logo.jpg"};//自定义“分享给朋友”及“分享到QQ”按钮的分享内容wx.updateAppMessageShareData(shareData);//自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容(1.4.0)wx.updateTimelineShareData(shareData);});//错误wx.error(function (res) {console.log("微信分享错误信息", res);});
SDK接口调用说明
所有 SDK 接口都是通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
success:接口调用成功时执行的回调函数。fail:接口调用失败时执行的回调函数。complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。