微信公众号分享链接自定义hash值的处理

2024-05-26 14:59:51

微信公众号默认的分享样式是直接分享一条链接的，样式丑陋。但是微信jsdk暴露了分享的API可以自定义分享样式。

一、分享鉴权及分享接口冲定义

这一块的文档很全面，不做细述。关键代码如下:

    function setConfig(appId) {axios.get(props.commonApi + '/Recruitment/WXGetSign?url=' + encodeURIComponent(window.location.href.split('#')[0])).then(function (res) {var result = res.data.result;wx.config({debug: false,appId: appId,timestamp: result.timeStamp,nonceStr: result.nonceStr,signature: result.signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'],});wxShareReady({title: '分享链接标题',desc: '欢迎您的访问',link: window.location.origin + window.location.pathname + '?initial=wechat&hash=' + Base64.encode(window.location.href.split('#')[1]),imgUrl: 'https://public.xxx.com/images/logo.jpg'})})}
复制代码

关键点是传给后台的url鉴权链接要和当前url一致，通过encodeURIComponent传给后台拿到鉴权信息，wx.config里配置对应属性。

二、hash路由页面分享的实现

我这边解决的一个主要问题是，微信公众号分享后会把hash后面的字段丢弃掉，导致从详情页分享的页面，点击只能到跟路由页面。要解决这个问题，第一种办法可以使用hastory模式；这个需要服务端配合设置，然后页面的链接就是不带hash的完整链接。我这里使用第二种办法:在自定义分享的link字段时，将hash后的字段截取，Base64.encode一下赋值为hash变量放在url上分享出去，在页面进入的路由判断是否是分享进入的链接，如果是则获取hash属性值Base64.decode一下使用框架的路由定向到对应的页面去，从而实现纯前端的方式分享完整页面链接。

三、不同页面重定义分享接口

最后补充一点，要想实现分享所有页面的完整路径，需要在页面的路由中重新调用wxShareReady传入当前页面的link，这样从不同页面分享的链接才会是对应的页面。

转载于:https://juejin.im/post/5cdb916cf265da03ab234bf5

微信公众号分享链接自定义hash值的处理相关推荐

微信公众号分享链接、图标、地址配置
/wxapi/getJSApi 接口需要后端人员接入开发,并在接口内返回公众号的随机串和公众号标识和签名 let mainTitle = res.data.mainTitlelet subTitle ...
微信公众号分享配置无效。。分享出来的只是纯链接了，如何自定义微信公众号的分享
微信公众号分享配置无效..分享出来的只是纯链接了挺久没接微信公众号的项目开发了,最近突然接了一个,结果微信自定义分享给我整懵了.原本配置的好好的,屡试不爽的代码,居然死活不生效,开启debug,开发 ...
微信分享次数统计、微信公众号分享关注统计
作为系列文章的第五篇,本文重点探讨数据采集层中的微信分享追踪系统.微信分享,早已成为移动互联网运营的主要方向之一,以Web H5页面(下面称之为微信海报)为载体,利用微信庞大的好友关系进行传播,实现宣 ...
教程：微信公众号的链接如何提取出来？非常简单！
很多人都在苦恼微信公众号的链接怎样提取出来?并且可以点击链接直接进入公众号内容页面,以查看历史文章并关注. 其实方法特别简单! 下面我们就来做详细介绍,一共分为两部分:第一部分内容是提取公众号链接,第 ...
小麦苗微信公众号文章链接地址
小麦苗微信公众号文章链接地址小麦苗的微信公众号文章链接地址 201609 发布日期文章标题链接地址 2016-09-30 2016-09-29 2016-09-28 2016-09-27 201 ...
微信公众号分享问题总结
文章目录前言微信公众号分享问题总结微信的一些其他问题结束前言 -time:2020/11/18 第一次写博客,以后准备在解决一些问题的时候,写在博客里,方便自己寻找这篇就总结一些微信公众 ...
（第三方平台）开发相关，解除80端口占用，微信公众号分享jssdk实现，微信开放平台登录接口接入，2022微信分享接入本地调试，微信分享定制
一.开发相关 1.平台地址微信开放平台 QQ互联平台SDK 2.文章收集来自CSDN兄台的QQ登录使用的教程微信网站应用开发的详细流程和引导 VueJs单页应用实现微信网页授权及微信分享功能 [ ...
微信公众号分享网页注意点
最近自己要做微信分享的防封,就研究一下市面做的分享防封原理,基本分流防封是一个做法. 过程讲述: 通过一个微信公众号分享一个入口,记住这个分享内容网页的内容最好一点违规的都没有,标题和图片可以带有诱导 ...
禁用微信公众号复制链接
禁用微信分享记录一个奇怪的需求需要禁用微信公众号复制链接但是跳转a 链接后会失效但是可以解决 if (typeof WeixinJSBridge == "undefined" ...

最新文章

热门文章