前言

微信分享（使用微信JS-SDK）、微信JS-SDK是面向网页开发者提供的基于微信内的网页开发工具包。JSSDK使用官方文档（官方使用手册）

详解一下我的使用流程以及踩坑记录，我做的项目属于公众号h5项目，今天突然接到需求对主推的某两个页面自定义分享内容，之前做过微信小程序和支付小程序的分享，都是直接使用特定的API修改标题、描述、图片、链接，想着贼简单，预估工时共要了一天，一把辛酸泪~~

1、使用步骤

1）安装依赖包npm或yarn

npm i --save weixin-js-sdk

2）这里我在utils里面新建文件wechat.js代码如下：

import wx from 'weixin-js-sdk'
import {wxShare} from '@/api/wechat.js'
export default {init (apiList = [],url) {url = process.env.VUE_APP_API_GATEWAYS+urllet params={appId:process.env.VUE_APP_API_APP_ID,url:url}return new Promise((resolve, reject) => {wxShare(params).then(res => {if (res.code=="0000") {wx.config({debug: false,appId: process.env.VUE_APP_API_APP_ID,timestamp:res.data.timestamp,nonceStr:res.data.nonceStr,signature:res.data.signature,jsApiList: apiList})wx.ready(() => {resolve(wx)})wx.error(function (err) {reject(err)})}})})}}

3）单个页面的分享自定义：在需要分享的页面mounted里面进行config签名，需要什么功能，签名时传入对应的jsApiList注册，签名ok后，ready中进行配置分享朋友、分享朋友圈等的title、desc、link、imgLink的配置。

先引入utils中的wechats.js

import utilWechat from '@/utils/wechat'

