基于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端微信分享失效的踩坑及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2018-01-06

iOS微信分享后关闭发送成功提示并返回应用

iOS 分享到微信之后返回应用关闭发送成功的提示,并自定义提示,具体内容如下 1.关闭发送成功的提示  只要在分享的时候调用一下代码即可: 复制代码 代码如下: [UMSocialConfig setFinishToastIsHidden:YES  position:UMSocialiToastPositionCenter]; 2.自定义提示  //如果点击返回app会调用这个方法 - (void)didFinishGetUMSocialDataInViewController:(UMSocia

iOS高仿微信表情输入功能代码分享

最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

iOS仿微信图片分享界面实现代码

分享功能目前几乎已成为很多app的标配了,其中微信,微博等app的图片分享界面设计的很棒,不仅能够展示缩略图,还可以预览删除.最近我在做一款社交分享app,其中就要实现图文分享功能,于是试着自行实现仿微信分享风格的功能. 核心思想: 主要是使用UICollectionView来动态加载分享图片内容,配合预览页面,实现动态添加和预览删除图片效果. 实现效果: 核心代码如下: 分享界面: // // PostTableViewController.h // NineShare // // Creat

iOS 微信分享功能简单实现

PS:此文以简单实现功能为主,不足之前还望指点,大神勿喷. 在此之前如何申请微信认证的Key就不说了,公司一般会有人搞(自己申请一个也非常的简单) 1.首先下载微信SDK:微信SDK下载地址(更多关于微信SDK信息文档请访问官方网站:微信开放平台) 2.导入微信SDK 将下载下来的SDKExport文件夹导入到工程,其中包含3个核心文件libWeChatSDK.a WXApi.h WXApiObject.h(强烈建议大家看看read-me文件) 3.在工程Build Phases -> Link

iOS实现微信分享多张图片功能

前言 微信分享到朋友圈,可分享的类型有:文字类型.图片类型.音乐类型.视频类型和网页类型,但是我们在做图片分享的时候发现微信给的API只能分享一张图片,达不到一些APP的需求,而产品汪或者Boss想要分享多张图片,比如前段时间我做的一个APP,是电商类APP,想把商品的图片都分享到朋友圈,查看微信的API根本没有提供API,在这里我们只能用iOS系统自带的分享了. UIActivityViewController UIActivityViewController是在iOS 6开始支持的,同样是不

微信支付终于成功了(安卓、iOS)在此分享

经过了几天的痛苦煎熬,终于把微信支付调通,整个调试过程很痛苦,痛苦的主要来源是微信支付的调试真的是,以前调试公众号支付也是一波三折啊.好吧,开始!首先说明,我这里主要没有使用getToken,getOrder方法,我的所有参数全部是在后端生成传递给前端的,看了一下前面朋友分享的源代码,还用到了jquery,md5,sha对于新手来说简直是天文啊,而且jquery在apicloud中效率不好,所以放弃了研究那个代码,另外官方也说了,最好签名等参数全部服务器端生成,微信也是这么说的. 注意:微信本身

IOS 集成微信支付功能的实现方法

IOS 集成微信支付功能的实现方法 第一步:集成微信的SDK https://pay.weixin.qq.com/wiki/doc/api/index.html 点击进入 下载对应SDK或示例,最后可以看看示例程序 第二步:在Xcode中填写微信开放平台申请的Appid Xcode>info>URL Types  中新建加入Appid 第三步:在Appdelegate.m 中注册微信支付 和回调 #import "WXApi.h" 添加 代理 WXApiDelegate -

android微信支付源码分享

