视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue2.0 如何在hash模式下实现微信分享
2020-11-27 22:01:37 责编:小采
文档


最近又把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>

    下载本文
    显示全文
    专题