微信js-sdk踩坑集合

总算没事了，打算自己弄个公众号，在wx.config的时候一直报invalid signature，我弄这个的时候浪费了好多时间。
接下来我就说说这个流程和我遇到的问题
1: 后端先通过appid和secret获取access_token；get方式访问就行如：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={你的appid}&secret= ${你的secret} 2: 后端再通过第一步拿到的access_token去获取JsTicket。也用get的方式，如https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$ {刚才获取的token}&type=jsapi
3: 通过sha1生成signature。这里需要4个参数，jsapi_ticket（第二步获取的，应该做缓存），noncestr（16位大小写英文字母加数字组成），timestamp（时间戳，不是毫秒，是秒值），url(微信后台白名单的url)。注意，这里的noncestr没有驼峰，timestamp是秒。下面是代码：

// 获取随机字符串的方法
const getNonceStr = () => {
    let code_a = 97
    let code_A = 65
    let code_1 = 49

    let getRandomLetter = () => {
        let letter = ''
        const type = parseInt(Math.random() * 3)
        if (type === 0) {
            let codeIndex = parseInt(Math.random() * 26)
            letter = String.fromCharCode(code_a + codeIndex)
        } else if (type === 1) {
            let codeIndex = parseInt(Math.random() * 26)
            letter = String.fromCharCode(code_A + codeIndex)
        } else {
            let codeIndex = parseInt(Math.random() * 8)
            letter = String.fromCharCode(code_1 + codeIndex)
        }
        return letter
    }
    let noncestr = ''
    for (let l = 0; l< 16; l++) {
        noncestr += getRandomLetter()
    }
    return noncestr
}

const getSignature = (ticket, noncestr, timestamp, url) => {
    const signObj = {
        jsapi_ticket: ticket,
        noncestr: noncestr,
        timestamp: timestamp,
        url: url
    }
    let str = ''
    const keys = Object.keys(signObj)
    keys.forEach(item => {
        let itemStr = item + '=' + signObj[item]
        if (str === '') {
            str += itemStr
        } else {
            str += '&'
            str += itemStr
        }
    })
    console.log(str)
    // 我用的是egg，直接yarn add sha1,这里需要const sha1 = require('sha1')
    return sha1(str) 
}

4: 以上3步后端逻辑就完了，第3步的4个值需要返回给前端。
前段需要引入sdk <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js">
拿到第三步后端的几个值后，首先注册，然后在ready的回调里写分享或者别的业务

window.onload = function() {
    const nonceStr = window.nonceStr
    const signature = window.signature
    const timestamp = window.timestamp
    const config = {
        debug: true,
        appId: '你的appid',
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
    }
    alert(JSON.stringify(config))
    wx.config(config)
    wx.ready(() => {
        alert('ready')
        wx.onMenuShareAppMessage({
            title: '测试', // 分享标题
            desc: 'test',
            link: '要分享的地址', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png', // 分享图标
            success: function () {
            // 用户点击了分享后执行的回调函数
            }
        })
        wx.onMenuShareTimeline({
            title: '测试',
            desc: '测试desc',
            link: '要分享的地址',
            imgUrl: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
            success: function () {
                
            }
        })
    })
    wx.error((res) => {
        alert('error')
        alert(JSON.stringify(res))
    })
}

以上就是主要的步骤，我说下可能出现的问题
1 wx.config的timestamp，nonceStr，appId必须是后端生成signature时的timestamp，noncestr，appId (config时的nonceStr是驼峰，生成signature时的noncestr不是驼峰，哈哈，怎么样，是不是有点扭曲？)
2 timestamp时秒值，不是毫秒值，位数要弄对。和官方的地址对比你生成的signature对不对https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
3，微信后台配置的安全域名不要带http或者https。如果是ip，也直接加就行。

最后编辑于：2021.07.02 01:29:18