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 Event对象详解及使用示例
Nov 22 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP 文件系统详解
2012/09/13 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
django Serializer序列化使用方法详解
2018/10/16 Python
python列表list保留顺序去重的实例
2018/12/14 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
python属于哪种语言
2020/08/16 Python
基于python实现操作redis及消息队列
2020/08/27 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
公司应聘求职信
2014/06/21 职场文书
公务员检讨书
2014/11/01 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python