微信分享问题总结

时间:2024-02-21 14:20:17

1.首先要判断一下是否微信公众号配置正确

 

 

 

 

 JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要求将当前的界面url加密后,才可以分享到朋友圈。
采用前后端分离开发时,js-sdk的验证参数通过php接口获得时,会报invalid signature错误。解决方法:前端将当前的window.location.href传到php接口,php代码中将下图中的$url换成前端传过来的url,生成验证相应参数,再返回,在生成分享链接时才不会出错

.网页授权域名:用于获取用户针对于公众号的唯一标识openid。但只能添加一个域名。我设置为一级域名后,同一服务器上,通过二级域名访问的就不能通过网页授权了。我的解决方法是,将网页授权的redirect_uri设置为php接口,这样,用户点击https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4e2480691f223ba7&redirect_uri=http://xxx/xxx.php &response_type=code&scope=snsapi_base&state=1#wechat_redirect
。在php接口中拿到code,调微信的接口,换取openid,再跳转回前端界面,同时把openid带回去。

 

微信公众号获取用户信息

公众号 h5 页面开发过程中,一般都有获取用户基本信息的需求,比如用户头像、openId 等。要在指定的 h5 页面获取用户信息,必须要登录公众号,将该页面下的域名添加到微信公众号网页授权域名列表中。

设置微信公众号网页授权域名

网页授权域名设置入口

首先,登录公众号,然后依次找到:开发→接口权限→网页授权→修改,如下图:


 

 

 

网页授权域名入口1

点击修改(如果是第一次添加,按钮文案记得不是“修改”),进入如下页面:


 

 

 

网页授权域名入口2

点击网页授权域名右侧的 “设置” 按钮,出现一个弹窗:

添加网页授权域名

 

 

 

 

添加网页授权域名

仔细阅读弹窗的文案,得出的结论是:先下载那个 *.txt 文件,然后经过一定配置后,当访问 http://your_domain/*.txt 时,返回的结果是该文件里边的内容。

 

下载txt文件

首先,把 *.txt 文件下载到本地,如果打开该文件,可以看到只有一串字符串,如下:

 

 

 

*.txt文件内容

 

微信公众号js接口安全域名的MP_verify_*.txt文件的放置路径

最近做项目,发现按在微信端调起扫一扫时会出现你当前得域名不安全的错误,而且在微信网页授权认证的时候你的当前域名也必须时安全域名,之后才发现要去微信公众号上配置安全域名,但是配置了安全域名之后,发现一直时无法保存的,而且访问的时候还是原来的错误,

后来发现是自己,将微信验证安全域名的文件放错了位置,时因为 自己的服务器上做了nginx的负载均衡,而微信默认来找文件的时候时在80端口去找的所以,再你进行负载均衡时,应先将安全域名配置好;

这篇文章就来说说这个安全验证文件的放置:

首先时安全域名:

 

 

 

 

 

注意:此文件在每个月只支持修改三次,所以要谨慎啊,不然就得等到下个月了;

在填写安全域名的时候,也要填写正确 没有http:// 只需填写域名即可;

一般如果没有配置负载均衡的时候,把此文件放到tomcat的webapps目录下之后,即可保存安全域名;

但是在配置了之后可能会出现404的问题,这是又两种就解决方案,

一种就是在你配置负载均衡之前将安全域名保存好;

另一种就是遵从nginx的配置,第一种就不多说了,直接将相应的文件保存在相应的文件夹下即可;

来看看第二种:

首先来看看nginx的安装目录:

1 查nginx进程信息,找到nginx全局配置:ps -ef | grep nginx

 

 

 

2 查看nginx全局配置具体信息:cat /data/server/nginx/conf/nginx.conf

找到具体配置文件,实在配置文件的include语句之中,若是你的root 时直接在配置文件当中去配置的,则直接在这个配置文件当中去修改即可,

 

 

 

若是包含进来的 ,则查看nginx默认配置文件default.conf,找到根路径;

如下入所示我们找的就是这个文件目录:

 

 

 

如上图,nginx监听8080端口

root即为根路径;

我们简单介召一下nginx的配置文件:

