H5 集成微信自定义分享(兼容 ios android)

最近做 H5 集成微信分享踩了很多坑，多少辛酸泪只有经历了才能体会，仅以此篇文章记录其中的酸甜苦辣。

分享出去的效果大概是这样子的：

接到这个需求之后，因为之前也没有做微信相关开发的经验，于是查阅了一些方案之后，最终决定采用 JS-SDK 来做。于是很愉快的打开微信官方开发文档，仔细阅读了需要用到的相关接口和注意事项。于是有了第一个版本的代码：

 async mounted() {const { data, ok } = await this.$ajax.post({url: ’这是请求的api地址‘,data: {url: window.location.href.split('#')[0],},})let wxConfig = {}if (ok) {wxConfig = data}const { signature, nonceStr, timestamp } = wxConfigconst wx = await import('weixin-js-sdk')wx.config({appId: 'xxxxxxxx',signature,nonceStr,timestamp,jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],})wx.ready(() => {const shareConfig = {title: ’这是标题‘,desc: ’这是描述‘,link: ’这是分享链接‘,imgUrl: ’这是分享卡片的图片地址‘,}wx.updateAppMessageShareData(shareConfig)wx.updateTimelineShareData(shareConfig)})},

不出意外地，分享出去的链接并没有按照自定义来进行解析，于是打开了调试模式，一直报 invalid signature签名错误，根据官网的提示，逐个检查了可能会出现错误的地方。

易错点1：网上有说虽然微信官方说旧的分享接口即将废弃，但是也没有说具体的废弃时间，微信底层可能还是调用了旧的接口。于是我把旧的分享接口也加上了，但依然还是报签名错误。

易错点2: 网上说可能是新的分享接口新版的微信还不支持，需要给引入的 sdk 降一下版本，于是我尝试把 weixin-js-sdk 降到了1.0.0，和微信官方给的示例同一版本，结果依然不行。

易错点3: 用来给后端签名的 url 是否是正确的。按照官方文档的提示，确保了用来签名的 url 的准确性，结果依然不行。

易错点4：可能是后端的签名算法不对，于是在前端测试签名，发现签名是成功的，但是还是报签名错误。

易错点5: 有可能是浏览器不支持分享 api 的原因，于是调用了微信提供的 checkJsApi, 判断当前客户端版本是否支持指定 JS 接口，依旧报签名错误。

我木讷了。差一点就去找微信客服了，结果，在 mentor 的帮忙下，最后发现是测试环境的问题，上面的代码在安卓上分享是没有问题的，折腾了好几天，心情终于能够平复一点了。结果，就在这时，测试同学给我反馈到 ios 上分享是失败的。啊啊啊，这么刺激的吗，有了上面的折腾的经历，开始仔细分析 ios 的问题，于是发现 ios 跟 Android 上是不一样的。ios 上需要手动封装一下签名的 url。因为 ios 微信无法追踪到 history 模式的路由变化，所以这里传的 URL 应该是第一次进入 APP 的页面路径，安卓没有这个问题，需要每次进入 APP 时把第一个页面的 URL 存下来给 iOS 用，我这里是保存在 vuex 的, 传递给后端签名的 url 需要判断一下，核心代码如下：

const isIOS = /iPad/iPhone/iPod/i.test(navigator.userAgent)
const url = isIOS ? window.location.origin + store.state.wechat.jsUrl: window.location.href.split('#')[0]

终于，在 ios 上也能够进行自定义分享了。

总结：我使用的微信版本(7.0.19), 最新微信分享接口也是支持的。当时做这个微信分享的时候还有一个误区，我自己的手机是小米的，我发现只有小米自带的浏览器可以支持分享，Chrome 浏览器就不能进行解析，先前以为是浏览器的原因，后面得大神指点，微信分享是只跟微信有关系的，在微信浏览器里才能解析微信分享相关的 api，我的小米自带浏览器能够解析，是因为小米跟微信是有合作的，所以是支持的。其他手机也有一些浏览器是能够支持的。

H5 集成微信自定义分享(兼容 ios android)相关推荐

vue微信H5自定义分享兼容ios、PC、安卓
1.安装微信sdk yarn add weixin-js-sdk // 安装依赖 // 或者在index.html引入<script src="https://res.wx.qq.co ...
vue 单页面应用做公众号，微信自定义分享，ios端失败
1.有人说是vue项目ios端地址栏不会变,我是用的 window.location.href 来传给后台生成config参数的,所以解决了 2.自定的分享不触发,打开 wx.config({deb ...
h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
微信自定义分享ios无效
微信自定义分享无效情况有很多种,这里记录开发中遇到的一种分享链接包含汉字在自定义分享中,分享链接包含汉字,且没有进行编码处理,会导致ios无效:因为Android会自行进行处理,ios却不会,导致 ...
h5页面生成图片分享到微信js_H5微信自定义分享链接（设置标题+简介+图片）
起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...
微信团队分享：iOS版微信的高性能通用key-value组件技术实践
本文来自微信开发团队guoling的技术分享. 1.前言本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称 ...
微信团队分享：iOS版微信是如何防止特殊字符导致的炸群、APP崩溃的？
本文来自微信开发团队yanyang的技术分享. 1.引言相信大家都遇到过一段特殊文本可以让iOS设备所有app闪退的经历.前段时间大年初一,又出现某个印度语字符引起iOS11系统奔溃,所幸iOS版微 ...
微信自定义分享功能二次封装
我原本是纯后端开发,但是最近因为工作原因,做了微信公众号的二次开发,说实话写H5调CSS调得头大,还是得术业有专攻才行.话不多说,因为要做微信自定义分享,网上其实已经有很多轮子了,但是100个人就有1 ...
微信自定义分享限制分享
微信自定义分享&限制分享一.微信自定义分享 [ (*￣︶￣)微信官方文档 ] 业务需求: 开发过程中有些业务需要借助微信进行推广和宣传.难免需要使用微信提供的一些功能,比如微信的二次分享(也 ...

H5 集成微信自定义分享(兼容 ios android)

H5 集成微信自定义分享(兼容 ios android)相关推荐

最新文章

热门文章