微信转发 vue history模式 冲突问题

最新推荐文章于 2024-08-16 13:39:28 发布
最新推荐文章于 2024-08-16 13:39:28 发布
阅读量422 收藏
点赞数
文章标签： 微信 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wh2574021892/article/details/122191320
版权

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx993318331276156e&redirect_uri=http://beehive-pm.sh1.k9s.run:2271/bindWxMp&response_type=code&scope=snsapi_base#wechat_redirect

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx993318331276156e&redirect_uri=http://beehive-pm.sh1.k9s.run:2271/%23/bindWxMp&response_type=code&scope=snsapi_base#wechat_redirect

暂时记录 有空更新

vue-router history模式下的微信分享小结
08-27
本篇文章主要介绍了vue-router history模式下的微信分享小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue history模式下的微信分享
dbp47524的博客
01-23 316
// 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: url }).then(res => { if (res.code === 200) { wx.config({ ...
vue-router在history模式下的微信分享
weixin_39910802的博客
03-29 461
在vue-router模式为history的情况下, 由于IOS微信浏览器在验证微信jssdk签名时,需要的URL是第一次进入该应用时的URL, 并不是当前页面的URL, 所以这里需要针对IOS微信浏览器作特殊处理. 1. vuex中存储第一次进入的URL [SET_WX_JS_URL]: (state, url) => { // 设置进入微信时jssdk所需的URL ...
Vue在history模式下调用微信分享
Jensonhui's Blog
04-07 988
微信IOS公众号JSSDK，第一次签名失败，刷新后签名成功（99%的原因是签名URL不一致）；H5使用History模式调用微信分享；报错invalid url domain, 检查公众号是否配置域名正确；报错invalid signature, 大部分是路径的问题, 检查下传值路径是否和配置的域名对应
vue history模式微信自定义分享
落下香樟树
10-23 2183
history模式微信自定义分享 前言 最近做的Vue SPA项目涉及到微信自定义分享，最初只是在指定页面下实现微信的二次分享功能。但是因为移动端使用的是vue-router的history模式，所以在iOS端微信和Android端微信分享出来的截然不同，大多数是iOS端微信会分享失败。上网查询了一些文档说是iOS端微信不支持pushState的H5新特性。还有就是iOS端微信记录的URL是首次访问网页时的网址，所以在使用window.location.href获取当前网址来换取微信的签名校验信息时候就会导
vue爬坑路之----微信转发分享功能
weixin_45102071的博客
05-21 2774
最近做VUE转发分享功能，转发出去的页面没有详情及图片，搜集了一些资料，原来是因为转发链接写成了后台传来的链接地址了【笑哭自己】，我们前端应该获取当前页面的URL并传递给后台，让后端使用我们的URL，而不是自己接口URL，以此记录下来，以防再入坑 一、在 【src–assets–js】下新建JS文件 wx.jsapi.js import axios from ‘axios’ export defa...
记录vue做微信自定义分享的一些问题
10-16
为了解决这些问题，可以考虑将路由模式从`hash`模式改为`history`模式。这样，URL将不再包含`#`，从而避免与微信分享签名冲突。 其次，当应用切换页面时，签名可能失效。一种常见处理方法是在全局如`main.js`中定义...
vue 项目应用于微信公众号，分享时带上#/path/123456 等自定义路径的解决方案
天边逐云
06-24 581
问题描述： 后台框架thinkphp，一次在vue编译的项目中，在微信公众号内直接打开【众所周知，在微信公众号内需要授权码access_token】，此时授权完成回调时跳转到页面通过后台无法获取到 #号之后的所有参数，如图： 后台输出： 这个不用查找，因为php是真的无法获取，这是规则问题。 因此为了解决必须这样的方式访问，我们必须理清思路： 1、访问时先把地址存起来(怎么才可...
Vue锚点链接
一只前端小菜鸟
04-09 7046
锚点链接是我们在开发中经常会用到的一个技术点，常见的常见有，页面内容过多，而我们不希望拿鼠标一直来回滚动，就需要用到锚点链接，以 " 目录 " 的方式来进行对应的跳转。 而在常见的项目中，锚点链接的使用方法是通过a标签的href属性跳转到某一个元素的id，来找到对应元素的位置，实现效果 <!DOCTYPE html> <html lang="en"> <head...
解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)
wocwin的博客
08-16 901
解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)
Vue项目history模式下微信分享爬坑总结
10-17
主要介绍了Vue项目history模式下微信分享爬坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue微信分享到朋友圈 vue微信发送给好友
10-17
主要为大家详细介绍了vue微信分享到朋友圈，vue微信发送给好友功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍（2021版） PDF，面试官问的源码问题绝对稳了！
weixin_56134381的博客
06-15 914
趁着端午假期，熬夜将Vue 99%出镜率的高频面试题整理了一下。覆盖Vue3.0
记录一次vue2.0（history模式）下微信自定义分享的坑
weixin_33694620的博客
09-04 428
吐槽：关于微信自定义分享前前后后翻了文档两三遍，感觉大佬们写文档都是这么潇洒么？躲在角落里的我瑟瑟发抖了两天.....下面我们（带着愤怒）来看微信文档来进行开发：传送门1. 根据文档来配置（公众号安全域名，引入官方微信js）2. 配置权限，根据微信文档描述：所有需要使用JS-SDK的页面必须先注入配置信息wx.config({ debug: true, // 开启调试模式,调用的所有api...
vue单页应用history模式下的微信分享（深坑）
热门推荐
love960314的博客
03-26 1万+
之前的项目到我接手时微信分享这个问题已经被处理过了，所以也就偷懒没有研究了。目前公司项目用的是vue,然后在微信分享这块也是被坑的很惨了。主要问题在我自己，但我！甩锅超级厉害！！！技术认输，甩锅绝不认输（滑稽 今天我就要把整个问题的过程记录一哈，第一次写博客。紧张的有点手抖哈…… 我遇到的问题主要是一直出现invalid url signature,所以这篇博客内容都是为了处理这个问题 ==...
Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，Vue.js Nuxt.js 通用公众号页面解决方案（超级详细教程）
王二红
10-12 9700
Vue.jsNuxt.jsuni-app最新网页H5右上角分享到微信朋友圈/转发分享给朋友好友/分享到手机QQ/分享到QQ空间，通用公众号页面解决方案（超级详细教程）开启页面分享功能，如何把手机移动端网页设置成可以分享到朋友圈？H5网页怎么分享到微信、朋友圈、QQ和微博里，手机网页实现微信分享,分享朋友圈功能(分享带图片,附源码)，基于vue实现h5页面分享微信以及朋友圈功能(以及兼容iOS)，uni-app使用vue3、ts小程序如何微信分享到朋友和朋友圈发布为H5端时如何实
Vue history模式安卓分享没有问题 微信分享IOS无效解决办法
liu_yulong的专栏
05-12 879
使用vue采用history模式进行开发，微信自定义分享，在签名debug没有报错的情况下，PC端开发者工具以及安卓都没有问题，但唯独IOS不行 用SPA做微信h5，调用微信jssdk的页面，安卓微信上木有问题，ios微信报当前url未注册 经过调试，是ios微信版本问题导致页面跳转url未变化，导致验签失败 router.beforeEach((to, from, next) => { var u = navigator.userAgent; var isiOS = !!u...
vue 调用共众url_vue+微信公众号开发 网页授权返回url路径中带#不识别，无法授权解决方案...
weixin_35110266的博客
12-23 2103
带个#可真是坑啊！！！第一次开发微信公众号，原本看起来并不复杂，前端负责调接微信接口的地方很少，为了安全起见，大部分接口都是由后端处理，前端只需负责调通后端接口即可，当然还有少部分需要前端来处理。在微信公众号开发中，网页授权第一步需要用户同意授权，获取code ，微信官方提供的获取code接口如下(具体接口介绍请查看微信开发者文档)https://open.weixin.qq.com/conne...
vue微信授权页面重定向遇到的问题
qq_41985464的博客
03-03 3991
问题描述：当时获取微信的code的时候，直接再created里面调用的，然后用sesssionStorage储存的code，这样每次进入页面，页面都会重新重定向获取code，这样页面重定向的话，获取code的哪个页面就是重定向的页面，刚开始进来的哪个就没有code，用手机自带的返回键回退到这个页面就没有code了，解决办法就是使用cokie存储，使用它是因为他又过期时间，这样可以考虑code的时效...
解决vue hash模式微信分享#号问题
最新发布
10-13
在Vue应用中，当使用`hash`模式（如`http://example.com/#/route`)并尝试通过微信分享功能时，可能会遇到URL中包含`#`号的问题，因为微信分享API通常期望的是不含`#`的相对路径。解决这个问题，你可以采用以下几种方法： 1. **修改URL结构**： 考虑将应用从`hash`模式切换到`history`模式（`https://example.com/route`），这样微信会自动处理URL。这需要服务器支持`History API`路由，并配置相应的前端代码。 2. **微信分享参数处理**： 使用Vue的`beforeRouteUpdate`或`beforeEach`钩子，在页面变化之前，对当前的`path`做一次处理，去掉`#`以及其后的部分。然后生成一个新的无`#`的链接作为分享内容。 ```javascript // 示例代码 router.beforeEach((to, from, next) => { const cleanPath = to.path.replace('#', ''); // 将cleanPath设置给微信分享的url wx.config({ onMenuShareTimeline: { url: 'https://example.com' + cleanPath }, // 其他配置... }); next(); }); ``` 3. **微信JSSDK配置**： 如果无法改变URL结构，可以利用微信的JS-SDK，在用户点击分享按钮时动态获取不含`#`的页面地址进行分享。例如，使用`wx.reLaunch`先跳转至正确的页面，然后再分享。 ```javascript // 示例代码 this.$router.replace(cleanPath); wx.onMenuShareTimeline({ url: 'https://example.com' + cleanPath }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值