最近又把vue的demo拿出来整理下,正好要做“微信分享”功能,于是遇到新的问题;

由于hash模式下,带有“#”,导致微信分享的签证无效;当改成history的模式后,分享ok;

但是问题来了,history模式下相当操蛋:

  • 刷新页面,页面报错404;这不是扯犊子吗?【不过这个问题,可以在后台解决,这里就不说了】
  • assets下的img文件,引入路径失败;

对于上面的问题,我是直接不能忍啊,所以history模式是肯定不行的;我决定依旧用hash模式;history模式万万要不得

那么问题来了:怎么在hash模式下实现微信分享?

其实微信分享失败的问题,最重要的一步就是解决“#”的问题;

一般的页面,我们获取当前的url是酱紫操作的

let params = '&params=' + JSON.stringify({url: window.location.href});

SPA页面,我们需要做点小调整,调整的目的是让“#”say goodbye

let params = '&params=' + JSON.stringify({url: encodeURIComponent(window.location.href.split('#')[])});

这样修改后,签名的url中没带“#”,这样就ok了,下面贴上完成的代码

<script>
// 微信分享
import configModel from "../models/config.model";
import elementService from "../services/element.service"; class ShareService{
wxShare(succCb, cancelCb, errorCb){
let baseUrl = 'http://q.letwx.com/api/jsapi?action=jscfg';
let samekey = '&uid=' + configModel.uid + '&wxapiopenid=' + configModel.apiopenid + '&wxapitoken=' + configModel.apitoken + '&debug=nf';
let params = '&params=' + JSON.stringify({url: encodeURIComponent(window.location.href.split('#')[])}); // 这里是关键
let url = baseUrl + params + samekey;
$.post(url, data => {
elementService.loadingHide();
console.log(data);
switch (data.error) {
case :
this.wxConfig(data.cfg, configModel.shareInfo, succCb, cancelCb, errorCb);
break;
default:
elementService.message(data.error_msg, 'error');
break;
}
}, 'json');
}
wxConfig(wxconfig, share, succCb, cancelCb, errorCb){
wx.config({
debug: false,
appId: wxconfig.appId,
timestamp: wxconfig.timestamp,
nonceStr: wxconfig.nonceStr,
signature: wxconfig.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
wx.ready(function() {
wx.onMenuShareAppMessage({ //朋友
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl,
success: function() {
succCb && succCb();
},
cancel: function() {
cancelCb && cancelCb();
}
});
wx.onMenuShareTimeline({ //朋友圈
title: share.desc,
link: share.link,
imgUrl: share.imgUrl,
success: function() {
succCb && succCb();
},
cancel: function() {
cancelCb && cancelCb();
}
});
wx.onMenuShareQQ({ //QQ
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl,
success: function() {
succCb && succCb();
},
cancel: function() {
cancelCb && cancelCb();
}
});
wx.onMenuShareWeibo({ //QQ
title: share.title,
desc: share.desc,
link: share.link,
imgUrl: share.imgUrl,
success: function() {
succCb && succCb();
},
cancel: function() {
cancelCb && cancelCb();
}
});
});
wx.error(function(res) {
console.log(res);
errorCb && errorCb(JSON.stringify(res));
});
}
} let shareSerivice = new ShareService();
export default shareSerivice;
</script>

vue2.0 如何在hash模式下实现微信分享的更多相关文章

  1. vue2.0 Hash模式下实现微信分享

    1,通过后台,获取accessToken 和 签名jsApiTicket,并写入浏览器缓存(可以写在app.vue中) <script type="text/ecmascript-6& ...

  2. Vue单页式应用(Hash模式下)实现微信分享

    前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发 ...

  3. vue history模式下的微信分享

    // 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...

  4. 引入 Tinker 之后如何在 Debug 模式下开启 Instant Run

    在<Tinker + Bugly + Jenkins 爬坑之路>一文中讲了在接入 Tinker 之后,Jenkins 中的一些坑,由此,热修复算告一段落,但是,在直接 Run 模式运行时, ...

  5. vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

  6. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  7. 如何在debug模式下,使用正式的签名文件

    有两种方式(在集成第三方库的使用 使用的非常多)  签名配置信息 一是直接按F4,在项目结构面板中进行设置,只要操作两个两个选项卡就好了,signing(生成配置信息)和build types(打包类 ...

  8. eclipse的问题:如何在debug模式下,能始终看到某变量的值

    Window—>Show View—>other—>Debug—>Expressions中左边是变量名,右边显示变量value.

  9. vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

    微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...

随机推荐

  1. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. MySQL 索引管理与执行计划

    1.1 索引的介绍 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息.如果想按特定职员的姓来查找他或她,则与在表中搜索所有的行相比,索引有助于更快地获取信息. ...

  3. Mybatis 入门之resultMap与resultType解说实例

    resultMap:适合使用返回值是自己定义实体类的情况 resultType:适合使用返回值得数据类型是非自己定义的,即jdk的提供的类型 resultMap : type:映射实体类的数据类型 i ...

  4. poj - 1185 炮兵阵地 状压DP 解题报告

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 21553   Accepted: 8363 Description ...

  5. Spring Boot-------JPA基础及查询规则

    JPA基础及查询规则 JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数 ...

  6. TextMesh Pro 超链接解析失败

    前言 软件环境 Unity3D 5.3.7p4 TextMesh Pro 1.0.555.0b11(Jul 06.2017) UGUI做为UI解决方案 文档资料 TextMesh Pro的资料,可以参 ...

  7. 导入maven项目时出现 Version of Spring Facet could not be detected. 解决方法

    问题出现在: 导入maven项目的时候,其中,我的这个maven项目是由Spring,Struts2,Mybatis搭建的. 问题截图:  即Spring的版本不能被检测到.此时需要做的就是找到spr ...

  8. iOS UIAlertController中加入倒计时,输入框,Swift讲解

    一.倒计时 @interface ViewController () { UIAlertController *alertview; NSString * message; NSTimer * wai ...

  9. 基于CDH 5.9.1 搭建 Hive on Spark 及相关配置和调优

    Hive默认使用的计算框架是MapReduce,在我们使用Hive的时候通过写SQL语句,Hive会自动将SQL语句转化成MapReduce作业去执行,但是MapReduce的执行速度远差与Spark ...

  10. wincc flexable变量组态

    1.变量分类 2.变量组态练习 3.变量组态之前新建一个设备连接取名connect 3.tag1组态bool类型,双击变量弹出下面窗口,具体如下图所示connect表示外部变量 4.组态tag2 5. ...