热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

下面小编就为大家分享一篇基于IOS端微信分享失效的踩坑及解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近的一个公众号是基于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.config
router.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初始化的问题(或者是我没有找到)。囧

通过如上修改以后,我们的公众号在IOS和android端的分享功能都可以正常的跑起来啦。

以上这篇基于IOS端微信分享失效的踩坑及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 当iOS设备越狱后,某些插件可能会导致系统崩溃(白苹果)。此时,可以通过进入安全模式来排查并删除有问题的插件。本文将详细介绍如何通过特定按键组合进入不加载MobileSubstrate的安全模式,并提供相关背景知识。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 网络运维工程师负责确保企业IT基础设施的稳定运行,保障业务连续性和数据安全。他们需要具备多种技能,包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]
author-avatar
gaoyizhen92
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有