文档章节

微信JS SDK网页接口

CurtainRight
 CurtainRight
发布于 2016/02/28 20:23
字数 892
阅读 481
收藏 11
点赞 1
评论 0

一、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
博文 127
码字总数 59580
作品 0
武汉
程序员
微信中页面二次分享小图标丢失问题

每天踩点坑,每天成长一点点,这样工作才会变得有趣。微信JSSDK踩坑记录。 在我们有房APP1.1的版本中增加了房产资讯的功能,昨天晚上有同事在群里反馈从APP中分享的资讯到微信中,然后再次分...

尹吉欢 ⋅ 05/08 ⋅ 0

小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/26 ⋅ 0

android webview获取网页源代码,js执行前后

webview获取网页源代码分两种,一种是js执行前,一种是js执行后 1.js执行前 URL url = new URL(path); // 根据URL // 打开连接,URL.openConnection函数会根据URL的类型,返回不同的URLConn...

tan6458 ⋅ 2017/07/12 ⋅ 0

Yii2.0实现微信公众号后台开发

研读 微信公众平台开发者文档 ,然后再阅读本文,效果更佳! 接入微信 Yii2后台配置 1.在app/config/params.php中配置token参数 2.在app/config/main.php中配置路由 因为接口模块使用的RESTf...

botkenni ⋅ 05/27 ⋅ 0

微信小程序/网站 上传图片到腾讯云COS

COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务。可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽,请求等。个人也可以通过...

皇冠小丑 ⋅ 05/13 ⋅ 0

第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt ⋅ 06/05 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao ⋅ 05/18 ⋅ 0

JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 47分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 50分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 59分钟前 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 今天 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部