微信公众号H5开发——JSSDK调用微信接口

官方地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验

使用步骤：

一.配置

1.开发->基本配置页面

得到开发者ID，开发者密码，并且设置IP白名单
IP白名单：为服务器IP地址

2.公众号设置->功能设置

微信公众号请求网页授权之前，开发者需要先登记授权回调域名。
注意：这里填写的是域名，且为全域名。授权后该域名下的其他页面都可以授权，
二.使用

1.引入js文件

在需要调用JS接口的页面引入如下JS文件，(支持https)http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。备注：支持使用 AMD/CMD 标准模块加载方法加载

2.通过config接口注入权限验证配置

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

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

上面所有的参数需要调用后端接口获取wx.config里面的参数

$(document).ready(function() {//动态获取当前页面的urlvar globalUrl = location.href.split("#")[0];// url编码var url = encodeURI(globalUrl);// 传给后端的url完整链接var param = {url: url,};//发送ajax请求获取微信签名等数据$.ajax({type: "post",// 此处请求的接口根据后端对应的不同而不同url: '/app/open/getWxSign.htm', //请求后台加载数据的路径改成你自己的data: param,dataType: "JSON",success: function(result) {console.log("wx.config() ---> 接收后台返回的参数"); $(function () {    var signUrl = window.location.href.split('#')[0];// 这里的取值根据你自己的后端返回不同而有所差别if (result.code == 0000) {wx.config({                debug: true,                appId: data.appid,                timestamp: data.timestamp,                nonceStr: data.nonceStr,                signature: data.signature,                jsApiList: []            })  } else {console.log("error response");}}});});

3.通过ready接口处理成功验证

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作.
// 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

4.通过error接口处理失败验证

wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

5.微信jssdk调用成功

完成以上步骤,微信jssdk就调用成功了，可以可以微信官方文档的方法

三.常见错误及解决方法

参考文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Global_Return_Code.html

公众号每次调用接口时，可能获得正确或错误的返回码，开发者可以根据返回码信息调试接口，排查错误。

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名）。
invalid signature签名错误。建议按如下顺序检查：
1. 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5. 确保一定缓存access_token和jsapi_ticket。
6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
1. 确认config正确通过。
2. 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
3. 确认config的jsApiList参数包含了这个JSAPI。
permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）。
function not exist当前客户端版本不支持该接口，请升级到新版体验。
为什么6.0.1版本config:ok，但是6.0.2版本之后不ok（因为6.0.2版本之前没有做权限验证，所以config都是ok，但这并不意味着你config中的签名是OK的，请在6.0.2检验是否生成正确的签名以保证config在高版本中也ok。）
在iOS和Android都无法分享（请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限，如果确实已经认证，则要检查监听接口是否在wx.ready回调函数中触发）
服务上线之后无法获取jsapi_ticket，自己测试时没问题。（因为access_token和jsapi_ticket必须要在自己的服务器缓存，否则上线后会触发频率限制。请确保一定对token和ticket做缓存以减少2次服务器请求，不仅可以避免触发频率限制，还加快你们自己的服务速度。目前为了方便测试提供了1w的获取量，超过阀值后，服务将不再可用，请确保在服务上线前一定全局缓存access_token和jsapi_ticket，两者有效期均为7200秒，否则一旦上线触发频率限制，服务将不再可用）。
uploadImage怎么传多图（目前只支持一次上传一张，多张图片需等前一张图片上传之后再调用该接口）
没法对本地选择的图片进行预览（chooseImage接口本身就支持预览，不需要额外支持）
通过a链接(例如先通过微信授权登录)跳转到b链接，invalid signature签名失败（后台生成签名的链接为使用jssdk的当前链接，也就是跳转后的b链接，请不要用微信登录的授权链接进行签名计算，后台签名的url一定是使用jssdk的当前页面的完整url除去'#'部分）
出现config:fail错误（这是由于传入的config参数不全导致，请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList）
如何把jsapi上传到微信的多媒体资源下载到自己的服务器（请参见文档中uploadVoice和uploadImage接口的备注说明）
Android通过jssdk上传到微信服务器，第三方再从微信下载到自己的服务器，会出现杂音（微信团队已经修复此问题，目前后台已优化上线）
绑定父级域名，是否其子域名也是可用的（是的，合法的子域名在绑定父域名之后是完全支持的）
在iOS微信6.1版本中，分享的图片外链不显示，只能显示公众号页面内链的图片或者微信服务器的图片，已在6.2中修复
是否需要对低版本自己做兼容（jssdk都是兼容低版本的，不需要第三方自己额外做更多工作，但有的接口是6.0.2新引入的，只有新版才可调用）
该公众号支付签名无效，无法发起该笔交易（请确保你使用的jweixin.js是官方线上版本，不仅可以减少用户流量，还有可能对某些bug进行修复，拷贝到第三方服务器中使用，官方将不对其出现的任何问题提供保障，具体支付签名算法可参考 JSSDK微信支付一栏）
目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题已在Android6.2中修复
uploadImage在chooseImage的回调中有时候Android会不执行，Android6.2会解决此问题，若需支持低版本可以把调用uploadImage放在setTimeout中延迟100ms解决
require subscribe错误说明你没有订阅该测试号，该错误仅测试号会出现
getLocation返回的坐标在openLocation有偏差，因为getLocation返回的是gps坐标，openLocation打开的腾讯地图为火星坐标，需要第三方自己做转换，6.2版本开始已经支持直接获取火星坐标
查看公众号（未添加）: "menuItem:addContact"不显示，目前仅有从公众号传播出去的链接才能显示，来源必须是公众号
ICP备案数据同步有一天延迟，所以请在第二日绑定

微信公众号H5开发——JSSDK调用微信接口相关推荐

微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
微信公众号开发,一站式踩坑开发前提:例如你们域名是https://www.baidu.com 配置nginx反向代理,把你项目的端口重定向到你们测试环境或线上环境域名 # 访问https://bai ...
微信公众号H5开发，实现网页授权（静默登录）
文章目录业务场景具体实现 1. 配置微信后台 2. 上传校验文件 3. 网页静默授权附:官方文档业务场景最近我司有个2C的需求,以分享链接的形式推广某线上活动, 要求一个链接覆盖微信.H5和 ...
微信公众号H5开发登录授权流程
很久没写博客了,最近实在是太忙,有太多东西想写想记录.今天写个关于微信登录的过程吧,这次项目是我第一次写关于微信的东西,这个登录授权搞了半天.但总算是把流程搞明白了,先附上微信官方文档微信公众平台 ...
微信公众号第三方开发之一创建微信公众号第三方平台
首先声明,在接下来一系列公众号第三方开发教程中,核心原理是参照下面博主的源码: http://www.cnblogs.com/sujingnan/p/4397203.html 拓展业务需求的. 为什么 ...
java微信公众号支付开发平台_微信公众号支付demo,微信公众号支付Java DEMO
1.5.4微信验证的控制方法: /** * 微信验证 * 请填写接口配置信息,此信息需要你有自己的服务器资源,填写的URL需要正确响应微信发送的Token验证 * 验证服务器地址的有效性 * 开发者提 ...
微信公众号H5开发——调用相册和摄像头并上传服务器
之前的文章介绍了关于微信JSSDK调用,下面介绍一下其中的一个最常用的功能--调用相册和摄像头使用此功能之前先参考:微信JSSDK 在通过了config接口验签成功之后,我们就可以调用微信JSSDK ...
微信开发公众号页面配置JS-SDK调用微信接口
一:前期准备, 1,首先你需要一台服务器,:阿里云或者腾讯云啥的,最便宜的可以选择类似阿里云这种轻量级服务器,和域名配置好A记录. 2,需要在服务器打架node环境:可以找客服帮忙基本配置环境搭好. ...
java微信公众号支付开发平台_Java微信公众平台开发之公众号支付（微信内H5调起支付）...
官方文档准备工作:已通过微信认证的公众号,必须通过ICP备案域名(否则会报支付失败) 借鉴了很多大神的文章,在此先谢过了整个支付流程,看懂就很好写了一.设置支付目录在微信公众平台设置您的公众号 ...
微信公众号h5界面获取展示微信内置地图与地图坐标间的转换 — 微信地图（gcj02）转为百度地图
此文章中实例用测试号进行演示 .getLocation openLocation 主要运用微信JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信 ...

微信公众号H5开发——JSSDK调用微信接口

微信公众号H5开发——JSSDK调用微信接口相关推荐

最新文章

热门文章