基于IOS端微信分享失效的踩坑及解决方法
时间:2019-04-12
本文章向大家介绍基于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初始化的问题(或者是我没有找到)。??/p>
通过如上修改以后,我们的公众号在IOS和android端的分享功能都可以正常的跑起来啦。
以上这篇基于IOS端微信分享失效的踩坑及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 大点干!早点散----------LVS负载均衡之LVS-NAT部署实战
- 大点干!早点散----------负载均衡LVS-DR群集部署
- 大点干!早点散----------群集负载均衡LVS DR+keepalived部署实战
- Java字符串所占字节数的小总结
- Java类加载机制详解
- 详解Java注解(Annotation)
- 你不知道的Synchronized
- 从Java并发集合看锁优化策略
- Java常用并发容器总结(二)
- Java常用并发容器总结(一)
- Java常用并发容器总结(三)
- Java常用并发容器总结(四)
- Js常见点击跳转方式
- Js获取域名地址并截取
- 引用lib-flexible导致第三方Ui库缩小