本文为大家分享了android微信支付源码,供大家参考,具体内容如下 参数配置 public static final String APP_ID ; /** 在微信开放平台注册app,微信给分配的id **/ public static final String MCH_ID; /** 申请开通微信支付,成功后微信会给你发一封邮件,给你分配一个商户平台账号,在资料里有商户ID **/ public static final String API_KEY; /** 在微信发给你的那封邮件里,给你

IOS客户端接入微信支付

实际上,从代码的角度,调起支付APP就是把一些关键的参数通过一定方式打包成为一个订单,然后发送到支付平台的服务器.所以,只要搞清楚了参数设置,搞清楚了每个支付平台的SDK里面一些关键API的使用,基本上就可以很简单的支持支付. 今天记录一下客户端里面,如何支持微信支付.首先.我们要仔细阅读一下微信SDK的开发文档,了解一下整个支付的大概流程. 然后根据提示,把相应的SDK下载下来,所谓的SDK,也就是一个链接库和两个头文件,很简单. 下载完毕,需要把SDK导入到工程里面,并且配置一下工程.因为开

微信支付开发IOS图文教程案例

前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要知道的,打开下面链接: https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=3_1 然后可以看到下面的页面,这个就是微信支付商户平台的开发文档,很多东西是可以查阅和了解的,在开发使用微信SDK支付功能的时候,遇到了问题也可以到这找找相关须知信

iOS集成微信支付开发

本文实例为大家分享了iOS集成微信支付开发代码,供大家参考,具体内容如下 首先需要理清楚流程: 1.用户使用APP客户端,选择商品下单. 2.商户客户端(就是你做的APP)将用户的商品数据传给商户服务器,请求生成支付订单. 3.商户后台调用统一下单API向微信的服务器发送请求,微信服务器生成预付单,并生成一个prepay_id返回给商户后台. 4.商户后台将这个prepay_id返回给商户客户端. 5.用户点击确认支付,这时候商户客户端调用SDK打开微信客户端,进行微信支付. 6.微信客户端向微

解决iOS调起微信支付显示系统繁忙问题

最新刚到新公司接手一个项目,当微信支付时可以跳转到微信界面,但会弹出对话框显示 '系统繁忙',点击确定就留在微信,不返回APP,然后就各种调试,微信的DEMO和接入文档都看穿了,都还没能解决问题,网上也是找了各种答案,什么降低微信支付SDK版本,还有检查传过去的参数,也反复检查了参数,确实没发现问题,也没能解决我的问题,安卓那边可以微信支付,iOS这边不行,参数都是由服务器返回的一样的参数,所以也解决参数不会有问题,然后无意中看到了网上一个哥们的问题说和友盟分享SDK冲突了,刚好这个工程也集成了

iOS实现微信支付流程详解

背景 自微信支付.支付宝支付入世以来,移动端的支付日渐火热.虚拟货币有取代实体货币的趋向(这句纯属扯淡,不用管),支付在app开发中是一项基本的功能,有必要去掌握.从难易程度上讲,不管是微信支付还是支付宝支付都是非常简单的,因为第三方的支付文档非常详细,而且他们内部的安全性也非常高.作为使用这些支付策略的我们,只需要掌握流程,能够实现正常支付的功能即可.为什么要写下这篇博文,原因有二.其一,微信支付流程中有坑,其二,以后忘记了可以拿出来看看. 配置 1.微信支付需要两个账号,财付通和微信开发者,

iOS微信支付开发案例

微信支付有很多坑的,官方提供的文档一点都不全面,而且demo也比较"羞涩"难懂.很多注意的细节都没有体现出来,走了很多弯路.于是,系统的开发流程如下.(完整的demo附在博客最后面)这里面包括微信支付开发和支付宝开发调用客户端的兼容处理.(两次签名放在移动端,博客中没提到没安装微信客户端的情况,也很简单[WXApi sendReq:request]调用这个方法的返回值为0即可判断.) 一.环境配置 1.首先是https协议访问,在plist设置白名单 2.当你工程中有微信分享.收藏.支

iOS 9.0后微信支付回调处理实例

如果是iOS 9.0之前,处理微信回调时,首先在APPDelegate中写如下的代码: //iOS 9.0 之前的处理方法不保证正确,如有错误还望指正 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { if ([url.host isEqualToStrin