H5微信分享的坑

来源:https://www.cnblogs.com/murenziwei/archive/2020/03/09/12436078.html
-Advertisement-
Play Games

H5微信是沒有直接分享的功能,想要微信分享,只能用微信內置好的分享菜單,所以,想自定義微信直接分享的朋友們,趁早換種方式吧,比如改為二維碼形式也不錯 前言 微信jssdk文檔介紹的微信分享api不詳細,坑賊多,還限制多,太霸道了 微信分享的坑 在可以調用微信jssdk的基礎介面前提下,調起分享介面, ...


H5微信是沒有直接分享的功能,想要微信分享,只能用微信內置好的分享菜單,所以,想自定義微信直接分享的朋友們,趁早換種方式吧,比如改為二維碼形式也不錯

前言

微信jssdk文檔介紹的微信分享api不詳細,坑賊多,還限制多,太霸道了

微信分享的坑

在可以調用微信jssdk的基礎介面前提下,調起分享介面,相信我,微信一定早早挖好了一個個坑在等著你跳進去..

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
  wx.updateAppMessageShareData({ 
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接,該鏈接功能變數名稱或路徑必須與當前頁面對應的公眾號JS安全功能變數名稱一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
});

1、分享鏈接無效

解:登錄微信公眾平臺 --> 公眾號設置 --> 功能設置 --> 填寫“JS介面安全功能變數名稱”  

2、分享標題和描述不能出現敏感辭彙,分享圖標鏈接要能訪問,比如:紅包、錢...

3、permission denied該公眾號沒有許可權使用這個JSAPI,或者是調用的JSAPI沒有傳入config的jsApiList參數中(部分介面需要認證之後才能使用)。

4、簽名錯誤(這個就是最狗血的,費了兩天時間才解決)

   我開發的過程中,config配置信息是從後臺請求的,也就是以下信息

  appId: '', // 必填,公眾號的唯一標識
  timestamp: , // 必填,生成簽名的時間戳
  nonceStr: '', // 必填,生成簽名的隨機串
  signature: '',// 必填,簽名

   前端直接現用請求到的配置信息註入許可權驗證配置,那時我還自以為絕對沒有錯的,那是因為我主要經歷了這些:

    1:用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗簽名是否正確(no problem)

    2:確認config中nonceStr(js中駝峰標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致(no problem)

 3:確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認),包括'http(s)://'部分,以及'?'後面的GET參數部分,但不包括'#'hash後面的部分。(後臺確認url沒有#號)

 4:確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。(no problem)

    5:確保一定緩存access_token和jsapi_ticket。(沒問題啊)

    雖然這些是沒問題的,但是控制臺上依然列印的是“invalid signature”,那不變的字眼是那麼赤裸裸...

    

    萬惡的bug啊,你能告訴我到底你在開發者心目中的仇恨值嗎?

 

 

      6:我再次惡補了jssdk說明文檔,在文檔網頁旮旯角落裡發現瞭解決方法:

       確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名,前端需要用js獲取當前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享後的頁面簽名失敗。

       是這樣的,起初我並不理解這句話的意思,以為這問題不會落到我身上,當第二次看這句話的時候,我陷入了沉思...

 

 

 

 

 

 

 

 

 ...

就是它,就是它,後臺用的url和客戶端上的頁面路徑不一樣,導致簽名無效,想要解決這個問題,前端把當前頁面除去'#'hash部分的鏈接傳給後臺,後臺用這個url來生成簽名

有一件事也不知道氣不氣人~,在我將要解決問題的時候,恰恰在網頁文檔上某個位置發現了某個註意事項:同一個url僅需調用一次,對於變化url的SPA的web app可在每次url變化時進行調用,這是要懲罰我不認真閱讀文檔嗎?好,我認錯

 

結束: 如果你調用分享介面沒有反應,卻不報錯的話,恭喜你,這個分享介面沒問題。如果你仔細看文檔的話,分享介面說的是自定義,自定義....,不是直接分享這功能...

 

 

 

 

 最終還是要打開微信內置的分享菜單,然後直接分享....

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Over()分析函數 說明:聚合函數(如sum()、max()等)可以計算基於組的某種聚合值,但是聚合函數對於某個組只能返回一行記錄。若想對於某組返回多行記錄,則需要使用分析函數。 rank()/dense_rank over(partition by ... order by ...) 說明:ov ...
  • 開心一刻 樓主:來,我們先排練一遍 小伙伴們:好 嘿、哈、嚯 樓主:非常好,就是這個節奏,我們開始吧 樓主:啊、啊、啊,疼 ! 你們是不是故意的 ? 回表與覆蓋索引 正式講 ICP 之前了,我們先將相關的概念捋一捋,知道的就當回顧,不知道的就當瞭解了,這有助於對 ICP 的理解 建個示例表 tbl_ ...
  • 新聞 1. "Pixel 4a真機照曝光:谷歌首次採用挖孔設計 小巧的塑料材質單手新機" 1. "Android 11 Developer Preview首次更新發佈" 1. "[圖]Android 10獲新功能:分享菜單可固定常用應用程式" 1. "[視頻]新Feature Drop彙總:Pixe ...
  • 通過jQuery實現用戶註冊身份驗證,當每個文本框失去焦點時進行該文本框內容校驗,並將校驗信息在文本框右側顯示出結果。 ...
  • 常用的偽類和css選擇器: :required :optional 必填元素和選填元素 :in-range :out-of-range 在範圍之內和不在範圍之內 :valid :invalid 符合要求的和不符合要求的 :read-only :read-write 只讀和可讀可寫 ( :read-w ...
  • HTML5約束驗證API: willValidate 表示如果元素的約束沒有被符合則值為 false validity validationMessage 用於描述與元素相關約束的失敗信息。 checkValidity() 表示如果元素沒有滿足它的任意約束,返回false,其他情況返回 true s ...
  • 概述 Proxy 與 Reflect是 ES6為了操作對象引入的 API 。Proxy可以對目標對象的讀取、函數調用等操作進行攔截,然後進行操作處理。它不直接操作對象,而是像代理模式,通過對象的代理對象進行操作,在進行這些操作時,可以添加一些需要的額外操作。 Proxy的存在就相當於 在對象的讀取、 ...
  • 0.獲取源碼 https://github.com/vuejs/vue 從github地址,直接download下來就行了。在新建項目的時候也可以node_modelus里的vue搭配著看。 1.數據的掛載 首先先引入vue,然後新建他的實例。 首先我們得知道我們引入 的是個什麼東西。所以我們找到源 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...