以下例子展示来说明:

 1 #在http标签内部,配置需要进⾏行行负载均衡的N台服务器器,添加:
 2  upstream server_xph{           
 3  server 10.211.55.12:8180;           
 4  server 10.211.55.12:8280; 
 5 } 
 6 #其中 server_xph代表是别名,内部指向多台服务器器 
 7 #然后在server标签修改添加:
 8  #location 代表访问的路路径,当前代表访问 ngnix 的根路路径 
 9 #proxy_pass代表转发到什什么地址,后⾯面填写 别名 就可以,它会⾃自动从别名的服务器器列列表中选择⼀一个地 址进⾏行行访问 
10 location / {           
11  proxy_pass   http://server_xph;       
12  }  
13  # 如果只做⼀一台机器器的反向代理理,则不不需要配置别名,只需要将proxy_pass 的值设置为具体的访问地址即可
14  
15 还有一种表示的方式 就是加权重 weight例如:
16     upstream backend {  
17         server a weight=5;  
18         server b weight=3;  
19         server c weight=1;  
20     }
21 Nginx中设置反向代理的时候,能够指定反向代理中每一个后端服务器所占的比重, 起到负载均衡的作用;
22  
23 这样分配的结果就是:
24 设置了三台后台服务器,所占的比重分别为5,3,1。 那么如何做到在收到请求的时候, 按照比例分配到后台的三台服务器呢。 能想到的最简单的方法当然是:如果当前权重大于0,就发往这台服务器,然后权重减1, 但是这种方法分发的请求结果就是[a,a,a,a,a,b,b,b,c], 虽然达到了目标的比例,但是有一段时间请求都发往了a, 另一段都发往了b,这显然不是一种好的处理方式,对每台机器来说相当于忙一阵,闲一阵,并没有平均的收到请求。并不能满足要求,所以有一种配置就是weighted round robin (WRR),这是一种算法这个之后我们在讨论;
25 但是下面这样配时又有作用的
26   upstream  aa.com {
27            server 。。。。(服务器地址):8080 weight=1;
28     }
29 这样在访问时 优先回去你配置权重的服务器,若是又优先的需求可以这样做
30  
31 server 当中root 表示优先访问的服务;
32  
33 重新启动nginx即可,命令: nginx -s reload



 





回归正题:

再找到root目录之后: 把MP_verify_*.txt文件放到此根路径即可

5.测试,访问http://+域名端口+/+文件名,此时就会显示一串字符就是你那个文件内的字符喜欢,即此txt的内容同时也是此txt文件名MP_verify_HGl1Jnp7lVfvnO5j中的关键识别符,成功。

也可访问http://你的域名/+文件名,返回同样的字符串。

至此配置完成;

配置nginx

因为服务器使用 nginx 做代理,所以直接添加几行配置,即可达到目的。

 
 
配置nginx

 

 

 

配置如下:

server {
    listen 80;
    server_name 域名;

    location /txt文件名 {
        default_type text/html;
        return 200 \'txt文件内容\';
    }
}

上面配置的意思为:监听80端口,如果有请求进来,且域名为目标域名,然后请求的 uritxt文件名,那么返回 txt 文件内容。

配置完成后:

# 测试
$ nginx -t
# 重新加载配置
$ nginx -s reload

测试

在浏览器地址栏输入http://your_domain/*.txt,如果成功返回 txt 文件的内容,那么可以放心的把域名添加到微信网页授权域名列表中。

把域名添加到网页授权域名

 

 

 

 
添加网页授权域名
 
后端需要看一下配置路径是否与分享路径一致
很多时候的错误并不是前端方法或者sdk等问题,而是后台有没有设置正确的安全域名和白名单等.

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


 微信分享链接出现config:invalid signature错误的解决方法

开发微信时需要做特定的页面做分享时,根据官方提供的jssdk.php文件创建的签名数据包调试时,大家碰到的最多的错误而且解决最麻烦的大概就是signature错误了,如下图:

微信分享链接出现config:invalid signature错误的解决方法

分享时提示错误“{“errMsg”:“config:invalid signature”}”

