2015-06-06 15:52:37 wyx100 阅读数 8713

转自:http://my.oschina.net/u/2308739/blog/371414

1
2
3
/**最近在做微信js sdk 接口调用说明*/
***相信很多人都遇见像我这样的问题,再加上自己只能算是半个程序员,所以苦苦摸索了好久终于搞懂了。
****下面就把自己所遇见的各种问题和大家分享一下,都是自己亲手实验过的********/

错误一、invalid signature

如果出现 invalid signature,首先可以确定的是你的签名算法有问题。

建议:首先查看微信官方网站给出的解决方案,链接为 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

  1. invalid signature签名错误。建议按如下顺序检查:

    1. 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。也就是你自己后台生成签名要和微信校验算法生成的签名一致才可以(可能大小写不同)。

      注意:

      签名生成规则如下:

      参与签名的字段包括有效的 jsapi_ticket(获取方式详见微信 JSSDK 文档), noncestr (随机字符串,由开发者随机生成),timestamp (由开发者生成的当前时间戳), url(当前网页的URL,不包含#及其后面部分。注意:对于没有只有域名没有 path 的 URL ,浏览器会自动加上 / 作为 path,如打开 http://qq.com 则获取到的 URL 为 http://qq.com/)。

      特别注意:你在利用参数生成签名的时候,要对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序)后,使用 URL 键值对的格式(即key1=value1&key2=value2…)拼接成字符串 string1。这里需要注意的是所有参数名均为小写字符。

      我的最开始的错误就是没有注意到生成签名的那几个参数要按照key=value的样式连接成一个字符串,然后在sha1加密生成。

    2. ?
      1
      /****Java写的参数拼接算法***/
    3. ?
      1
      2
      3
      4
      5
      6
      7
      String[] paramArr = new String[] { "jsapi_ticket=" + jsapi_ticket,
                      "timestamp=" + timestamp, "noncestr=" + nonce, "url=" + jsurl };
      Arrays.sort(paramArr);
      // 将排序后的结果拼接成一个字符串
      String content = paramArr[0].concat("&"+paramArr[1]).concat("&"+paramArr[2])
                      .concat("&"+paramArr[3]);
      System.out.println("拼接之后的content为:"+content);
    4. 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

    5. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

    6. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

    7. 确保一定缓存access_token和jsapi_ticket。

    8. 确保你获取用来签名的url是动态生成的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败

    错误2、每次后台网页更新之后,微信访问效果没有出来。

    问题:手机端,网页缓冲导致。

    解决方案:重启手机,再试一下。

    错误3、微信分享接口,可以在自己的网页上面自定义一个按钮,当用户点击的时候完成分享。

    问题:我最开始也是这样想的,后来发现,原来不是这样的,只有当你用微信客户端打开,在最上面右边的 “分享到朋友圈”按钮按的时候效果才会出来。

    错误4、微信图像接口 permission denied

    首先查看微信给出的错误说明:该公众号没有权限使用这个JSAPI(部分接口需要认证之后才能使用)。

    说明:只要通过了公众号认证,都不会有问题。

    检查对象:如果出现这个说明程序上基本上不会有问题 微信后台已经返回了数据。

    第一、要检查 你的config 文件中相应的 jsapilist  是否包含了该接口哟。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    wx.config({
              debug: true,
              appId: 'wxaab709a7aef25dda',
              timestamp:data.timestamp,
              nonceStr:data.nonce,
              signature:data.signature,
              jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'hideMenuItems',
              'showMenuItems',
              'hideAllNonBaseMenuItem',
              'showAllNonBaseMenuItem',
              'translateVoice',
              'startRecord',
              'stopRecord',
              'onRecordEnd',
              'playVoice',
              'pauseVoice',
              'stopVoice',
              'uploadVoice',
              'downloadVoice',
              'chooseImage',
              'previewImage',
              'uploadImage',
              'downloadImage',
              'getNetworkType',
              'openLocation',
              'getLocation',
              'hideOptionMenu',
              'showOptionMenu',
              'closeWindow',
              'scanQRCode',
              'chooseWXPay',
              'openProductSpecificView',
              'addCard',
              'chooseCard',
              'openCard'
              'onMenuShareWeibo',
              'hideMenuItems',
              'showMenuItems',
              'hideAllNonBaseMenuItem',
              'showAllNonBaseMenuItem',



2017-11-19 15:19:10 shai1124 阅读数 5343
首先,我是保证了我取得的所以签名的参数经我签名计算后,和微信提供的

微信 JS 接口签名校验工具 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 

计算的结果一致。经排除,是url的参数中带有服务器端口,可微信那边执行签名计算的url不带端口号,因此出现了错误。
写上,以备后查,和遇到相同问题的同学参考。
2018-07-30 14:00:59 arey_maple 阅读数 1652

vue 微信分享

参考资料微信JS-SDK说明文档
业务逻辑:
需完成微信朋友圈和微信好友分享,后台返回signature,其他参数需本前端萌萌定义

前期工作

1.安装微信开发者工具
为方便以后开发debug,可以安装微信开发者工具
微信工具debug
这里会显示微信分享的回调,如有错误可对应解决

2.获取公众号appid和设置IP白名单
登录微信公众平台
目录:开发>基本配置
白名单为IP地址
公众号

3.设置JS接口安全域名
JS接口安全域名
txt文件必须与分享链接目录相对应,例如分享链接是https://www.baidu.com/share,建议将此文件放在根目录https://www.baidu.com
JS接口安全域名
完成上述操作后,可模拟生成signature

开发ing

自行构建vue环境,本萌萌用的是vue2,axios请求http接口数据

1.安装axios

npm install axios

2.安装微信sdk

npm install weixin-js-sdk

3.配置

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

debug 建议打开,上线的时候可关闭,此功能可在微信开发者工具上看到详细信息,也可在微信手机版中,以弹层的方式,弹出相对应的错误信息;
appId 参考上述方式获取;
timestamp,nonceStr可自行定义,如后台有返回数据可忽略
signature 后台会返回

4.utils.js

import axios from 'axios'
import wx from 'weixin-js-sdk'
//随机字符串
function randomString(len) {
    len = len || 32;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = $chars.length;
    var pwd = '';
    for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
},

export function wxShare() {
  var timestamp = Date.parse(new Date()) + "",
      nonceStr = randomString(32),
      url = location.href.split('#')[0],
      appId = '';

  var title = '',// 分享标题
    desc = '',// 分享文案
    link = '', // 分享链接
    imgUrl = '';// 分享图标


  return axios.get(`后台接口链接`, { params: { timestamp, nonceStr, url } })
    .then(res => res.data)
    .then(data => {
      var signature = data;
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: appId, // 必填,企业号的唯一标识,此处填写企业号corpid
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature,// 必填,签名,见附录1
        jsApiList:["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
      });

      wx.ready(function(){
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        wx.onMenuShareTimeline({
          title: title, // 分享标题
          desc: desc,
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        });

        wx.onMenuShareAppMessage({
          title: title, // 分享标题
          desc: desc,
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        });
      });
    })
}

5.页面引入

<script>
    import { wxShare } from '../../api/utils' //引入 wxShare 方法
    export default {
      mounted () {
        wxShare().catch(error => Toast(error.message))
      }
    }
</script>

此demo本萌萌试验过,无毒,如有不明白的地方,可在下方评论,本萌萌看到会回复的

2017-08-23 16:48:44 u012416928 阅读数 19054

发现使用微信js sdk开发的时候配置如下代码出现错误

配置代码:

wx.config({
  debug: false,
  appId: '<%= @jsapi["appId"] %>',
  timestamp: <%= @jsapi["timestamp"] %>,
  nonceStr: '<%= @jsapi["nonceStr"] %>',
  signature: '<%= @jsapi["signature"] %>',
  jsApiList: []
});

错误如下:

errMsg: "config:invalid signature"

事先申明所有配置都是没有问题的。因为这个错误折腾了两天,各种调试都无果。
最后看到有人说是反向代理有问题,于是我把nginx配置文件给改了一下,居然就好了,具体代码如下:

 server {
        listen       80;
        server_name  test.test.com;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_read_timeout 300;
            proxy_connect_timeout 300;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

关键nginx配置代码就是下面这个proxy_set_header Host $http_host;

proxy_set_header  X-Real-IP  $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;

按照上面的步骤修改完nginx配置文件之后,问题立马的到解决。完美!!!!!!

2019-06-21 16:19:52 sunny327 阅读数 2337

在做h5页面分享时,用到了微信的自定义分享js-sdk  。

有时会不显示自定义的图片和描述。分步骤检查出现的问题:

调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:

1.invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名,见 ]目录1.1.1)。

