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 ...
随机推荐
- js+画曲线和圆 并限制圆的渲染范围
通过三个点的坐标可确定一条双曲线. 公式: 1)y=ax^2+bx+c; 2) y=a(x-k)+h; 通过已知三点可确定a,b,c,h,k 2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x ...
- ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理
分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...
- axure扫盲
axure扫盲 zhuyuansj 2017.10.18 20:39* 字数 162 阅读 25评论 2喜欢 3 编辑文章 坐我旁边的前端今天正好初学axure,然后我就顺便学了几招比较基础的,这 ...
- js函数的作用域与this指向
函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. 函数的定义方式:直接定义(window下,内部定义), ...
- Python爬虫(十八)_多线程糗事百科案例
多线程糗事百科案例 案例要求参考上一个糗事百科单进程案例:http://www.cnblogs.com/miqi1992/p/8081929.html Queue(队列对象) Queue是python ...
- 关于SPI通信原理与程序实现
第一次接触SPI是因为当时用到NRF24L01,需要用SPI进行通信.因为2401上面写着MOSI.MISO.SS.RST,当时以为只要用到SPI就肯定有这几个引脚,以至于限制了自己的思维.只认识MI ...
- 美杂志初次取得答应走进google奥秘研讨所Google X
Google X作为google最奥秘的研讨部分.开发过google眼镜.无人驾驶轿车等多项创新项目.至今为止.Google X从未答应媒体进入採訪.但近日,据日本GIGAZINE站点报导,美国杂志& ...
- Selenium_WebDriver登录模拟鼠标移动切换窗体等操作练习(cssSelector初练手)_Java
cssSelector 据说cssSelector比xpath快. 所以,有固定ID属性的页面元素用By.id或者By.cssSelector("#id属性值")来找,有class ...
- HDU 1715 大菲波数
/* 中文题意: 中文翻译: 题目大意:求1000以内的菲波数. 解题思路:用大数来计算.用二维数组来存数. 难点具体解释:用二维数组存数,開始的一维存的是1000个Pi,后面那一维是用来存数字的. ...
- mybatis插入实体到数据库后获取自增的主键
话不多说,直接说方法. 1.在insert语句中加入如下的代码. <insert id="insertSelective" parameterType="com.q ...