一文解决wx.config没响应、configfail没具体原因

我们的前端系统 cat 是被 animal 系统以 iframe 嵌套的,animal 系统 是政务微信里的一个应用,这事坏就坏在 iframe 上。

微信开放社区帖子绝大多数没人回答,又因为牵扯到多方,主要是我自己方向没搞对,花了不少时间。

解决办法就是调用 wx 的方法都在 window.parent.wx 上进行,鉴权的 url 也要是 window.parent.location.href

关键代码

javascript 复制代码
import CryptoJS from 'crypto-js'
import wxApi from '@/api/wxApi'
import { showFailToast } from 'vant'
export default function () {
    return {
        startWxConfig(callback = () => {}) {
            let signature = ref(null)
            let noncestr = ref('')
            let timestamp = ref('')
            let queryParams = ref('')
            let jsapi_ticket
            function randomString(len) {
                len = len || 32
                var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
                var maxPos = $chars.length
                var pwd = ''
                for (let i = 0; i < len; i++) {
                    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
                }
                return pwd
            }

            // 生成签名
            function createSignature() {
                noncestr.value = randomString(16)
                timestamp.value = Date.now()
                queryParams.value = randomString(32).toLowerCase()

                let str = `jsapi_ticket=${jsapi_ticket}&noncestr=${noncestr.value}&timestamp=${timestamp.value}&url=${window.parent.location.href}`

                signature.value = CryptoJS.SHA1(str).toString()
            }
            wxApi.getJsapiTicket().then((rsp) => {
                if (rsp.success) {
                    jsapi_ticket = rsp.result
                    createSignature()
                    window.parent.wx.ready(function () {
                        console.info('微信鉴权成功')
                        callback(true)
                    })
                    window.parent.wx.error(function (res) {
                        showFailToast('微信鉴权失败')
                        console.info('微信鉴权失败', res)
                        callback(false)
                    })

                    let configParams = {
                        beta: true,
                        debug: true,
                        appId: '',
                        timestamp: timestamp.value,
                        nonceStr: noncestr.value,
                        signature: signature.value,
                        jsApiList: ['getLocation'],
                    }

                    window.parent.wx.config(configParams)
                }
            })
        },
    }
}

wx.config 没反应

wx.config 调用了,不触发 read 也不触发 error,而我通过手机微信扫码是有响应的,突破点是同事提点政务微信有扫一扫的功能,可以判定问题是因为 iframe 嵌套导致的。

线上会议后,animal 系统的人同意将res.wx.qq.com/open/js/jwe... 放在他们的系统引入

config:fail 但是没说什么原因

这是因为我鉴权的 url 不是 window.parent.location.href,而是 window.location.href

这回我直接用政务微信扫描生产环境的二维码是行的通的,之前为什么不这么做?是因为报登录失败,我问 animal 系统的对接人说我们是不能直接登生产环境,后来我们这边的同事说是可以的,并提供了生产环境的用户名密码。

基于此就要考虑由 animal 系统的人来提供鉴权,我们传一些动态参数。线上会议讨论,提到我们的代码他们哪些要改的时候,animal 系统的前端提到鉴权 url 的问题,我修改后试了一下可以了。

总结

有时候解决问题是需要多个角度,问题也具备一定的随机性,比如换一个人来做,他可能首先想到的就是 iframe,animal 系统和我们都有一个测试环境,在里面虽然不同域,但是调用 wx.config 的现象是相同的。除非有明确的经验,否则经验也极有可能限制住思路。

我看网上挺多 wx.config 的问题但没有明确答案,其中 jsapi_ticket 是 animal 系统提供的,剩下的有我自己完成,这也一度是我怀疑的。中间还拉了几次政务微信的人开会,结论是可能签名算法不对,虽然我认为不是这个问题,但也想借着这个由子让他们完整的提供参数,从代码设计的角度来看也是合理的。

每当遇到这种问题,都会想起很早之前结论,问题的解决最终还是要靠自己,一定是某些没注意到的点,到了后面我的心态也很不好了,失误很多,尤其是没注意到 iframe 这个问题上,总觉得是别人的问题,总想着让人家配合,这都要反思。

相关推荐
一起养小猫18 分钟前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多19 分钟前
Vux store实例的模块化管理
前端
我是伪码农1 小时前
Vue 1.26
前端·javascript·vue.js
晚霞的不甘2 小时前
Flutter for OpenHarmony 创意实战:打造一款炫酷的“太空舱”倒计时应用
开发语言·前端·flutter·正则表达式·前端框架·postman
这儿有一堆花2 小时前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css
_OP_CHEN3 小时前
【前端开发之CSS】(三)CSS 常用元素属性宝典(上):从字体到文本,手把手教你打造高颜值网页!
前端·css·html·网页开发·文本属性·字体属性·页面美化
你脸上有BUG4 小时前
【工程化】记给ant-design-vue打补丁的示例
前端·javascript·vue.js·补丁·ant-design-vue
陈思杰系统思考Jason4 小时前
系统思考:组织转型的挑战与困境
百度·微信·微信公众平台·新浪微博·微信开放平台
开开心心_Every4 小时前
A3试卷分割工具:免费转为A4格式可离线
游戏·随机森林·微信·pdf·excel·语音识别·最小二乘法
灰灰勇闯IT4 小时前
Flutter for OpenHarmony:布局组件实战指南
前端·javascript·flutter