vue2.0 如何在hash模式下实现微信分享


Posted in Javascript onJanuary 22, 2019

最近又把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('#')[0])});

这样修改后,签名的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('#')[0])}); // 这里是关键
  let url = baseUrl + params + samekey;
  $.post(url, data => {
   elementService.loadingHide();
   console.log(data);
   switch (data.error) {
    case 0:
     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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 #Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 #Javascript
js实现京东秒杀倒计时功能
Jan 21 #Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 #Javascript
You might like
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php中Snoopy类用法实例
2015/06/19 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JS获取时间的方法
2015/01/21 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
深入理解ES7的async/await的用法
2017/09/09 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python链接Oracle数据库的方法
2015/06/28 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
六道php面试题附答案
2014/06/05 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
课堂打架检讨书200字
2014/11/21 职场文书
董事会决议范本
2015/07/01 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
python基础之文件处理知识总结
2021/05/23 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS