文档章节

微信JS SDK网页接口

CurtainRight
 CurtainRight
发布于 2016/02/28 20:23
字数 892
阅读 497
收藏 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
武汉
程序员
私信 提问
【转载】微信公众号获取用户地理位置并列出附近的门店

思路分析: 1、在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的...

php的小菜鸟
2017/07/21
0
0
微信开放微信内网页开发工具包,助力网页开发

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

oschina
2015/01/10
26.5K
30
微信开放JS-SDK,助力网页开发[转自微信官方]

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

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

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

pdzhsy
07/16
0
0
深究WeixinJSBridge未定义之因

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

kiwenlau
2017/02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TiQuery:All Diagnosis in SQL | TiDB Hackathon 优秀项目分享

本文作者是来自 TiNiuB 队的黄梦龙同学,他们的项目 TiQuery 在本届 TiDB Hackathon 2018 中获得了三等奖。 TiQuery 可以搜集诊断集群问题所需要的信息,包括集群拓扑,Region 分布,配置,各...

TiDB
17分钟前
2
0
git 分支创建合并流程图

gentlelions
25分钟前
2
0
Kali Linux常用服务配置教程DHCP服务原理

Kali Linux常用服务配置教程DHCP服务原理 动态主机配置协议(Dynamic Host Configuration Protocol,简称DHCP)是一个局域网的网络协议,基于UDP协议工作。它主要有两个用途:第一,给内部网...

大学霸
26分钟前
1
0
控制台打印图片

function dev(){ if (window.console){ console.log("%c\n ", "font-size:100px;background:url('http://gmcyzs.com/resources/images/logo.png') no-repeat"); console.log('%c 深务平台,\......

羊皮卷
34分钟前
0
0
MyBaties的二级缓存

二级缓存介绍 在上文中提到的一级缓存中,其最大的共享范围就是一个SqlSession内部,那么如何让多个SqlSession之间也可以共享缓存呢,答案是二级缓存。 当开启二级缓存后,会使用CachingExec...

嘴角轻扬30
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部