最近又把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. iOS开发证书都显示“此证书的签发者无效”,更新WWDR Certificate证书后还是显示无效

    1.首先iOS开发证书显示"此证书的签发者无效".是因为WWDR Certificate证书过期导致的,须要更新WWDR Certificate证书! 1)下载最新WWDR Cer ...

  2. 树莓派学习笔记——USB wifi配置指南

    0 前言     树莓派既能够使用有线网络又能够无线网络,假设使用有线网络不方便的话能够借助USB wifi无线网卡让树莓派也插上无线"翅膀". 可是和使用有线网络即插即用的方式不 ...

  3. Nginx平台构架

    深入理解Nginx模块发开与架构解析读书笔记. nginx在启动后,在unix系统中会以daemon的方式(能够手动关闭 nginx.conf daemon off)在后台执行,后台进程包括一个mas ...

  4. POJ2942 Knights of the Round Table 点双连通分量,逆图,奇圈

    题目链接: poj2942 题意: 有n个人,能够开多场圆桌会议 这n个人中,有m对人有仇视的关系,相互仇视的两人坐在相邻的位置 且每场圆桌会议的人数仅仅能为奇书 问有多少人不能參加 解题思路: 首先 ...

  5. NYOJ15-括号匹配(二)-区间DP

    pid=15">http://acm.nyist.net/JudgeOnline/problem.php? pid=15 dp[i][j]表示从i到j至少须要加入多少个括号才干满足匹配 ...

  6. AJAX跨域问题解决---后台解决

    对于ajax请求数据,经常出现一个坑,防不胜防.今天突然找到一个很好的解决办法,直接在后台设置资源共享就可以了. 代码为:response.raw().setHeader("Access-C ...

  7. 码农的奋斗之路 CTO说 读后感

    拜读了各位大神的分享,对CTO的职责有了进一步的认识. 什么是CTO? CTO需要具备哪些技能? CTO与管理 CTO的作用是什么? 如何体现CTO的价值? CTO撸不撸代码? 小结

  8. 机器学习笔记2 – sklearn之iris数据集

    前言 本篇我会使用scikit-learn这个开源机器学习库来对iris数据集进行分类练习. 我将分别使用两种不同的scikit-learn内置算法--Decision Tree(决策树)和kNN(邻 ...

  9. HTTPS加密流程超详解(一)前期准备

    0.前言 前一阵子想写一个HTTPS的嗅探工具,之前只是大致了解SSL/TLS协议的加密流程,真正上起手来一步一步分析发现还是有点复杂的,于是我参考了wireshark的源码以及各种RFC,弄清楚了S ...

  10. 《深入浅出Netty》【PDF】下载

    <深入浅出Netty>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 本文档主要讲述的是深入浅出Netty: ...