最近又把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. 认知服务调用如何使用图片的DataURL

    说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...

  2. SqlParameter 用法总结

    作用 解决恶意的T-sql语句攻击第一种 //传入参数 string ProductGroupCode, string Ismaintain, int HierarchyID, string BOMN ...

  3. Effective Java 第三版——3. 使用私有构造方法或枚类实现Singleton属性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  4. linux shell 推断文件或目录是否真的存在

    #推断文件或目录是否存在 filepath=/data/test.txt folderpath=/data/qtech #推断文件是否存在 if [ -f "$file" ] th ...

  5. dma_alloc_coherent (建立一致性 DMA 映射函数)

    1.函数申明 /** * dma_alloc_coherent - allocate consistent memory for DMA * @dev: valid struct device poi ...

  6. 【 全干货 】5 分钟带你看懂 Docker !

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者丨唐文广:腾讯工程师,负责无线研发部地图测试. 导语:Docker,近两年才流行起来的超轻量级虚拟机,它可以让你轻松完成持续集成.自动交付 ...

  7. Material使用07 MatGridListModule的使用

    1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-l ...

  8. WCF系统内置绑定列表与系统绑定所支持的功能

      WCF系统内置绑定列表 绑定 配置元素 说明 传输协议 编码格式 BasicHttpBinding <basicHttpBnding> 一个绑定,适用于与符合 WS-Basic Pro ...

  9. 串String(2):串的实现(堆分配存储表示法)

    7/27/2017,先占个位,最近事情比较忙,明天敲一波代码,预测在一星期内搞定 9/02/2017,看到这个十分汗颜,八月去美帝学习了,没有抽空补上这一博文,计划这个月开了数据结构课后补上

  10. APP上传APP Store遇到的各种问题

    内容含敏感话题或对苹果不友好的信息(如苹果婊) 使用了友盟的统计SDK,获取了IDFA但是上传填写无广告 采用友盟IDFA的sdk,并用友盟的默认淘宝页面广告,被告知和产品内容不符(最近) App在i ...