最近又把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. 数据结构与算法(C/C++版)【树与二叉树】

    第六章<树与二叉树> 树结构是一种非线性存储结构,存储的是具有"一对多"关系的数据元素的集合. 结点: A.B.C等,结点不仅包含数据元素,而且包含指向子树的分支.例如 ...

  2. Uva 12436 Rip Van Winkle&#39;s Code

    Rip Van Winkle was fed up with everything except programming. One day he found a problem whichrequir ...

  3. C language 模拟 win的经典游戏——扫雷

    让我们在terminal下愉快的...扫雷 昨天跟奇葩霖聊起"雷区"这个敏感词汇,然后非常荣幸的... 应该轰炸不到我.. . 后来百无聊赖的去玩了把扫雷.然后发现我之前都是乱扫的 ...

  4. R语言与数据分析之八:时间序列--霍尔特指数平滑法

    上篇我和小伙伴们分享了简单指数平滑法,简单指数平滑法仅仅能预測那些处于恒定水平和没有季节变动的时间序列,今天和大家分享非恒定水平即有增长或者减少趋势的.没有季节性可相加模型的时间序列预測算法---霍尔 ...

  5. ElasticSearch核心知识 -- 索引过程

    1.索引过程图解: api向集群发送索引请求,集群会使用负载均衡节点来处理该请求,如果没有单独的负载均衡点,master节点会充当负载均衡点的角色. 负载均衡节点根据routing参数来计算要将该索引 ...

  6. Unity For Android Cardboard App ( 1 ):基础入门

    作者: ericzwhuang 前言 目前Google官方推出的VR设备有DayDream(2016年推出)和Cardboard(2014年推出)两种. Daydream是消费级VR解决方案,提供了手 ...

  7. ES5继承

    原型继承 <script type="text/javascript"> function Father(){}//构造函数 //原型属性 Father.prototy ...

  8. 知名互联网公司校招 Java 开发岗面试知识点解析

    天之道,损有余而补不足,是故虚胜实,不足胜有余. 本文作者在一年之内参加过多场面试,应聘岗位均为 Java 开发方向.在不断的面试中,分类总结了 Java 开发岗位面试中的一些知识点. 主要包括以下几 ...

  9. Asp.Net Web API(二)

    创建一个Web API项目 第一步,创建以下项目 当然,你也可以创建一个Web API项目,利用 Web API模板,Web API模板使用 ASP.Net MVC提供API的帮助页. 添加Model ...

  10. [置顶] webapi token、参数签名是如何生成的

    一个问题 在这里我想问大家一句,如果你向一个刚刚接触.net web后端程序开发的同学(别人刚刚也就学了webform的request,response,会提交表单的这种刚接触不久的同学),你怎么去解 ...