微信jsjdk的config流程(含纯前端2小时玩耍流程)

先来一个图看看基本的config流程:


具体说明:

前提:

1、引入 http://res.wx.qq.com/open/js/jweixin-1.2.0.js 文件

2、公众号*1、可供手机微信访问链接*1

可访问https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

开通一个公众测试号

3、在公众号的js接口安全域名处填上需要测试的链接

例如在测试号中的这里进行修改

步骤开始:

前后端协调或前端自个测试:

一:

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

一个这样的链接,把下图的信息填到链接对应位置,形成完整链接https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=???&secret=???

使用完整链接进行数据请求,微信端将返回类似这样的数据,得到我们的目标access_token:

{"access_token":"MZUesZlnlMF89hOo0Pe-CGjP_SIWP3ZgJiqMgbWWWpkNduWma5y6Pz7Og0aoKvYZ1jC49DrLhQ6nT6m59Y0fNScuovd3MRJIM6wL8OkZaPIfDh_Bk9rVUQRgZIjcXscxHTRjAIAAMK","expires_in":7199}

注意:这个access_token有效时间为7200s,每天请求上限为2000次


二:

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

又是一个类似的链接,这次把上面获取到的access_token同样填到对应位置上:

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

使用完整链接进行数据请求,微信端将返回类似这样的数据,得到我们的目标jsapi_ticket:

{"errcode":0,"errmsg":"ok","ticket":"HoagFKDcsGMVCIY2vOjf9pMqwL_xGp1NOb1kk7BnsmMLWhQcssE04-W0T_XCQQSc5djz5crlKeYnabt7uE2Img","expires_in":7200}

注意:这个jsapi_ticket有效时间为7200s


前后端协调部分:

三:

1、前端获取完整url传给后端(#后面的除外)。

2、后端:

生成32位以下随机数,获取精确到秒的10位时间戳,然后根据微信官网(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)签名算法生成签名。

3、后端完成签名后,返回随机数、时间戳和签名传回前端。

注意:签名算法是否正确,请移步到https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign进行检验。

四:

到这一步就没什么好说的了,前端引入微信的js文件,使用后端给的数据,将

wx.config({

    debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: '', //必填,公众号的唯一标识

    timestamp: , //必填,生成签名的时间戳

    nonceStr: '', //必填,生成签名的随机串

    signature: '',//必填,签名,见附录1

    jsApiList: [] //必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

里面的内容填完,然后在微信上运行即可。


前端自个测试:

三:

通过一、二在浏览器链接访问获取数据的方法,得到jsapi_ticket(可以玩上个两小时)。

然后怎么生成随机数、时间戳就不说了

访问https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

如下图所示,把上面四项填完,即可生成签名signature

百度的各种js的sha1加密方法,基本上都是跟微信的不匹配!

所以如果想要在js里面完成加密,就在这个网页中把这个文件的内容拷贝出来,作为加密方法引用到工程里面,然后再...

var timestamp=1519461159,

     noncestr="IF7kkC7c97cCRfe",

     url=window.location.href,

     jsapi_ticket = "HoagFKDcsGMVCIY2vOjf9pMqwL_xGp1NOb1kk7BnsmOj8wYZSH8Ys_KqLT7nFwSBBv34_xnGaIBd-k4YCU_TJA",

     str='jsapi_ticket='+jsapi_ticket+'&noncestr='+noncestr+'×tamp='+timestamp+'&url='+url;

var s=new jsSHA(str,"TEXT"),

      t=s.getHash("SHA-1","HEX");//这儿的t便是我们想要的signature值了。

四:

然后把上面的信息完完整整、一模一样地填到wx.config的对应位置上:

wx.config({

    debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: 'wx5de259d90ed9e11e', //必填,公众号的唯一标识

    timestamp: '1508981536', //必填,生成签名的时间戳

    nonceStr:'k59Q86kOIfSKgDvlhjNWjHyWfr2r7R3E', //必填,生成签名的随机串

    signature: 'ca4de1db3f1edaf849973e8e1d9e35984e2714eb',//必填,签名,见附录1

jsApiList: ['chooseImage', 'previewImage','uploadImage', 'downloadImage'] //必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

然后使用链接在微信访问一发。(微信的开发者工具也可验证config,只不过无法调用某些jdk功能)

你就能看到这个ok的信息。当然,如果失败了,它会给你一个蛮准确的提示,告诉你什么位置有问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 久违的新文章发布。。我的锅这篇文章是在写的太长,可以慢慢看一下,伪代码,毕竟简书上面,望大家见谅!!!先看官方文档...
    wyatt_plus阅读 1,611评论 0 2
  • 开发前首先我们要知道一些概念 各公众号区别:1、订阅号:为媒体和个人提供一种信息传播方式,主要偏于为用户传达资讯(...
    CoderZS阅读 3,179评论 1 19
  • 随着微信的升级,关于微信的一些jssdk接口需通过签名之后才可以使用,今天主要与大家讲解一下前端如何调用jssdk...
    cyh_nini阅读 4,434评论 7 7
  • 最好吃的蒸猪在广东顺德(今佛山)的均安,其他都是浮云。据《顺德均安志》史料载:顺德各地春秋二祭“多有烧猪作牺牲分胙...
    只是不在意阅读 1,282评论 0 2
  • 我喜欢试探,或者更深程度的说,是暗示。但一旦说这种不摆上台面的话,就注定会有俩种未来:得到你想要的回答,得不到。得...
    久帆阅读 153评论 0 0