微信JSSDK

2018-01-31  本文已影响0人  ai_cuicui

最近在做微信公众号开发，进行到网页开发部分被坑了两天时间，一直遇到的问题就是invalid signature，而网页上的大部分解决这个问题都是把流程再走一遍，很尴尬，耽误了好长时间。接下来是我总结的我在使用微信JSSDK的整个流程和问题。

一、绑定JS接口安全域名

1.生产号绑定方法：登录微信公众平台进入“公众号设置”的“功能设置”里面填写“JS接口安全域名”。
2.测试号绑定方法：进入测试号管理页面，找到JS接口安全域名项绑定。
JS接口安全域名官方法是：开发者可在该域名下调用微信开放的JS接口。
域名格式：如果你的域名是：http://91shou.com，那么JS接口安全域名为91shou.com。切记！
绑定的时候域名一定是CPU备案过的，微信为了验证域名是你们自己的，还需要在域名下放入一个指定的文件，不一定非得是根目录下，在你存放文件的那个目录下就可以了，当然你的安全域名也要写到这个文件，
例如：91shou.com/tg-background

二、引入微信JS文件

在需要调用JS接口的页面引入JS文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

三、通过wx.config接口注入权限验证

1.每个需要使用JSSDK的页面都要使用config接口注入配置信息，wx.config调用方法如下：

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

公众号的AppID在微信公众平台>开发>基本配置下就可以看到。这里有关签名的三个参数非常重要，需要从后台获取！
jsApiList，JS接口参考下一篇~

四、后台生成并返回前端所需要的参数

1.jsapi_ticket
jsapi_ticket是公众号用于调用js接口的临时票据。有效期7200秒，跟公众号普通access_token一样，必须全局缓存起来，因为这个ticket获取次数有限，超过次数将无法使用。建议设置缓存时间要小于7200秒，因为当请求微信端生成jsapi_ticket返回给后台保存这个动作需要时间，如果设置7200秒，实际上最后一两秒时，缓存里面还存在，但实际在微信那边已经过期了，再拿这个ticket会出错。生成jsapi_ticket如下：
⑴首先要获取access_token(GET请求)
直接访问这个链接，把已有的值填上去，

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

⑵用第一步获取的access_token使用GET请求获取jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

返回的信息是一段json，里面有一个值是jsapi_ticken。我获取到jsapi_ticken之后就直接给后台了，后台生成签名之后会将AppID，timestamp、nonceStr、signature一起返回到前端。前端拿到值之后，写入wx.config中相应的字段即可。还有几点需要注意：1.前端wx.config配置中的字段名称里有大写，而后台生成签名返回的字段都是小写。2.时间戳是精确到秒，不是毫秒。

五、接口处理验证

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

wx.ready(function(){
    
})

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

wx.ready(function(){
    
})

config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的的debug查看。

六、判断当前客户端版本是否支持JS接口
wx.checkJsApi({
// 需要检测的JS接口列表，所有JS接口列表参考下一篇,
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], 
    success: function(res) {
        console.log('支持');
      // 以键值对的形式返回，可用的api值true，不可用为false
     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
 });
七、调用接口

接口太多，参考下一篇哦！

八、常见的一些错误
  1. invalid url domain:
    js接口安全域名错误。可以看看第一项
  2. invalid signature:
    要么是jsapi_ticket错误，要么是签名算法问题，要么是算法的参数有问题，注意noncestr中的's'是小写的。如果都是对的。那就是前端传的url有问题了
  3. permission denied:
    这个问题一般是没有接口权限的问题，有的接口是要认证之后才可以使用，测试号不会有这个问题。

到这一步还没有结束，接下来还有一个更重要的问题：二次分享失败！不显示缩略图和描述。
首先二次分享失败的原因：
微信在二次分享之后会给该链接自动加上form以及isappinstalled这两个参数证明该链接是二次分享过来的，就因为有了这两个参数，才会导致二次分享失败。
解决方法：
在二次分享之前就将这两个参数去掉然后强制跳转刷新到不带微信参数的页面。
以下是我开发的完整代码：

$(function(){
        var url = location.href.split('#')[0];
        $.ajax({
            type:'post',
            url:"${ctx}/sp/merchantsJoinApi/qianming",
            data:{url:url},
            dataType:'json',
            success:function(data){
                //第二步：通过config接口注入权限验证配置
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wxe75a19668de1b089', // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
                });
                //第三步：通过ready接口处理成功验证
                wx.ready(function(){
                    console.log("成功");
                    //获取“分享给朋友“按钮点击状态及自定义分享内容接口
                    wx.onMenuShareAppMessage({
                        title: '${products.shareTitle}', // 分享标题
                        desc: '${products.shareDescribe}', // 分享描述
                        link: 'http://xxxxx.com/xbdz-background/sp/productsTmaaApi/itemPropagandaIndex', // 分享链接
                        imgUrl: 'http://xxxxx.bkt.clouddn.com/jyhj_wx_fx.jpg', // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () { 
                            //用户成功分享后执行的回调函数
                        },
                        cancel: function () { 
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    //获取”分享到朋友圈“按钮点击状态及自定义分享内容接口
                    wx.onMenuShareTimeline({
                        title: '${products.shareTitle}', // 分享标题
                        link: 'http://xxxxx.com/xbdz-background/sp/productsTmaaApi/itemPropagandaIndex', // 分享链接
                        imgUrl: 'http://xxxxx.bkt.clouddn.com/jyhj_wx_fx.jpg', // 分享图标
                        success: function () { 
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () { 
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
                //第四步：通过error接口处理失败验证
                wx.error(function(res){
                    console.log("失败");
                });
                //判断当前客户端版本是否支持JS接口
                wx.checkJsApi({
                    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                    success: function(res) {
                        console.log('支持');
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    }
                });
            }
        });
    });
以上仅为个人开发过程，如果在您使用的时候没有解决问题，还请勿喷，谢谢！
上一篇下一篇

猜你喜欢

热点阅读