我们的前端系统 cat 是被 animal 系统以 iframe 嵌套的,animal 系统 是政务微信里的一个应用，这事坏就坏在 iframe 上。
微信开放社区帖子绝大多数没人回答，又因为牵扯到多方，主要是我自己方向没搞对，花了不少时间。
解决办法就是调用 wx 的方法都在 window.parent.wx 上进行，鉴权的 url 也要是 window.parent.location.href
关键代码
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}×tamp=${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 系统的人同意将https://res.wx.qq.com/open/js/jweixin-1.6.0.js
放在他们的系统引入
config:fail 但是没说什么原因
这是因为我鉴权的 url 不是 window.parent.location.href,而是 window.location.href
这回我直接用政务微信扫描生产环境的二维码是行的通的，之前为什么不这么做？是因为报登录失败，我问 animal 系统的对接人说我们是不能直接登生产环境，后来我们这边的同事说是可以的，并提供了生产环境的用户名密码。
基于此就要考虑由 animal 系统的人来提供鉴权，我们传一些动态参数。线上会议讨论，提到我们的代码他们哪些要改的时候，animal 系统的前端提到鉴权 url 的问题，我修改后试了一下可以了。
总结
有时候解决问题是需要多个角度，问题也具备一定的随机性，比如换一个人来做，他可能首先想到的就是 iframe，animal 系统和我们都有一个测试环境，在里面虽然不同域，但是调用 wx.config 的现象是相同的。除非有明确的经验，否则经验也极有可能限制住思路。
我看网上挺多 wx.config 的问题但没有明确答案，其中 jsapi_ticket 是 animal 系统提供的，剩下的有我自己完成，这也一度是我怀疑的。中间还拉了几次政务微信的人开会，结论是可能签名算法不对，虽然我认为不是这个问题，但也想借着这个由子让他们完整的提供参数，从代码设计的角度来看也是合理的。
每当遇到这种问题，都会想起很早之前结论，问题的解决最终还是要靠自己，一定是某些没注意到的点，到了后面我的心态也很不好了，失误很多，尤其是没注意到 iframe 这个问题上，总觉得是别人的问题，总想着让人家配合，这都要反思。