2.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),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

3.the permission value is offline verifying这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:

1.确认config正确通过。

2.如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。

3.确认config的jsApiList参数包含了这个JSAPI。

4.permission denied该公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中(部分接口需要认证之后才能使用)。

5.function not exist当前客户端版本不支持该接口,请升级到新版体验。

 

 

检查了这些之后,发现有时分享可以显示自定义的图片和描述,有时不可以。

1、在网上搜索说是1.4.0的版本的分享到朋友圈和发送给朋友的api(1.4.0新版本:updateTimelineShareData和updateAppMessageShareData)要用旧版本(旧版本:onMenuShareTimeline和onMenuShareAppMessage)的,但是我线上替换成旧版本的还是不行。但是看后台打印的日志是获取不到jsapi_ticket了,发现是后台的原因,只能后台人员去解决了。

2、用的是前台发送url给后台接口,这个url需要encodeURIComponent,后台再decodeURIComponent,然后后台接口返回timestamp  、nonceStr和signature,代码如下:

$(function () {
  var winUrl = window.location.href.split("#")[0];
  /* if(winUrl.indexOf('from=singlemessage')>0 || winUrl.indexOf('isappinstalled')>0){
    winUrl = winUrl.split('?from=singlemessage')[0]
  } */
  var meta = document.getElementsByTagName('meta');
  var share_desc = '';
  for (i in meta) {
    if (typeof meta[i].name != "undefined" && meta[i].name.toLowerCase() == "description") {
      share_desc = meta[i].content;
    }
  }
  $.ajax({
    type: "post",
    url: "/post/getShareSignature",
    crossDomain: true,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
      "articleUrl": encodeURIComponent(winUrl)
    }),
    success: function (msg) {
      //console.log(" timestamp:" + msg.data.timestamp + " ; noncestr:" + msg.data.noncestr + ";  signature:" + msg.data.signature);

      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: "wx91f855a7c7f4187b", // 必填,公众号的唯一标识
        timestamp: msg.data.timestamp, // 必填,生成签名的时间戳
        nonceStr: msg.data.noncestr, // 必填,生成签名的随机串
        signature: msg.data.signature, // 必填,签名,见附录1
        jsApiList: ['onMenuShareTimeline',
          'onMenuShareAppMessage'
        ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
      });
      wx.ready(function () {
        var title, img_url;
        if (winUrl.indexOf('post') != -1) {
          //IOS系统分享时读取图片路径会出现问题 用 encodeURI 来处理下
          title = $("#articleTitle").val();
          img_url = encodeURI($("#coverImg").val());


        } else if (winUrl.indexOf('school') != -1) {
          title = document.title;
          img_url = encodeURI($("#schoolBadge").attr("src"));
        } else if (winUrl.indexOf('seventy') != -1) {
          title = document.title;
          img_url = encodeURI('https://xsn.com.cn/fileDir/cnypaData/seventy.jpg');
        } else {
          title = document.title;
          img_url = encodeURI(location.href.split('.cn/')[0] + '.cn/img/Group.png')
        }
        //分享到朋友圈
        wx.onMenuShareTimeline({
          title: title, // 分享标题
          link: winUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: img_url, // 分享图标

          success: function () {
            console.log('已分享');
          },
          cancel: function () {
            console.log('已取消');
          },
          fail:function(res){
            alert(JSON.stringify(res))
          }
        }); //分享给微信好友
        wx.onMenuShareAppMessage({
          title: title, // 分享标题
          desc: share_desc,
          link: winUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: img_url, // 分享图标
          type: '', // 分享类型,music、video或link,不填默认为link

          success: function () {
            console.log('已分享');
          },
          cancel: function () {
            console.log('已取消');
          },
          fail:function(res){
            alert(JSON.stringify(res))
          }
        });


        wx.error(function (res) {
          console.log("res:", res)
        })
      });


    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      console.log("error" + errorThrown);
    }
  });





})

//  微信js - sdk分享 end

3、另一个原因是后台只缓存了acess_token,没有缓存jsapi_ticket。这就又把问题抛到后台了(大笑,来回踢皮球,哈哈哈)。然后只能后台去找原因了。从后台打印出的日志来看,凡是分享不显示图片和描述的,都是jsapi_ticket没获取到为null,分析有可能是没有缓存jsapi_ticket导致的,微信这边做了限制,必须缓存jsapi_ticket和access_token。

参考链接:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115   附录5-常见错误及解决方法  这里微信有说明。官网帮你找问题。哈哈哈

https://segmentfault.com/q/1010000002520634

没有更多推荐了,返回首页