微信 JS-SDK 开发

脱离了煎熬的等待之后,微信给出了微信JS-SDK说明文档 的开发文档,着实给咱们带了便利啊。

话不多说,跟着文档咱做起开发来。

其实在文档中说的是比较明白的了,我呢只是将自己处理的方法贴出来,一是让大家参考,二是咱也不是什么大神,如有问题还望各位不吝指教哦。

根据文档说明,咱们总共需要做至少五个步骤的事情:

步骤一:绑定域名

步骤二:引入JS文件

步骤三:通过config接口注入权限验证配置

步骤四:通过ready接口处理成功验证

步骤五:通过error接口处理失败验证

接下来咱就按部就班的搞起。

对了,关于下面的所有操作都是要在后台进行的,js也可以单独获取/产生相应的数据,但是不安全,不方便。个人觉得后台操作高大上:)

步骤一、步骤二咱就不将了,直接点击上面的链接到微信文档就能轻松解决。

关键是对于第三步的处理,注入权限验证配置

整个配置如下:

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

我们看到这里边一堆的参数,不过其实都是比较简单的进行设置即可,只不过也有存在一定的关联性。

接下来我们具体看之:

debug

这个就不多说了,一般在开发时都是 true,在这个模式下基本上执行的每个 js 调用都会给显示出来,不需要自己在写什么 alert 了,比较方便。不过真实使用时就算你不打算改成 false,也绝对会有人打电话给你让你改成 false :)

appId

在微信后台的开发者中心就能够直接看到,和 appSecret在一堆儿的。当然这个既可以 hard coding,也可以动态获取,如果此模块开发出来不是只给一个公众号使用。

timestamp/nonceStr/signature

这三个东东就要我们自己来弄了,这个在下文着重介绍了。总之呢,timestamp/nonceStr 是由我们自己生成的,然后再参与到 signature 的生成中。

jsApiList

列出当前页面中咱要使用到的JS接口,可点击上文链接的附录2查看。

好,接下来就是关键部分咯(对于权限签名算法的原版介绍请点击上文链接的附录1进行查看)

一个完整的链条如下图所示:

appId/appSecret  --->  access_token --->  jsapi_ticket  ---->  signature  --->  config 配置

其中对于 access_token/jsapi_ticket 由于访问数量的限制(貌似是1000,可自行查看),需要进行相应的缓存处理,而每次获取后的有效时间目前为 7200s。

好,咱们可以继续接下来的步骤了。

我们来获取 access_token 吧(点咱看官版介绍):

只需要采用 GET 方式的获取即可,

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

只需要将上述 APPID/APPSECRET 替换为咱自个儿的就行,就像上文所说如果是做多个公众号的配置,肯定是要做相应的动态处理的,下文或有所介绍。

正确返回是这个样儿的,

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

错误的大概是这个样儿的,

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

可能还有其它的错误哦。。

jsapi_ticket 目前也就不是问题了:

也只需 GET 方式即可,

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

将其中的 ACCESS_TOKEN 替换为自个儿的就行。

正确的是这个样儿的,

{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}

额,官方没说错误是啥样儿的(咱也没碰到。。)

好,接下来咱就上 签名算法 了:

其实官方说了一堆儿,就是这个样子的,

先拼成这样儿就好了,

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

然后,在这个字符串中 key 相对位置是固定的,且全是小谢的, noncestr/timestamp 也就是咱们自己生成的,这俩也会放到界面上的 config 参数中。然后对于最后的 url 值的定义是:当前持有 config 配置页面的完整 url 链接,不过不包含 # 号及其后边的字符串,且不要做任何的URL转义。

完了我们就将生成的串儿用 sha1 进行加密,ok, 就得到咱们要的 signature 了。

打完手工。。

对的,不过关于咱真正的处理方式其实还没有讲哟。。

关于那俩特娇气的 东西咱还的做缓存不是,于是我就把它俩扔数据库去了:

