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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
js获取checkbox值的方法
Jan 28 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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微商城开源代码实例
2019/03/27 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
PyMongo安装使用笔记
2015/04/27 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
深入解析Python中的线程同步方法
2016/06/14 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python3 assert断言实现原理解析
2020/03/02 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
线程同步的方法
2016/11/23 面试题
文明宿舍获奖感言
2014/02/07 职场文书
购房意向书范本
2014/04/01 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
新闻人物通讯稿
2014/10/09 职场文书
升职自荐信范文
2015/03/27 职场文书
单独二胎证明
2015/06/24 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers