我們的前端系統(tǒng) cat 是被 animal 系統(tǒng)以 iframe 嵌套的,animal 系統(tǒng) 是政務微信里的一個應用，這事壞就壞在 iframe 上。

微信開放社區(qū)帖子絕大多數(shù)沒人回答，又因為牽扯到多方，主要是我自己方向沒搞對，花了不少時間。

解決辦法就是調(diào)用 wx 的方法都在 window.parent.wx 上進行，鑒權(quán)的 url 也要是 window.parent.location.href

關(guān)鍵代碼

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('微信鑒權(quán)成功')
                        callback(true)
                    })
                    window.parent.wx.error(function (res) {
                        showFailToast('微信鑒權(quán)失敗')
                        console.info('微信鑒權(quán)失敗', 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 調(diào)用了，不觸發(fā) read 也不觸發(fā) error，而我通過手機微信掃碼是有響應的，突破點是同事提點政務微信有掃一掃的功能，可以判定問題是因為 iframe 嵌套導致的。

線上會議后，animal 系統(tǒng)的人同意將https://res.wx.qq.com/open/js/jweixin-1.6.0.js
放在他們的系統(tǒng)引入

config:fail 但是沒說什么原因

這是因為我鑒權(quán)的 url 不是 window.parent.location.href,而是 window.location.href

這回我直接用政務微信掃描生產(chǎn)環(huán)境的二維碼是行的通的，之前為什么不這么做？是因為報登錄失敗，我問 animal 系統(tǒng)的對接人說我們是不能直接登生產(chǎn)環(huán)境，后來我們這邊的同事說是可以的，并提供了生產(chǎn)環(huán)境的用戶名密碼。

基于此就要考慮由 animal 系統(tǒng)的人來提供鑒權(quán)，我們傳一些動態(tài)參數(shù)。線上會議討論，提到我們的代碼他們哪些要改的時候，animal 系統(tǒng)的前端提到鑒權(quán) url 的問題，我修改后試了一下可以了。

總結(jié)

有時候解決問題是需要多個角度，問題也具備一定的隨機性，比如換一個人來做，他可能首先想到的就是 iframe，animal 系統(tǒng)和我們都有一個測試環(huán)境，在里面雖然不同域，但是調(diào)用 wx.config 的現(xiàn)象是相同的。除非有明確的經(jīng)驗，否則經(jīng)驗也極有可能限制住思路。

我看網(wǎng)上挺多 wx.config 的問題但沒有明確答案，其中 jsapi_ticket 是 animal 系統(tǒng)提供的，剩下的有我自己完成，這也一度是我懷疑的。中間還拉了幾次政務微信的人開會，結(jié)論是可能簽名算法不對，雖然我認為不是這個問題，但也想借著這個由子讓他們完整的提供參數(shù)，從代碼設計的角度來看也是合理的。

每當遇到這種問題，都會想起很早之前結(jié)論，問題的解決最終還是要靠自己，一定是某些沒注意到的點，到了后面我的心態(tài)也很不好了，失誤很多，尤其是沒注意到 iframe 這個問題上，總覺得是別人的問題，總想著讓人家配合，這都要反思。