微信分享問題總結


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也可以直接獲取火星坐標。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM