Solución al problema del aviso de pago no registrado en la página web de WeChat
Recientemente desarrollé una aplicación de una sola página y luego la integré en WeChat. Debido a que el proyecto debe estar conectado al pago de WeChat, también se encontraron algunos problemas durante el proceso de desarrollo. Así que escribí este artículo con la esperanza de dar una referencia a amigos que también encuentran el mismo problema.
Después de empaquetar y lanzar el proyecto, se informó el error anterior cuando se probó en WeChat. Revisé mucha información en línea, pero no hay una solución detallada.
Quizás por razones de seguridad, cuando utilizamos el JSSDK proporcionado por WeChat, necesitamos firmar la URL actual. Necesitamos completar la URL del sitio web actual en la plataforma pública WeChat. Los detalles son los siguientes:
Entonces la URL vinculada a nuestra plataforma pública WeChat debe ser www.test.com/orderPlus/. WeChat permite cambiar el último parámetro de la URL. Ahora podemos llamar a la interfaz de pago de WeChat normalmente.
Si la URL que visitas es la siguiente, aparecerá el error de la imagen de arriba, y aparecerá un aviso de que la URL de la página actual no está registrada.
Porque la URL firmada por WeChat solo puede permitir que se cambie el último parámetro de la dirección URL. Sin embargo, en el desarrollo real, es posible que tengamos muchas páginas de pago con diferentes profundidades y WeChat solo permite agregar 5 direcciones de autorización de URL. ¡Cómo solucionarlo en ese caso!
Si encuentra los problemas anteriores, podemos utilizar los métodos History.pushState() y History.replaceState() de H5. Las funciones de estos dos métodos son las mismas. Solo modificarán la dirección URL actual, pero no actualizarán nuestra página web. La única diferencia es que uno recrea una dirección URL, mientras que el otro modificará la dirección URL actual. lo que da como resultado que el historial de enrutamiento se sobrescriba. Entonces nuestro problema podrá resolverse. Para el uso específico de estos dos métodos, puede consultar la documentación oficial.
La solución general es, por ejemplo, en una página de recarga, después de ingresar el monto y hacer clic en el botón de recarga, primero se activa y se pasa History.pushState(null, null, "A.html"). En Tres parámetros, consulte el sitio web oficial para conocer los dos primeros parámetros, y el último parámetro es la dirección URL que debemos modificar.
Aquí explicaré algunas de mis propias experiencias después de usar el método anterior. Hay algunos puntos a tener en cuenta sobre el tercer parámetro del método anterior.
Cuando pasamos "/A.html", eliminará todos los parámetros después de nuestro nombre de dominio y luego agregará nuestros parámetros.
Cuando pasamos "A.html", solo modificará el último parámetro de la URL.
Cuando pasamos "?A.html", agregará los parámetros agregados a nuestra URL.
Lo anterior es a lo que hay que prestar atención.
Al principio pensé que a través de la apelación, todo iría bien. Como resultado, durante mi prueba real, ocurrió otra situación de trampa. En la prueba, los teléfonos Android pueden iniciar el pago con éxito, pero los iOS no. (Se puede activar por primera vez en iOS, pero no se puede activar normalmente después de cerrar la página web y abrirla nuevamente).
Después de verificar mucha información, el resultado final es que para aplicaciones de una sola página, la URL de la que el sistema iOS obtiene la firma es la dirección que ingresamos por primera vez, mientras que el sistema Android obtiene la URL actual. DIRECCIÓN.
Hemos dicho antes que WeChat puede permitir un parámetro variable después de la URL, pero ahora que hay dos parámetros, el resultado es que no se puede evocar el pago. Android obtiene la dirección URL actual y cada vez que invocamos el pago, modificaremos esta dirección, por lo que Android no tiene ningún problema, mientras que iOS obtiene la dirección que ingresamos por primera vez.
En este caso, la dirección URL solo se puede modificar cuando se ingresa por primera vez al sistema ios.
Utilizo el marco de reacción para desarrollar una aplicación de una sola página, así que modifiqué la dirección URL en app.js, que es el componente de nivel superior. Resuelva el problema con éxito.
Pensé que todo terminaría ahí, pero como resultado, surgió otro problema problemático. Uno de los parámetros en la URL del proyecto son los diferentes valores de ID generados por el backend según los diferentes usuarios después de la autorización de WeChat. En este caso, surge un problema.
Lo anterior es sólo un ejemplo. De hecho, los usuarios son impredecibles. Solo hay 5 direcciones URL que autorizamos a través del backend de la plataforma pública WeChat. Incluso si no hay límite, es imposible agregarlas manualmente.
Después de pensar durante mucho tiempo, finalmente pensé en un método. Aquí necesitamos usar la tercera forma de escribir el tercer parámetro de History.pushState(), que consiste en agregar un "?". ¿Porque, en el navegador, el sistema utilizará de forma predeterminada? Todos los parámetros posteriores se ignoran.
Para la URL anterior, el sistema solo reconocerá www.test.com/orderPlus/demo y no se preocupará por los parámetros posteriores, y la firma autorizada de WeChat solo buscará los parámetros válidos anteriores. Entonces podemos modificar la dirección URL de esta manera.
Además, la dirección URL modificada de esta manera no causará problemas con el enrutamiento interno de la aplicación de una sola página.