javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 使用微信JS-SDK接口

微信开发相关功能之使用微信JS-SDK接口

作者:runsong911

这篇文章主要给大家介绍了关于微信开发相关功能之使用微信JS-SDK接口的相关资料,微信SDK是一套开发工具包,为开发者提供了许多API接口,使得开发一个微信公众号变得更加简单,需要的朋友可以参考下

前言

通过微信 JS-SDK 接口,可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。

微信开发文档

准备工作

首先需要有一个公众号,该公众号是需要能认证的(企业认证)。

然后需要提前看一下开发帮助文档,了解一下基础。

接口使用流程

接口使用流程为:

在使用前,需要在微信工作号里进行一些设置,并获取 AppID 和 AppSecret。通常 token 的有效期是7200秒,即2小时,此时间回随token 一起返回。有效期内可以重复使用,即跳过步骤2。

公众号设置

前端向后端请求 ticket

前端在页面渲染时使用 ajax 向后端请求 ticket。具体的代码就不写了。

后端向微信获取 token

后端收到前端的请求后,向微信的 api 接口发送请求,请求类型为 GET:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

参数说明:

正常情况下,会返回 json 包:

{"access_token":"ACCESS_TOKEN","expires_in":7200}

这里的 access_token 就是我们需要的 token 了。expires_in 为有效期,单位秒。

如果请求发生错误,则会返回 json 包:

{"errcode":40013,"errmsg":"invalid appid"}

这个例子是 AppID 无效,errcode 是错误码,errmsg 为错误信息。

返回码说明
-1系统繁忙,此时请开发者稍候再试
0请求成功
40001AppSecret错误或者AppSecret不属于这个公众号,请开发者确认AppSecret的正确性
40002请确保grant_type字段值为client_credential
40164调用接口的IP地址不在白名单中,请在接口IP白名单中进行设置。
89503此IP调用需要管理员确认,请联系管理员
89501此IP正在等待管理员确认,请联系管理员
8950624小时内该IP被管理员拒绝调用两次,24小时内不可再使用该IP调用
895071小时内该IP被管理员拒绝调用一次,1小时内不可再使用该IP调用

注:后端获取的 tocken 可以用在别的微信接口通信上,所以最好在有效期内保存至缓存。当有效期到期时再获取新的。

后端根据 token 生成 ticket

获取 token 后,使用 token 向微信服务器请求 ticket ,请求类型为 GET:

https://api.weixin.qq.com/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
}

注: ticket 最好也保存在缓存内,到期时再重新请求。

根据 ticket 创建签名

创建签名和配置信息需要这些数据:

例如:

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

然后对这些数据,按照字段名的 ASCII 码升序排列(字典序)后,使用 URL 键值对的格式(即 key1=value1&key2=value2…)拼接成字符串,注意所有参数名均为小写字符。排序实际上就是 jsapi_ticket -> noncerstr -> timestap -> url 。拼接好后是这样:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

最后对此段字符串进行 sha1 签名,得到 signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

将这些数据和 appid 返回给前端(其中 url 是前端传送给后端的)

前端创建配置信息,并注入验证

配置信息是一个对象,其格式为:

{
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
}

首先引入微信SDK的一个 JS 文件:

http://res.wx.qq.com/open/js/jweixin-1.6.0.js
http://res2.wx.qq.com/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: "https://xxxxxxx.com/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对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

总结 

到此这篇关于微信开发相关功能之使用微信JS-SDK接口的文章就介绍到这了,更多相关使用微信JS-SDK接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文