咱的表结构,

CREATE TABLE `CRM_APP_WECHAT` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `eId` int(11) NOT NULL,
    `token` varchar(100) NOT NULL,
    `app_id` varchar(100) NOT NULL COMMENT '应用id',
    `app_secret` varchar(100) NOT NULL COMMENT '应用密钥',
    `access_token` varchar(200) NOT NULL,
    `jsapi_ticket` varchar(200) NOT NULL,
    `get_time_access_token` timestamp NULL DEFAULT NULL COMMENT '更新 access_token 时间',
    `expires_in_access_token` int(11) NOT NULL DEFAULT '7200' COMMENT 'access_token 失效时间',
    `get_time_jsapi_ticket` timestamp NULL DEFAULT NULL COMMENT '获取 jsapi_ticket 时间',
    `expires_in_jsapi_ticket` int(11) NOT NULL DEFAULT '7200' COMMENT 'jsapi_ticket 失效时间',
    `create_user` int(11) NOT NULL DEFAULT '-1',
    `create_time` timestamp NULL DEFAULT NULL,
    `modify_user` int(11) NOT NULL DEFAULT '-1',
    `modify_time` timestamp NULL DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT='微信敏感信息记录表';

处理逻辑大概如下(自顶向下):

时间: 2024-10-01 04:23:53

微信 JS-SDK 开发的相关文章

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

微信JS SDK开发 共享问题小结

首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应这一块.总共费时 将近一周的时间才把这块弄懂.期间遇到的部分问题以及如何解决分享给大家,欢迎大家一起讨论并指正. 问题1:JS接口安全域名,你所有想要使用的微信接口,要在这个域名内部进行,不能在本地进行相关调试. 问题2:公众账号要求:必须是已经认证的. 问题3:配置config(PS:开启debu

实战微信JS SDK开发:贺卡制作与播放(2)

最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk 0.先Show一

微信支付SDK开发教程

今天研究了一下微信的SDK开发教程,下面我就简单的把步骤介绍下,希望对你们有所帮助 现在的支付都是使用V3接口的,2014年9月之前都是使用V2接口,现在我就介绍下V2和V3接口的申请方法吧 一.微信支付v2 1. 使用网页授权接口 使用网页授权接口获取用户的基本信息. [微信公众号]OAuth2.0授权.pdf点击下载 2. 使用共享收货地址控件 使用共享收货地址控件,获取用户在微信的收货地址.[微信公众号支付]收货地址共享接口文档V1.6.pdf点击下载 3. 使用公众号发起支付请求 使用J

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

微信js sdk分享开发摘记java版

绑定域名和引入js的就不说了 废话不说直接上代码 1 public void share(HttpServletRequest request) throws Exception { 2 3 StringBuffer homeUrl = request.getRequestURL(); 4 String queryString =request.getQueryString(); 5 if(StringUtils.isNotBlank(queryString)){ 6 homeUrl.appen

微信JS SDK配置授权,实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

微信JS SDK使用权限签名算法

jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取.由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket . 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的

Android微信支付SDK开发

一.准备工作 1.开发平台及SDK下载 微信开放平台 https://open.weixin.qq.com 下载SDK 微信支付Demo下载 http://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=11_1 2.创建应用 创建移动应用获取 AppID  AppSecret 要获取支付功能还需要开发者资质认证,300RMB/年的费用,貌似是开放平台中唯一要收费的- 3.AndroidMainfest文件修改 权限 <uses-permission

Android微信支付SDK开发笔记

一.准备工作 1.开发平台及SDK下载 微信开放平台 https://open.weixin.qq.com 下载SDK 微信支付Demo下载 http://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=11_1 2.创建应用 创建移动应用获取 AppID  AppSecret 要获取支付功能还需要开发者资质认证,300RMB/年的费用,貌似是开放平台中唯一要收费的… 3.AndroidMainfest文件修改 权限声明: <uses-permiss