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

最新推荐文章于 2024-09-09 23:23:25 发布

炜炜Upon

最新推荐文章于 2024-09-09 23:23:25 发布

阅读量4.5k

点赞数 4

分类专栏：微信公众号 JSSDK 文章标签： javascript html5 小程序 js 其他

本文链接：https://blog.csdn.net/qq_26542023/article/details/115368689

版权

微信公众号同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JSSDK

3 篇文章 0 订阅

订阅专栏

官方地址：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() {
        //动态获取当前页面的url
        var 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备案数据同步有一天延迟，所以请在第二日绑定