vue单页应用hash模式开发微信H5需要注意的点

最新推荐文章于 2022-04-20 07:09:13 发布
最新推荐文章于 2022-04-20 07:09:13 发布
阅读量379 收藏
点赞数
分类专栏： 微信H5开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongxiaolin123/article/details/103611215
版权
  1. 使用encodeURI()只能转换空格，使用encodeURIComponent()可以转换所有特殊字符
  2. 在使用vue开发微信单页应用的时候，当配置微信分享需要传参数到后台时，需要使用encodeURIComponent()转换需要分享的链接，不然axios只能获取#号前面的path，造成传入后台的分享地址和wx.config配置的分享地址不一致，会出现分享失败
vue 传参 微信_vue hash模式下微信分享，实现参数传递
weixin_39795479的博客
12-19 657
背景vue项目hash模式下，需要实现微信分享。支持传递多参、无参、以及指定跳转页面、可配置实现思路由于hash模式 #符号的存在，在不同平台会存在兼容性问题。会导致 分享出去的页面不能跳转到指定页面。所以思路就是 将 页面路径 作为一个参数分享出去(本例 称它为 path参数)，打开分享链接后 我们根据path参数 来还原URL，进行重定向。主要操作1、重定向判断在进入项目前，进行url判断：1...
微信h5 签名错误 php,详解Vue开发微信H5微信分享签名失败问题解决方案
weixin_33871105的博客
03-27 465
关于Vue中路由使用history模式，开发微信H5页面分享时在安卓上签名有效成功，但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中，路由使用History模式下，在使用微信分享时，在微信开发者工具上一切正常。在安卓上一切正常。 但是！！！在IOS上反复报签名错误。以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号，接着下面分享出来自定义内容是安卓分享正常,话不...
Vue单页式应用(Hash模式下)实现微信分享的实例
08-29
本篇文章介绍了Vue单页式应用(Hash模式下)实现微信分享的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue使用总结
mewmew1的博客
12-31 674
1.this.$router.push({name:“detail”,params:{id:id}}) 跳转路由时使用params传参，页面刷新参数就没了，可使用query传参，或者vuex持久化存储。
关于vue路由模式导致微信jssdk授权问题的正确解决姿势
类人猿
12-14 4606
如何正确解决vue路由模式weixin-jssdk授权问题第一种情况：最常用的history模式第二种也比较常用，hash模式第三种就是memoryHistory总结 第一种情况：最常用的history模式 这里根据项目出现做出总结： 1、Android手机： android手机基本会兼容授权，但是时不时出现授权失败的情况，或者是出现授权成功，打开失败的情况。结果查找，大多都说android不需要处理直接使用href签名： await API.wxSign( { cli
实现微信分享 --------Vue单页式应用(Hash模式下)
鸡血博客
10-18 1269
前端微信分享的基本步骤： 一.绑定域名： 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说，微信开发的都应该清楚。 二.引入js文件： 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js。 请注意，如果你的页面启用了https，务必引入 https:...
基于vue hash模式微信分享#号的解决
10-14
在基于Vue的SPA（单页应用）开发中，通常使用`hash`模式来处理路由，因为这种方式无需服务器端配置即可实现前端路由。然而，在微信环境中，由于其内嵌的浏览器特性，分享链接时会遇到一些问题，特别是涉及到URL中...
微信小程序开发附源码：详解Vue开发微信H5微信分享签名失败问题解决方案.doc
05-18
在微信小程序开发中，尤其是使用Vue.js框架进行微信H5页面开发时，有时会遇到一个棘手的问题，即在iOS设备上微信分享签名失败。这个问题表现为在使用Vue的History模式下，路由跳转正常，安卓设备上的分享功能也能...
vue微信H5页面鉴权
落下香樟树
10-23 2086
VueCLI微信授权登录 前言 使用Vue开发的SPA项目H5版需要在微信端进行微信授权登录。此次项目Mobile端与PC端是部署在同一服务器的不同目录下的。故移动端和PC端的访问路径是保持一致的，只是子域名有所差异。为了保持路径的一致性，移动端也采用了同PC端一样的路由模式，即history模式。 History模式和Hash模式 vue SPA单页面项目中使用的vue-router路由有hash模式和history模式两种，其默认是hash模式。history模式与hash模式的区别主要有： hash
vue 写H5页面 hash模式下，安卓正常IOS没有图片和描述
weixin_44446394的博客
04-20 2558
真的是这个问题困扰了我好久，网上所有能查到的模式我都试过了，但是不管用，而且网上大部分说的都是history模式，很少提及hash模式安卓没问题，但是IOS签名失败的问题，只能自己排查了，挨个alert（）之后发现原来是hash链接里的#被截断了。 解决方式： 将分享链接中的 search 参数解析，拼接为 hash 参数 magicLink函数为拼接函数 magicLink(link) { var hashIndex = link.indexOf(‘#/’) var nativeUrl = link.su
微信公众号采坑之授权config
果果的博客
09-14 5199
  坑： 采用的Vue框架，前后端分离模式（vue工程仅作为客户端），用户通过域名访问的是客户端，但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的url，但由于单页应用的路由特殊，其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题 JS-SDK签名（wx.config） 对于签名，官方是这么说的...
解决vue hash模式微信分享#号问题
热门推荐
gyq04551的博客
03-29 2万+
// 问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。 // 获取签名 this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig", th...
微信hash ajax,基于vue hash模式微信分享#号的解决
weixin_34194499的博客
08-06 568
看代码吧~// 问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。// 获取签名this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig",this.$qs.stringify({"url":...
vue单页面应用引入并配置weixin-js-sdk
qq_41114603的博客
01-04 6727
vue项目公众号开发，需要使用到分享功能，根据文档引入weixin-js-sdk,首次接触，所以一开始就百度看了大量的贴吧，几乎所有的文章都是说单页面SPA应用需要在每次url变化的时候都得重新配置sdk,也就是wx.config();我不知道这是不是一个误区，反正我按这个思路在APP.vue的watch里面监听$route,每一次路由变化时调用wx.config()，始终无法成功，返回错误提示i...
微信服务号VUE单页应用，WX-JSSDK配置踩坑记录
tangfan7的博客
03-04 3174
微信服务号VUE.js单页应用，WX-JSSDK配置踩坑记录项目环境JSSDK引入建立公用的SDK配置文件wx-sdk.js引入依赖init方法使用结言 项目环境 微信服务号网页，前后端分离项目，前端采用vue.js+vux搭建，路由采用history模式。 注意：微信后台记得配置好JS安全域名 JSSDK引入 npm i weixin-js-sdk --save 我引入的版本号为1.3.2 建立...
开发单页应用(SPA)时候遇到的微信支付授权目录的坑
liufeng520的专栏
05-09 1万+
转载：http://www.tuicool.com/articles/mQ7RRfb 开发单页应用(SPA)时候遇到的微信支付授权目录的坑 好久没写blog了，今天微信终于让我忍不住上来写一篇。 项目中要在微信底下开发单页应用(SPA)，前端技术选型用的vuejs+vue-router，vue-router使用hashbang模式（使用hashbang也是为了避免微信js
解决微信H5分享页面打开都是首页，# | hash 分割问题，获取不到页面数据，解决办法其一：前端页面中转，重定向
tx10765的博客
06-24 2339
H5端分享页面时，微信会在域名和参数间自动添加类似“?/&from=singlemessage”字段且“#”后面的字段会被删除，导致分享页面只能进入首页，例子如下： 待分享链接：https://www.example.com/#/page/details/details?id=123456 微信分享之后的链接为https://www.example.com#/?from=singlemessage 导致每次只能进入index页面；这里提供一种解决办法：前端页面中转，重定向 服务器端新建一个与
vue H5微信分享（hash history）碰到的坑总结
qq_35220376的博客
05-10 3330
前言： 最近用VUE全家桶在做微信分享的时候碰到了许许多多的坑，在这边总结一下。 微信分享的时候， 要获取当前页面的URL，通过URL获取签名，不懂的可以看微信文档： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 坑1： 微信分享会自动屏蔽掉#后面的参数***且#后面的参数不参与签名*** 如果你采用的是...
使用vue的hash模式做单页面在微信公众号分享的那些坑
supreme1008的专栏
08-24 7509
1.同一套程序，andriod分享正常，ios分享报签名不正确，主要原因是微信的ios和安卓处理方式不一样，ios不会刷新当前的页面地址，使用的是history的记录地址，所以每次分享出来的链接，都是第一个进入系统页面的链接，当跳转到子页面的时候，系统就会识别打开的url和签名的url不一致导致签名不正确 解决办法：如果是单页面，很好处理，直接在index页面获取一下根目录的签名，然后调试一下签...
uniapp嵌套路由
最新发布
11-14
UniApp是一个基于Vue.js的跨平台开发框架，它允许开发者使用一套代码构建同时运行于微信小程序、H5、App、Webview等多端的应用。在UniApp中，路由管理是通过`uni-app-router`库来实现的，类似于传统的SPA应用中的路由系统。 uni-app的路由主要分为三种模式： 1. **Hash模式** (`#`)：URL会以哈希值的形式变化，适用于浏览器历史记录管理，但不支持浏览器前进后退事件。 2. **History模式** (`history`)：URL改变会触发页面刷新，需要服务器配置支持HTML5 History API，适合SEO和更好的用户体验。 3. **Single File Component (SFC) 模式**：将单个页面打包成一个独立的文件，每个页面对应一个.vue文件，可以更好地进行模块化开发。 使用UniApp的嵌套路由，你可以像管理单页面应用那样设置父子页面之间的跳转，只需要在组件层级上配置`navigator`属性或者使用`<router-view>`标签来动态渲染内容。例如： ```javascript // 路由配置 const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child', component: Child }, ] } ] // 使用导航守卫进行权限控制 router.beforeEach((to, from, next) => { // ... }) // 页面内跳转 this.$router.push({ name: 'Child', params: { id: 1 } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值