代码如下：

 mounted() {let title=document.title//当前页面的标题let desc="这个是分享的描述信息"//自己配置的描述信息let link=process.env.VUE_APP_API_GATEWAYS+this.url//分享的链接let imgUrl =process.env.VUE_APP_API_GATEWAYS+'/automic.png'//分享的图片链接//  let link=location.protocol+'//'+location.host+this.url//这种获取路由方式也行//  let imgUrl =location.protocol+'//'+location.host+'/'+'automic.png'//同上
//api列表、这里我把文档里面新版的分享朋友和分享朋友圈api也注册进去了，因为不知道使用新版还是旧版，经过测试还是旧版的好用，如果使用新版的，可按官方手册和社区大家的案例来，避免踩坑
let APILIST=["onMenuShareTimeline","onMenuShareAppMessage",'updateTimelineShareData','updateAppMessageShareData']utilWechat.init(APILIST,this.url).then(wx => {wx.onMenuShareAppMessage({title,desc,link,imgUrl,success: function () {alert(`分享成功`);},cancel: function () {alert(`取消分享`);}});wx.onMenuShareTimeline({title,desc,link,imgUrl,success: function () {alert(`分享成功`);},cancel: function () {alert(`取消分享`);}});//新版本分享(ready外面)// wx.updateAppMessageShareData({})// wx.updateTimelineShareData({})});},

4）因为我这里不是要求全部页面都需要自定义分享，所以我在项目中方便省事就没封装传参title、描述、等。如果每个页面都需要自定义分享，可以给每个路由配置对应的自定义信息设置在meta中，动态读取、获取签名、动态配置页面的自定义参数。

2、踩坑注意点来喽

1）页面分享出来只有一个链接

h5微信项目、通常我们在微信会话中通过链接也可以直接进入公众号网页、和通过公众号菜单跳转进入没什么区别，没毛病。

因为测试公众号菜单暂时挂的是灰度环境，测试环境只能通过链接进入，测试页面自定义分享后，我蒙了，就只有一个链接，why？点击链接进入页面右上角分享给朋友后，直接分享出去了一个链接，没有做过，毫无经验，以为自己的代码有什么毛病，微信开发者工具中测试config：ok，登录微信公众号后台，也配置了js安全域名，根本无头绪。

查看了一些资料后无果，最后再社区里面找到同样问题：公众号页面分享出来只有一个链接？

读后来来回回测试了几遍，结论：

1.微信会话的链接收藏后，通过收藏链接后再从我的收藏中打开再去分享是正常的

2.链接换成二维码扫码后进入分享是正常的

3.直接通过微信公众号菜单点击进去分享页面是正常的

2）安卓正常、IOS分享自定义配置无效问题

我是安卓手机，明白了第一个问题是微信官方的规则后，通过结论测试微信分享后恢复正常，发版到测试环境后，出现ios手机分享出来的卡片配置的标题、描述等无效。

又查了很多资料，

1.排除图片不能超过33k问题，

2.排除配置的link里面不能有特殊字符需对特殊字符进行编码，使用 encodeURIComponent() 问题

3.排除直接通过location.protocol+'//'+location.host+...来设置link

4.排除hash路由截取#前面作为拼接（项目使用的是history）

这些问题排除后，在手机上突然灵机一动想着刷新一下别是缓存问题代码发版无效，然后点击分享，my god，居然正常了，反复测试了几遍，排除了缓存问题，第一次分享确实无效，但是经过刷新页面再去分享，正常了。

怀疑是ios签名和安卓是不是有什么差异，开始继续查找资料，找到遇到同样问题的前端伙伴，不过他使用的是hash路由也就是说，不可沿用此方法，但是得到结论ios确实签名和安卓有不一样地方，只是迷惑使用当前路由去获取签名没错，官方就是这样说的。

尝试在签名之前alert出来了url进行对比，看到安卓和IOS的url都是当前页面，抑郁了。。。。。。。此处省略一万字

3）可以确定是ios的签名错误的问题了，Ios第一次签名config：invalid signature,刷新页面后config：ok

所以可能的情况全部排查了，均不是，最后发现了IOS的路由机制和安卓不同。

我需要分享的页面是进入网页后二次跳转的页面，所以路由变化了

虽然我分享前alert的是当前页面的路由（跳转后最新的url）去签名，但是签名失败。

经测试如果不跳转页面，ios分享是有效的，跳转的时候更改了页面的url：

问题出在：

ios系统对vue的history路由的支持上，由于Vue的单页面应用，我alert出来的虽然是我所要的当前页面url，只要不刷新页面，ios获取到的url还是进入网页的第一个url（我的home页），这样请求签名就会变成动态url不一致的问题才导致签名失败。

解决办法：

在路由守卫中首先判断安卓、IOS，如果是安卓每次都拿当前页面地址进行签名就行，如果是IOS机型，路由守卫中保存首次进入时的url，路由进入页面时判断当前页面url和首次进入的链接地址是否一致，如果不一致用location.replace刷新页面，拿刷新后的url进行签名。

具体代码如下：

//此处只写了核心代码,根据需求往里面插入代码就行
router.beforeEach((to, from, next) => {let link=process.env.VUE_APP_API_GATEWAYS+to.fullPath//当前页面的url//判断是否是苹果手机var ua = navigator.userAgent.toLowerCase();let newValue = ua.indexOf('iphone')if(newValue != -1){ //苹果手机做判断if (window.entryUrl === '' || window.entryUrl === undefined || window.entryUrl === null)  {window.entryUrl = link}
//入口url与当前需要签名的url不一致,赋值，刷新页面重新签名if (window.entryUrl !== link) {window.entryUrl = linkwindow.location.replace(link)}}else{next()}
})

4）发版到测试环境测试过后，分享配置一切正常，这里做下踩坑记录，代码不多，没做过这块的真的是得一点一点试探呀，孩子太难了，魔怔了，不过解决了很开心！

h5公众号分享朋友、朋友圈相关推荐

uniapp之h5公众号分享和授权
一,微信分享 1,安装jweixin-module npm i jweixin-module 2,在需要分享的页面引入 <script>// #ifdef H5let jweixin = ...
微擎公众号分享朋友圈不显示缩略图
微擎公众号分享朋友圈不显示缩略图首先在公众号控制器层面获取用户数据 $account_api = WeAccount::create(); $jssdk = $account_api->ge ...
微信公众号分享配置无效。。分享出来的只是纯链接了，如何自定义微信公众号的分享
微信公众号分享配置无效..分享出来的只是纯链接了挺久没接微信公众号的项目开发了,最近突然接了一个,结果微信自定义分享给我整懵了.原本配置的好好的,屡试不爽的代码,居然死活不生效,开启debug,开发 ...
微信分享次数统计、微信公众号分享关注统计
作为系列文章的第五篇,本文重点探讨数据采集层中的微信分享追踪系统.微信分享,早已成为移动互联网运营的主要方向之一,以Web H5页面(下面称之为微信海报)为载体,利用微信庞大的好友关系进行传播,实现宣 ...
微信公众号分享问题总结
文章目录前言微信公众号分享问题总结微信的一些其他问题结束前言 -time:2020/11/18 第一次写博客,以后准备在解决一些问题的时候,写在博客里,方便自己寻找这篇就总结一些微信公众 ...
技术类公众号分享，看到最后哟！
独乐乐,不如众乐乐.分享几个帮助你见世面的公众号路人甲Java 工作10年的前阿里P7分享Java.算法.数据库.架构设计.程序员职场感悟.人生定位总结,买房投资等方面的技术干货!号主路人甲java ...
AI面相手相V3.2.0无限多开版H5公众号版源码
源码简介: 2022 AI面相手相H5公众号版 AI面相手相功能,二合一,手相可以单独开关. AI面相和手相功能全兼容,包含不限于分销设置,其他基础设置. 关联公众号,关注公众号解锁或回复关键字解锁, ...
微信公众号分享链接自定义hash值的处理
微信公众号默认的分享样式是直接分享一条链接的,样式丑陋.但是微信jsdk暴露了分享的API可以自定义分享样式. 一.分享鉴权及分享接口冲定义这一块的文档很全面,不做细述.关键代码如下: functi ...
vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...

h5公众号分享朋友、朋友圈

前言