H5微信分享多个参数分享被截取参数问题分享错误问题

步骤

微信开发文档传送门

1. 首先需要一个微信公众号，需要在公众号设置中配置【JS接口安全域名】
2. 页面引入JS接口文件(支持https)：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
3. 通过config接口注入权限验证配置

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填， 公众号的唯一标识
    timestamp: '', // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '', // 必填，签名
    jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
})

4. 通过ready接口处理成功验证

wx.ready(function(){
    //分享给朋友 1.4
    wx.updateAppMessageShareData({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接', // 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '分享图标',
        success: function(){
            // 配置成功
        }
    })
    //分享到朋友圈 1.4
    wx.updateTimelineShareData({
        title: '分享标题',
        link: '分享链接',
        imgUrl: '分享图标',
        success: function(){
            // 配置成功
        }
    })
})

重点说一下配置这一步，如何获取签名，也就是wx.config这里的配置。如何获取签名，签名的算法需要后端的接口来配合获取，所以我们只需要调用后端的接口就可以。

直接看代码（axios get请求）
情况一：url后面带一个参数

var url = 后端接口?url=https://安全域名/code?name=zhufengli
this.$axios.get(url).then(res=>{
    // 成功
}).catch(err=>{
    
})

image.png

情况二：url后面带多个参数

var url = 后端接口?url=https://安全域名/code?name=zhufengli&age=18
this.$axios.get(url).then(res=>{
    // 虽然是成功的，但是参数会被当成两个
    // url、age
}).catch(err=>{
    
})

image.png

差点吐血，因为用手机，所以没有想到是这个问题，后面修改之后，代码如下：

var url = 后端接口?url=https://安全域名/code?name=zhufengli&age=18
this.$axios.get(后端接口,{
    params:{
        url: 'https://安全域名/code?name=zhufengli&age=18'
    }
}).then(res=>{
    // 成功
}).catch(err=>{
    
})

image.png

看出差别了吧，就这个问题搞得我心态炸裂。