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给修复了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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({}
-
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
-
vue实现微信分享朋友圈,发送朋友的示例讲解
首先下载微信jssdk引入项目中,这里我就不说怎么去安装了,如果不会的可以看一下npm教程和es6的教程. 第一步,引入微信jssdk,此处我是通过下载微信jssdk,然后用webpack引入进项目的. 第二步,获取详情数据,渲染页面. 第三步,获取详情数据成功后再获取微信签名,token等配置信息. 第四步,通过api配置所想要的功能 代码: <template> <div class="details"> <player :videoUrl="
-
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项目全局配置微信分享思路详解
这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在
-
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-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-router history模式下的微信分享小结
背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt
-
vue微信分享 vue实现当前页面分享其他页面
本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下 首先以分享给朋友为例 1.先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music.video或link,不填默认为link dataUrl: '', //
-
VueJs单页应用实现微信网页授权及微信分享功能示例
在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公
随机推荐
- Powershell实现克隆NTFS文件系统权限
- 红帽子Red Hat Linux 9光盘启动安装过程图解
- 利用js给DropdownList赋值实例
- Laravel的Nginx重写规则实例代码
- struts1实现简单的登录功能实例(附源码)
- 通过JS获取用户本地图片路径并显示的代码
- Python结巴中文分词工具使用过程中遇到的问题及解决方法
- python脚本设置系统时间的两种方法
- Go语言操作mysql数据库简单例子
- Android开发apk反编译和二次打包教程
- JavaScript使用DeviceOne开发实战(二) 生成调试安装包
- 最佳的addEvent事件绑定是怎样诞生的
- win7下安装配置node.js+express开发环境
- asp 采集实战代码
- Js获取asp页面返回的值(加载值)实现代码
- 浅析jquery的js图表组件highcharts
- ie和firefox不兼容的解决方法集合
- jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
- 前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
- eclipse 内存不足解决方法