vue微信分享出来的链接点开是首页问题的解决方法

最近工作上遇到了这样一个Bug：“vue微信分享出来的链接点开是首页”

公司网站有PC端和移动端，两个版本。其中如果手机访问PC端，则自动跳转到移动端。（这是常规操作，没啥稀奇点。）

可神奇的问题来了。

在移动端中有微信分享功能，如果手机直接访问手机端的地址进入子页面分享，点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端，分享子页面链接打开将会是主页。

这个问题我也百度了各种方法，折腾了一天，然而都没啥用。

最后自己想了一个替代方案：

在static目录下新建一个名为html的文件夹，在html文件夹中再新建一个redirect.html（看到这个文件名是不是知道我要干啥了）

没错，我们做一个重定向。

html中写入以下内容

<script>

 let url = location.href.split('?')
 let pars = url[1].split('&')
 let data = {}
 pars.forEach((n, i) => {
 let p = n.split('=')
 data[p[0]] = p[1]
 })
 if (!!data.app3Redirect) {
 self.location = decodeURIComponent(data.app3Redirect)
 }

</script>

只需要script标签就可以了，反正只是做重定向。

接下来就简单了，原本设置给微信的分享链接是

shareWxLink = window.location.href

现在我们给他改成

shareWxLink = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href)

这样，我们就把当前页的地址编码后放到参数app3Redirect里面，当访问redirect.html时将自动重定向到解码后的原地址。

到此，终于把这个坑爹的Bug给修复了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router history模式下的微信分享小结

    背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

  • vue实现微信分享功能

    本文实例为大家分享了vue实现微信分享功能的具体代码,供大家参考,具体内容如下 1.引入微信js <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 2.从后台获取签名并分享 fenxiangFun(){//详情分享 var that = this; this.$http({ url:this.changeDa

  • Vue单页式应用(Hash模式下)实现微信分享的实例

    本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht

  • 详解Vue开发微信H5微信分享签名失败问题解决方案

    关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • vue-cli构建项目下使用微信分享功能

    一.index.html中引入微信官方分享js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 二.在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法 使用axios来发送请求,参照 //www.jb51.net/article/141008.htm 配置vue-cl

  • vue实现微信分享朋友圈,发送朋友的示例讲解

    首先下载微信jssdk引入项目中,这里我就不说怎么去安装了,如果不会的可以看一下npm教程和es6的教程. 第一步,引入微信jssdk,此处我是通过下载微信jssdk,然后用webpack引入进项目的. 第二步,获取详情数据,渲染页面. 第三步,获取详情数据成功后再获取微信签名,token等配置信息. 第四步,通过api配置所想要的功能 代码: <template> <div class="details"> <player :videoUrl="

  • vue项目中实现的微信分享功能示例

    本文实例讲述了vue项目中实现的微信分享功能.分享给大家供大家参考,具体如下: /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • vue微信分享 vue实现当前页面分享其他页面

    本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下 首先以分享给朋友为例 1.先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music.video或link,不填默认为link dataUrl: '', //

  • vue微信分享到朋友圈 vue微信发送给好友

    本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下 1.新建share.js文件 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; exp

随机推荐