vue2.0 如何在hash模式下实现微信分享
最近又把vue的demo拿出来整理下,正好要做“微信分享”功能,于是遇到新的问题;
由于hash模式下,带有“#”,导致微信分享的签证无效;当改成history的模式后,分享ok;
但是问题来了,history模式下相当操蛋:
- 刷新页面,页面报错404;这不是扯犊子吗?【不过这个问题,可以在后台解决,这里就不说了】
- assets下的img文件,引入路径失败;
对于上面的问题,我是直接不能忍啊,所以history模式是肯定不行的;我决定依旧用hash模式;history模式万万要不得
那么问题来了:怎么在hash模式下实现微信分享?
其实微信分享失败的问题,最重要的一步就是解决“#”的问题;
一般的页面,我们获取当前的url是酱紫操作的
let params = '¶ms=' + JSON.stringify({url: window.location.href});
SPA页面,我们需要做点小调整,调整的目的是让“#”say goodbye
let params = '¶ms=' + 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 = '¶ms=' + 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模式下实现微信分享的更多相关文章
- vue2.0 Hash模式下实现微信分享
1,通过后台,获取accessToken 和 签名jsApiTicket,并写入浏览器缓存(可以写在app.vue中) <script type="text/ecmascript-6& ...
- Vue单页式应用(Hash模式下)实现微信分享
前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发 ...
- vue history模式下的微信分享
// 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...
- 引入 Tinker 之后如何在 Debug 模式下开启 Instant Run
在<Tinker + Bugly + Jenkins 爬坑之路>一文中讲了在接入 Tinker 之后,Jenkins 中的一些坑,由此,热修复算告一段落,但是,在直接 Run 模式运行时, ...
- vue hash模式下微信分享后打开首页,三种完美解决方案
微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- 如何在debug模式下,使用正式的签名文件
有两种方式(在集成第三方库的使用 使用的非常多) 签名配置信息 一是直接按F4,在项目结构面板中进行设置,只要操作两个两个选项卡就好了,signing(生成配置信息)和build types(打包类 ...
- eclipse的问题:如何在debug模式下,能始终看到某变量的值
Window—>Show View—>other—>Debug—>Expressions中左边是变量名,右边显示变量value.
- vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册
微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...
随机推荐
- OBS源码解析(3)OBSApp类介绍
OBSApp类有以下功能: 1.负责配置文件管理 2.版本信息管理 3.主界面OBSBasic对象管理 4.obs模块初始化 class OBSApp : public QApplication { ...
- linux crontab yum安装
crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...
- 载入DLL中的图片资源生成Skia中的SkBitmap对象
PPAPI Plugin在Windows下是DLL,能够嵌入图片文件.使用Skia画图时须要依据DLL里的图片文件生成SkBitmap对象. 以下是代码: #include "utils.h ...
- 【并查集】HDU 1325 Is It A Tree?
推断是否为树 森林不是树 空树也是树 成环不是树 数据: 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1 0 0 1 2 2 3 4 5 0 0 2 5 0 0 ans: no ...
- linux中硬链接与软链接
硬链接记录的是目标的inode,软链接记录的是目标的路径. 软链接就像快捷方式,而软链接就像备份.软链接能够做跨分区的链接,而硬链接因为inode的缘故,仅仅能在本分区中做链接,所以软链接使用很多其它 ...
- RedHat Linux AS4 DNS 配置
RedHat Linux AS4 DNS配置 检查当前系统中安装 DNS功能组件bind情况 [root@svr01 /]# rpm -qa|grep bind* ypbind-1.17.2 ...
- 掀起Azure AD的盖头来——深入理解Microsoft Graph应用程序和服务权限声明
作者:陈希章 发表于 2017年7月12日 引子 这是一篇计划外的文章.我们都知道要进行Microsoft Graph的开发的话,需要进行应用程序注册.这个在此前我已经有专门的文章写过了.但这里存在一 ...
- Android百分比布局成功导入及简单使用
最近学习第一行代码第二版这本书,里面有介绍百分比布局的使用,经过一番摸索,终于是成功导入了百分比布局 就是这样,appcompat是25.3.1,那么百分比布局percent也是25.3.1 这样便是 ...
- 【java】多线程同步死锁
package 多线程; class A{ public synchronized void say(B b){ System.out.println("A说:你把你的本给我,我把我的笔给你 ...
- 八张图学通JavaScript 转自52