zoukankan      html  css  js  c++  java
  • vue开发是遇到 微信分享“#”问题

    作为一个第一次听说vue的菜鸟,我很荣幸在进公司的第二周接手上一位同事留下来的半成品。修修补补、磕磕盼盼的还能坚持下去。这里我要感谢我的老大在这期间的指点,感谢客户那边的各种需求...

    使用vue开发时url会带有一个“#”,虽然可以使用“history模式”去掉,但是这需要后端的配合。(注:使用“history模式”刷新页面后会找不到之前的页面)很可惜我这边没发验证这个方法是否正确,还是按照原本的方式吧。微信分享中的分享链接会自动截取“#”前的部分,导致每个分享的页面点击去之后都是首页。这时我们要做的是既然它截取了那我就添加上。然而仅仅这些是不够的,还需要在“#”前加上‘/’。

    如:

    wxShowMenu : function(title,desc,shareUrl,imgUrl) {
    console.log("当前页面地址:"+shareUrl);
    console.log("当前页面地址:"+shareUrl.split('#')[0]+"/");
    console.log(VueResource)
    // Vue.http({method: 'post', url: '//admin.zjzhushi.com/api/5b1749a04c650',data:shareUrl,emulateJSON: true}).then(response => {
    Vue.http.post( '//admin.zjzhushi.com/api/5b1749a04c650', {
    'url': shareUrl.split('#')[0]
    }, {emulateJSON: true}).then(response => {
    response = response.body.data;
    console.log(response.jssdk);
    let item = response.jssdk;
    wx.config({
    debug: false,
    appId: item.appId,
    timestamp: item.timestamp,
    nonceStr: item.nonceStr,
    signature: item.signature,
    jsApiList: item.jsApiList,
    url:item.url
    });
    wx.ready(function () {
    wx.checkJsApi({
    jsApiList: item.jsApiList, // 需要检测的JS接口列表,所有JS接口列表见附录2,
    success: function (res) {
    console.log(res);
    }
    });
    wx.onMenuShareTimeline({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: shareUrl.split('#')[0]+"/"+'#'+shareUrl.split('#')[1], // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
    // 用户确认分享后执行的回调函数
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
    }
    });
    /*分享给朋友*/
    wx.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: shareUrl.split('#')[0]+"/"+'#'+shareUrl.split('#')[1], // 分享链接
    imgUrl: imgUrl, // 分享图标
    type: 'link', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
    // 用户确认分享后执行的回调函数
    // alert("您已分享");
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
    // alert('您已取消分享');
    },
    fail: function (res) {
    alert(JSON.stringify(res));
    }
    });
    })
    })
    }




    个人笔记,仅供参考。欢迎各位大神指点
  • 相关阅读:
    并发和并行的区别
    fiddler-打断点(bpu)
    fiddler操作
    fiddler手机抓包
    面试题1
    Linux查看日志常用命令
    HTMLTestRunner
    mysql数据库无法插入特殊字符报错
    mybatis解决属性名和数据库字段名不一致问题
    Vue路由的使用简单实例
  • 原文地址:https://www.cnblogs.com/wxx-17-5-13/p/9340375.html
Copyright © 2011-2022 走看看