一般出现这个错误多半是签名获取失败,而造成签名获取失败的原因各种各种,余斗在开发的时候也遇到过这种情况,搜索了不少网上教程,解决了自己的问题。接下来,余斗将这些解决方法统一整理列出来,希望可以帮到大家:

1、APPID和APPSECRET填错

这个错误可以到官方的调试页面获取access_token看看是否是正确,点击获取获取access_token

根据返回的结果可以判断页面内的APPID和APPSECRET有没有出错,没有出错的话可以点击获取jsapi_ticket

利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。

点击进行确认签名算法校验

点击查看全局返回码说明

2、超过了每日的access_token获取上限

官方限定每日2000次请求,所以如果没有缓存access_token的话,还是比较容易过限的。

3、查看微信公共号状态是否不正常

比如验证过期了,被封禁了等。

4、确认config中nonceStr

js中驼峰标准大写S, timestamp与用以签名中的对应noncestr, timestamp一致。

5、确认url是页面完整的url

请在当前页面alert(location.href.split(’#’)[0])确认,包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#\'hash后面的部分,这里在文章《静态页面实现微信分享带缩略图、标题和描述》最后已做说明,大家可以自行修改好。

6、配置curl是否使用ssl的带证书(https协议)访问开关

找到官方提供的jssdk.php,找到代码:

curl_setopt(c u r l , C U R L O P T S S L V E R I F Y P E E R , t r u e ) ; c u r l s e t o p t ( curl, CURLOPT_SSL_VERIFYPEER, true); curl_setopt(curl,CURLOPTSSLVERIFYPEER,true);curlsetopt(curl, CURLOPT_SSL_VERIFYHOST, true);

将true改为false,因为一般我们是没有安装证书的(https协议),所以将true改为false就好,反之,如果网站安装了证书,则将false改为true。

7、将网站所在服务器IP地址加入白名单

微信分享链接出现config:invalid signature错误的解决方法

8、反向代理问题

如果以上查验绝没有解决问题,则查看下自己的服务器是否反向代理没有设置好,nginx配置反向代理代码:

proxy_set_header Host $http_host;

转载:https://www.yudouyudou.com/jiaochengheji/wangzhanjianshe/1237.html

IOS分享的时候图片的链接地址 和 link 都需要在 JS安全域名下并且带http头。

 1 <body>    
 2     <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 3     <script type="text/javascript">
 4         wx.config({
 5             debug: false,
 6             appId: \'@ViewBag.AppId\',
 7             timestamp: @ViewBag.ts,
 8             nonceStr: \'@ViewBag.noncestr\',
 9             signature: \'@ViewBag.signature\',
10             jsApiList: [
11               \'onMenuShareTimeline\',
12               \'onMenuShareAppMessage\',           
13             ]
14         });
15         wx.ready(function() {
16             //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后
17             var sharetitle=\'@ViewBag.Name 正在参加浦软梦想加油站活动。\';
18             var sharedescript=\'请你为我点亮梦想,快来一起参加吧! \';
19             var sharelink=\'http://xxx.com/h5.html\';
20             var shareimgurl=\'http://m.xxx.com/Content/skin/images/cover.png\';
21  
22             var shareData = {
23                 title: sharetitle,
24                 desc: sharedescript,
25                 link:sharelink,
26                 imgUrl:shareimgurl
27             };
28             //分享给朋友
29             wx.onMenuShareAppMessage({
30                 title: sharetitle,
31                 desc: sharedescript,
32                 link: sharelink,
33                 imgUrl:shareimgurl,
34                 trigger: function (res) {
35                     // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
36                     alert(\'用户点击发送给朋友\');
37                 },
38                 success: function (res) {
39                     alert(\'已分享\');
40                 },
41                 cancel: function (res) {
42                     alert(\'已取消\');
43                 },
44                 fail: function (res) {
45                     alert(JSON.stringify(res));
46                 }
47             });    
48             
49             //分享给朋友圈
50             wx.onMenuShareTimeline({
51                 title: sharetitle,
52                 link: sharelink,   
53                 desc: sharedescript,
54                 imgUrl:shareimgurl,
55                 trigger: function (res) {
56                     // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
57                     // alert(\'用户点击分享到朋友圈\');
58                 },
59                 success: function (res) {
60                     // alert(\'已分享\');
61                 },
62                 cancel: function (res) {
63                     // alert(\'已取消\');
64                 },
65                 fail: function (res) {
66                     // alert(JSON.stringify(res));
67                 }
68             });
69  
70             wx.onMenuShareAppMessage(shareData);
71             wx.onMenuShareTimeline(shareData);
72         });
73         wx.error(function(res){
74             // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
75             alert(JSON.stringify(res));
76         });
77     </script>
78 </body>

 

二、IOS微信分享朋友圈成功后,不进入回调SUCCESS

安卓机器微信分享成功之后,是可以进入回调,但是,部分IOS的机器却不进入回调

直接引入最新的微信jweixin.js 我引入的是

https://res.wx.qq.com/open/js/jweixin-1.3.2.js

问题就这样解决了

三、IOS环境下,微信分享失效问题

最近在做一个公众号,涉及到分享的功能,但是在安卓机上,自定义的分享配置参数能够被触发,而在ios苹果手机上却失效了,苦苦寻觅在百度上搜索解决办法,但都没有效果,,配置参数如下:

1 var content = {
2         title: \'您的好友邀请你办信用卡啦\', // 分享标题
3         desc: \'邀请好友办信用卡得奖金\', // 分享描述
4         link: \'http://ppl.hzqzinfo.com/cc-wechat/share.html?openId=\'+sessionStorage.openId+"&username="+sessionStorage.user_name+"&picid="+sessionStorage.picid, // 分享链接
5         imgUrl: \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524029663610&di=3ace946ecf6b963b1fa1c47a7c94c25c&imgtype=0&src=http%3A%2F%2Fwww.68ecshop.com%2Fecshop_topic%2FDistribution%2Fimages%2Ficon_home.png\', // 分享图标
6         success: function () {},
7         cancel: function () {}
8     };
  1. ios分享图标不能超过32K
  2. link参数带中文或者特殊字符,带中文的url在安卓中应该也是会出问题的,但是安卓会自动encodeURIComponent(),而ios不会

我马上想到我的url参数中带了中文字符,于是乎将其encodeURIComponent()编码,再提交代码,ios上完美运行!!
以下是修改后的配置:

var content = {
        title: \'您的好友邀请你办信用卡啦\', // 分享标题
        desc: \'邀请好友办信用卡得奖金\', // 分享描述
        link: \'http://ppl.hzqzinfo.com/cc-wechat/share.html?openId=\'+sessionStorage.openId+"&username="+encodeURIComponent(sessionStorage.user_name)+"&picid="+sessionStorage.picid, // 分享链接
        imgUrl: \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524029663610&di=3ace946ecf6b963b1fa1c47a7c94c25c&imgtype=0&src=http%3A%2F%2Fwww.68ecshop.com%2Fecshop_topic%2FDistribution%2Fimages%2Ficon_home.png\', // 分享图标
        success: function () {},
        cancel: function () {}
    };

 

微信自定义分享链接和图文准备:

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API 这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:

 

 

  1. 微信认证过的公共号
    必须是认证过的,未认证或者认证过期都不行
  2. 一个域名
    需要备案过的
  3. 一台服务器
    因为前端页面需要的appIdsignature是需要后台传递过来的。官方默认后台程序有PHPPythonNodeJava版本,不过我这里以PHP作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)
  4. 配置过程

    1. 绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)

    2. 获取access_token

    这部分工作属于后台开发,主要功能是利用公共号APPIDAPPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。 下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP为例)。
    1. 将下载得到的压缩包解压后复制php文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为.php(必须。因为后台不完善所以不能直接ajax获得access_token的值,这里假设需要分享的html页面是index.php
    2. 打开index.php,在html的DOCTYPE声明之前添加一段PHP代码:
      <?php
      require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/
      $jssdk = new JSSDK("你的APPID", "你的APPSECRET");
      $signPackage = $jssdk->GetSignPackage();
      ?>
    这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存access_token,很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)

    3. 前端配置验证权限

    这里是前端的工作,主要是利用前一步得到的access_token来获取签名等认证信息,只有正确的配置才可以正常获取到使用官方js-sdk的权限。 1.引入JS文件 在index.php文件里添加一个script标签,引用官方js:
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    1. 通过config接口注入权限验证配置
      <script>
          wx.config({
              debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息
              appId: \'<?php echo $signPackage["appId"];?>\',
              timestamp: \'<?php echo $signPackage["timestamp"];?>\',
              nonceStr: \'<?php echo $signPackage["nonceStr"];?>\',
              signature: \'<?php echo $signPackage["signature"];?>\',
              jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来
                  \'checkJsApi\',
                  \'onMenuShareTimeline\',//
                  \'onMenuShareAppMessage\',
                  \'onMenuShareQQ\',
                  \'onMenuShareWeibo\'
              ]
          });
      </script>

      上面的属性都是必须的,不过都不需要自行填写。这里只使用了几个分享相关的jsApiList,完整列表见官网说明

    2.  

      配置分享信息并通过ready接口处理
      <script>
      window.share_config = {
           "share": {
              "imgUrl": "http://www.yourwebsite.com/share.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
              "desc" : "你对页面的描述",//摘要,如果分享到朋友圈的话,不显示摘要。
              "title" : \'分享卡片的标题\',//分享卡片标题
              "link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。
              "success":function(){//分享成功后的回调函数
              },
              \'cancel\': function () { 
                  // 用户取消分享后执行的回调函数
              }
          }
      };  
          wx.ready(function () {
          wx.onMenuShareAppMessage(share_config.share);//分享给好友
          wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
          wx.onMenuShareQQ(share_config.share);//分享给手机QQ
      });
      </script>

      share_config里的四个属性在分享卡片里代表的含义如下图所示: img:

    3.  

       到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。

      分享信息配置失败的调试方法

      有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图,而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面,微信也给了调试接口,官方也有部分说明

      1. 打开wx.config里的debug 将debug设置为true之后,手机进入页面,会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息,参考意义不是很大——不过可以拿来查看链接是否有误)。 如果正确的话,会提示{"errMsg":"config:ok"}
      2. 提示{"errMsg":"config:invalid url domain"}

        这个最常见,主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的APPID对应的公共号绑定,不过我实际使用中发现应该也可以分离。另外如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名)
      3. 提示{"errMsg":"config:invalid signature"}

        造成这个情况的可能性比较多。不过主要有以下三个原因:
        1. APPIDAPPSECRET填错了。 可以到官方的调试页面获取access_token看看是否是正确的
        2. 超过了每日的access_token获取上限 官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。
        3. 微信公共号状态不正常。 比如验证过期了,被封禁了等等。
      4. 常用的接口调试链接以及说明文档:

        获取access_token https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token
        根据返回的结果可以判断页面内的APPIDAPPSECRET有没有出错
        获取jsapi_ticket https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
        利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。
        全局返回码说明 http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html 接口频率限制说明 http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html

      分享到微信朋友圈和微信好友的区别

      wx.ready(function () {
              var link = window.location.href;
              var protocol = window.location.protocol;
              var host = window.location.host;
              //分享朋友圈
              wx.onMenuShareTimeline({
                  title: \'这是一个自定义的标题!\',
                  link: link,
                  imgUrl: protocol+\'//\'+host+\'/resources/images/icon.jpg\',// 自定义图标
                  trigger: function (res) {
                      // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回.
                      //alert(\'click shared\');
                  },
                  success: function (res) {
                      //alert(\'shared success\');
                      //some thing you should do
                  },
                  cancel: function (res) {
                      //alert(\'shared cancle\');
                  },
                  fail: function (res) {
                      //alert(JSON.stringify(res));
                  }
              });
              //分享给好友
              wx.onMenuShareAppMessage({
                  title: \'这是一个自定义的标题!\', // 分享标题
                  desc: \'这是一个自定义的描述!\', // 分享描述
                  link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: protocol+\'//\'+host+\'/resources/images/icon.jpg\', // 自定义图标
                  type: \'link\', // 分享类型,music、video或link,不填默认为link
                  dataUrl: \'\', // 如果type是music或video,则要提供数据链接,默认为空
                  success: function () {
                      // 用户确认分享后执行的回调函数
                  },
                  cancel: function () {
                      // 用户取消分享后执行的回调函数
                  }
              });
              wx.error(function (res) {
                  alert(res.errMsg);
              });
          });

      微信自定义分享,Invalid Signature, updateAppMessageShareData: denied等问题

    4. 一、Invalid Signature

      1.因为项目内是Vue中的hash模式,所以遇到这个问题时,一直怀疑hash模式是不是不可以。——其实可以,hash和history都可以;记得 encodeURIComponent(location.href.split(\'#\')[0])

      2.按照官方文档的步骤去排查错误:
      (1)确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。——这个问题主要在后台那里,要点:1.公众号后台配置ip白名单以及JS安全域名。重点:ip白名单记得要配后台线上服务器的ip,否则线上后台是拿不到asscee_token的,access_token为null时也可以参与signature的计算,很坑!!!建议让后台把access_token和jsapi_ticket返回或者让后台看看到底有没有返回值;2.记得拿公众号的APPID去计算,一定要后台亲眼去比对,APPID对不对!(2)确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。——这一步没啥好说的,自己好好检查

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

      (4)确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

      (5)确保一定缓存access_token和jsapi_ticket。

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

      二、the permission value is offline verifying

      (1)确认config正确通过。——记得在页面挂在完毕去注入JSSDK,如果有路由拦截跳转的,要跳转完毕后再去注入,要保证注入的页面url和调用分享接口的url是一模一样(encodeURIComponent(location.href.split(\'#\')[0]))

      (2)如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。——wx.ready的回调去写分享逻辑

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

      三、permission denied

      (1)先去微信公众平台 看看公众号没有权限使用这个JSAPI

      (2)可以调用jweixin.checkJsApi,记得把debug打开,微信开发者工具和真机报的错误很大可能会不一样。引用的最新的jssdk 1.6;也用了最新的分享给好友的方法;真机 updateAppMessageShareData: true; updateTimelineShareData: true; config: ok,就是分享不了,我真是吐了,


      如果遇到同样的情况,记得jsApiList加入 onMenuShareAppMessage,没错就是老版本,那个即将废弃的分享api

      export class Wx {
      
        constructor (jsApiList = [\'updateAppMessageShareData\', \'onMenuShareAppMessage\' , \'closeWindow\']) {
          this.isWeiXin = this.isInWx()
          this.wxJssdkInfo = {}
          this.jsApiList = jsApiList
        }
      
        isInWx () {
          return navigator.userAgent.toLowerCase().indexOf(\'micromessenger\') > -1 ? true : false
        }
      
        async _initJssdk (callback) {
          try {
            let auth_url = encodeURIComponent(location.href.split(\'#\')[0])
            let params = { auth_url }
            this.wxJssdkInfo = await fissionApi.getWxAuth(params)
            jweixin.config({
              debug: IS_PRO() ? false : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              appId: this.wxJssdkInfo.app_id, // 必填,公众号的唯一标识
              timestamp: this.wxJssdkInfo.timestamp, // 必填,生成签名的时间戳
              nonceStr: this.wxJssdkInfo.noncestr, // 必填,生成签名的随机串
              signature: this.wxJssdkInfo.signature,// 必填,签名
              jsApiList: this.jsApiList // 必填,需要使用的JS接口列表
            })
            jweixin.error(res => console.log(res))
            if (callback) {
              callback(this.wxJssdkInfo)
            }
          } catch (err) {
            console.log(err)
          }
        }
        share (title, desc, link, imgUrl, successCallback) {
          link = link || window.location.href; 
          if(!this.isWeiXin) return
          this._initJssdk(() => {
            jweixin.ready(() => {
              jweixin.checkJsApi({
                jsApiList: this.jsApiList, // 需要检测的JS接口列表,所有JS接口列表见附录2,
                success: function(res) {
                  if (res.checkResult.updateAppMessageShareData || res.checkResult.onMenuShareAppMessage) {
                    jweixin.onMenuShareAppMessage({
                      title, 
                      desc, 
                      link, 
                      imgUrl, 
                      success: res => successCallback && successCallback(res),
                      fail: function(error) {
                        console.log(\'updateAppMessageShareData error:\', error);
                      }
                    })
                    jweixin.onMenuShareAppMessage({
                      title, 
                      desc, 
                      link, 
                      imgUrl, 
                      success: res => successCallback && successCallback(res),
                      fail: function(error) {
                        console.log(\'updateAppMessageShareData error:\', error);
                      }
                    })
                  }
                }
              })
            })
          })
        }
      
        closeH5 () {
          wx.closeWindow();
        }
      }

       

       3.,登录公众号看到是有权限的,但是前端却显示没权限,用的是未认证的订阅号,如果没权限的话,能不能就显示没权限呢,害得折腾好代码了,才发现没权限,注意区分公众号和订阅号,也可以根据jssdk文档常见错误解决方法排查下https://work.weixin.qq.com/api/doc/90001/90144/9054

 

   如何查看微信公众号是订阅号还是服务号

    

  1. 首先进入微信公众平台首页,如图所示

    如何查看微信公众号是订阅号还是服务号
  2.  

    点击右上角,名字的位置,在这个位置,新版的就已经可以看到了是否是订阅号还是服务号了,但是老版的是没有的。如图所示

    如何查看微信公众号是订阅号还是服务号
  3.  

    进去后,可以看到类型,上面显示什么就是什么类型,这里是服务号,如图所示。在这个位置你还可以看到是否经过认证了

    如何查看微信公众号是订阅号还是服务号
  4.  

    服务号和订阅号还是有很大的不同的,有很多的功能都不一样的

    所以是否选择服务号还的根据自己的需求来选择,不能盲目跟风,觉得服务号好就要服务号

 

 

    1. 常见错误及解决方法

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

        1. invalid url domain:当前页面所在域名与使用的corpid没有绑定(可在该应用的可信域名中配置域名)。

        2. invalid signature签名错误:建议按如下顺序检查:
          1) 确认签名算法正确,可用http://work.weixin.qq.com/api/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的corpid一致。
          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 或者 fail_nopermission:这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:
          1) 确认config正确通过。
          2) 如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。
          3) 确认config的jsApiList参数包含了这个JSAPI。

        4. permission denied:该应用没有权限使用这个接口。

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

        6. 服务上线之后无法获取jsapi_ticket,自己测试时没问题:因为access_token和jsapi_ticket必须要在自己的服务器缓存,否则上线后会触发频率限制。请确保在服务上线前一定全局缓存access_token和jsapi_ticket,两者有效期均为7200秒(以返回结果中的expires_in为准),否则一旦上线触发频率限制,服务将不再可用。

        7. uploadImage怎么传多图:目前只支持一次上传一张,多张图片需等前一张图片上传之后再调用该接口。

        8. 没法对本地选择的图片进行预览:chooseImage接口本身就支持预览,不需要额外支持。

        9. 通过a链接(例如先通过企业微信授权登录)跳转到b链接,invalid signature签名失败:后台生成签名的链接为使用jssdk的当前链接,也就是跳转后的b链接,请不要用企业微信登录的授权链接进行签名计算,后台签名的url一定是使用jssdk的当前页面的完整url除去’#’部分。

        10. 出现config:fail错误:这是由于传入的config参数不全导致,请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList。

        11. 如何把jsapi上传到企业微信的多媒体资源下载到自己的服务器:请参见文档中uploadVoice和uploadImage接口的备注说明。

        12. Android通过jssdk上传到企业微信服务器,第三方再从企业微信下载到自己的服务器,会出现杂音:企业微信团队已经修复此问题,目前后台已优化上线。

        13. 绑定父级域名,是否其子域名也是可用的:是的,合法的子域名在绑定父域名之后是完全支持的。

        14. 是否需要对低版本自己做兼容:jssdk都是兼容低版本的,不需要第三方自己额外做更多工作,但有的接口是新引入的,只有新版才可调用。

        15. getLocation返回的坐标在openLocation有偏差,因为getLocation返回的是gps坐标,openLocation打开的腾讯地图为火星坐标,getLocation也可以直接获取火星坐标。