文档章节

微信JS SDK网页接口

CurtainRight
 CurtainRight
发布于 2016/02/28 20:23
字数 892
阅读 492
收藏 12

一、JS端

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

2、引入JS文件http://res.wx.qq.com/open/js/jweixin-1.0.0.js

3、通过config接口注入配置

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

appId:公众号原始ID

timestamp:当前时间的时间戳

nonce_str:随机字符串

signature:签名。

1、首先通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appId&secret=secret接口得到token

2、通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi得到ticket

3、通过这些参数指定方式进行签名,签名方式使用SHA1,得到signature(注意需要传递URL,URL是指访问当前页面的URL。不知道这里URL解释错了没用)

 

二、后台端调用接口得到相应参数,传递到前端(spring mvc /servlet/struts2都可以)

 request.setAttribute("timestamp", data.get("timestamp"));
 request.setAttribute("nonceStr", data.get("nonceStr"));
 request.setAttribute("signature", data.get("signature"));
 request.getServletContext().getRequestDispatcher("/wechat.jsp").forward(request,response);

 

三:使用微信官网提供的调试工具进行调试。http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign

注意:

1、获取验证参数接口,得到相应参数(php、java、nodejs以及python

http://demo.open.weixin.qq.com/jssdk/sample.zip

2、分享接口并不是只有认证号能用,现在测试号和未认证号到可以用。(以测试的)

3、测试分享接口需要注意的是,需要你主动去触发分享接口(比如分享到朋友圈,然后点击分享按钮触发Js代码)

4、使用图像和音频上传接口上传的图片和音频只有3天的有效期,如果图片和音频你想长期使用的话,你本地也要保存。

不理解:

1、链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。

2、所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

3、不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回

4、对于调用jssdk的时候,wx.ready需要注意,判断你的事件是否是页面加载的时候主动触发,还是用户有操作的触发。如果页面加载的时候自动触发,你必须要用wx.ready包括对应的事件,否则不需要。

 

© 著作权归作者所有

共有 人打赏支持
CurtainRight
粉丝 6
博文 172
码字总数 61177
作品 0
武汉
程序员
微信开放JS-SDK,助力网页开发[转自微信官方]

微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK)。 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直...

明非_
2014/07/26
0
14
微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页...

pdzhsy
07/16
0
0
如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能 如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。...

detectiveHLH
08/04
0
0
深究WeixinJSBridge未定义之因

对于Fundebug这样一个没有使用微信JS-SDK的产品来说,我们竟然收到了WeixinJSBridge is not defined 的报错: 去网上一搜,发现很多开发者都遇到类似的问题: 我的微信项目,没有用到微信JS-...

kiwenlau
2017/02/20
0
0
基于Koa.js的微信工具类小记

关于微信公众号开发和小程序开发的教程其实网上已经有很多了,但是基于koa.js 开发的教程其实不多,于是接下来对踩坑的经历做一些小结; 自己也写了一个微信工具类,项目地址是微信工具类 ...

evont
07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
3
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部