基于IOS端微信分享失效的踩坑及解決方法

2020-07-26 02:32:47

字體：大中小

來源：轉載

供稿：網友

最近的一個公眾號是基于vue的spa應用，在接入微信分享和微信語音的時候出現了：在Android上一切正常，但是在ios端調用wx.config的時候總是失敗，去翻了官方文檔也并沒有找到解決方案，最后在測試中發現是因為初始化的時候傳入的URL的問題。具體過程如下：

微信config接口配置，官方文檔如下：

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

官方明確給出SPA在每次url變化時進行調用,于是我們的最初代碼如下：

// 此處在main.js中，在vue-router每次改變路由的時候去調用wx.configrouter.beforeEach((to, from, next) => { let url =`www.example.com`; let getConfig = async function(url) {  // res為后端接口中返回的config  const res = await get_config(url);  wx.config(res);  console.log(res); };}) // 此部分為微信分享 var config = {  title: 'title', // 分享標題  desc: 'desc', // 分享描述  link: 'link', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致  imgUrl: `image',  success: function() {   console.log(success)  },  cancel: function() {    console.log(failf)  } }; wx.ready(() => {  wx.onMenuShareAppMessage(config);  wx.onMenuShareTimeline(config); });

上邊的代碼在安卓端運行時一切正常。

但是我們測試的時候在IOS端分享等功能全部失效，后來我們仔細排查，發現是在初始化config的問題，

我們發現在IOS端只需要在==網站根目錄中初始化一次即可==，所以我們對代碼進行了修改，如下:

1、先判斷當前環境

//通過userAgent判斷IOS環境 let isIOS = function() {  var isIphone = navigator.userAgent.includes('iPhone'）;  var isIpad = navigator.userAgent.includes('iPad');  return isIphone || isIpad; };// 如果是IOS系統，則只在根路徑初始化config if (isIOS()) {  if (to.path === '/') {   getConfig(url);   next();  } else {   next();  } } else {  getConfig(url);  next(); }

最終我們的代碼如下：

router.beforeEach((to, from, next) => { let url = `*****`; let getConfig = async function(url) {  const res = await get_config(url);  wx.config(res);  console.log(res); }; let isIOS = function() {  var isIphone = navigator   .userAgent   .includes('iPhone');  var isIpad = navigator   .userAgent   .includes('iPad');  return isIphone || isIpad; }; var config = {  title: '*****', // 分享標題  desc: '******', // 分享描述  link: '***************', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致  imgUrl: `*****`,  type: 'link',  dataUrl: '',  success: function() {},  cancel: function() {} }; wx.ready(() => {  wx.onMenuShareAppMessage(config);  wx.onMenuShareTimeline(config); }); if (isIOS()) {  if (to.path === '/') {   getConfig(url);   next();  } else {   next();  } } else {  getConfig(url);  next(); }});

“*”部分為開發者自定義內容

最坑爹的是微信文檔并沒有提及關于IOS初始化的問題（或者是我沒有找到）。亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb