• 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));
    }
    });
    })
    })
    }




    个人笔记,仅供参考。欢迎各位大神指点
  • 相关阅读:
    Vue基础知识总结(一)
    D3.js系列——布局:弦图和集群图/树状图
    D3.js系列——布局:饼状图和力导向图
    D3.js系列——交互式操作和布局
    SQLServer调试
    SQL Server性能常用语句
    sqlserver索引
    从 datetime2 数据类型到 datetime 数据类型的转换产生一个超出范围的值
    EntityFrame6在本地可以正常使用,部署到IIS后报异常(Additional information: The underlying provider failed on Open.)
    从对象创建和引用小议解耦
  • 原文地址:https://www.cnblogs.com/wxx-17-5-13/p/9340375.html
Copyright © 2020-2023  润新知