surge el problema
La página H5 puede llamar a la API scanQRCode normalmente, pero informa un error de firma cuando está incrustado en el subprograma en la forma de vista web.
Solución de problemas
Encienda el modo de depuración e imprima la información de configuración para encontrar que toda la información está disponible, pero aún se informa el error de firma, parece que la configuración no debería ser un problema; y luego descubrió que la página ingresó por primera vez es la página que llama a jssdk. Si la llamada es exitosa, si la página que llama a jssdk no es la primera página ingresada, se informará un error de firma; porque también encontré el problema de ios llamando a jssdk informando falla de firma en H5 antes. Entonces, la inferencia es un problema con las URL firmadas.
resolver
La solución es la misma que la solución al problema de ios H5 llamando a jssdk para informar fallas en la firma.La url utilizada por ios para llamar a la firma jssdk no es la url de la página actual, sino la url de la página que ingresó por primera vez. Es hora de firmar, así que aquí usamos el pequeño programa Try this method too.
//H5 main.js
router.afterEach((to, from) => {
// 记录最初进入路由的第一个页面的url
if (!sessionStorage.wxConfigSignUrl ) {
let wxConfigSignUrl = location.protocol + '//' + location.host + to.fullPath
window.sessionStorage.setItem('wxConfigSignUrl ', wxConfigSignUrl)
}
}
//H5 调用 jssdk
// 微信扫描
export function wxScan(cb) {
// 记录最初进入路由的第一个页面的url
let wxConfigSignUrl = window.sessionStorage.getItem('wxConfigSignUrl')
const isAdnroid = /Android/i.test(navigator.userAgent)
// 获取微信JS-SDK配置信息
let getUrl = isAdnroid ? location.href.split('#')[0] : wxConfigSignUrl
const env = window.navigator.userAgent
// 小程序web-view环境需要用最初进入路由的第一个页面的url去签名
if (/miniProgram/.test(env)) {
getUrl = wxConfigSignUrl
}
getJsApiConfigApi(getUrl).then(response => {
var res = response.data
if (res.success) {
var wxdata = res.data
wx.config({
debug: false,
appId: wxdata.appId, // 填写自己的appID
timestamp: wxdata.timestamp,
nonceStr: wxdata.noncestr,
signature: wxdata.signature,
jsApiList: ['checkJsApi', 'scanQRCode']
})
wx.ready(function() {
wx.checkJsApi({
jsApiList: ['scanQRCode'],
success: function(res) {
setTimeout(()=> {
cb && cb()
},1000)
}
})
})
} else {
console.log(res.msg)
}
})
}
resultado
Después de esta modificación, la página que llama a jssdk se puede llamar con éxito incluso cuando no es la primera página ingresada, ¡Bien!