Explicação detalhada das armadilhas do pagamento HTML5 WeChat

Durante o desenvolvimento das contas públicas do WeChat, eu não tinha experiência com o desenvolvimento relacionado ao WeChat antes, então caí em armadilhas e subi em armadilhas. No entanto, isso também aumentou muito minha familiaridade com os documentos públicos e oficiais do WeChat.

Armadilha 1: Problemas com SPA de página única e roteamento de back-end

Armadilha 2: Há uma grande probabilidade de que o Android não consiga ativar o pagamento do WeChat (falha ao introduzir o pacote js-sdk do WeChat)

Na documentação oficial do WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

Existe uma DEMO como esta:

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Nome oficial da conta, passado pelo comerciante timeStamp:1395712654, //Carimbo de hora, número de segundos desde 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //String aleatório package:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //Método de assinatura WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //Assinatura WeChat}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Use o método acima para julgar o retorno do front-end. err_msg será usado quando o usuário pagar com sucesso. Retorna ok, mas não é garantido que seja absolutamente confiável. }); }if (typeof WeixinJSBridge == indefinido){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}

Depois que o colega de back-end autorizou o código com sucesso, felizmente introduzi esse código na página de atividades e enviei a compilação para teste. Bem, a Apple não tem problemas e o Android parece não ter problemas. o pagamento, e inicialmente pensei que fosse a versão WeChat. Existem outros motivos, mas a probabilidade de sucesso é muito baixa. Só pode ser feito uma vez a cada 10 vezes. Mude isso.

Abra as ferramentas de desenvolvedor do WeChat, registre-se e, finalmente, descubra isso nesta etapa if (typeof WeixinJSBridge == indefinido)

1.ios pode ativar o js-sdk do navegador WeChat

2. A maioria dos Androids ficou indefinido.

Na verdade, não sei o motivo aqui. Pessoalmente, sinto que é um problema com a versão integrada do navegador WeChat Android e o método WeixinJSBridge. (Espero que alguém possa me dar uma resposta)

Como o js-sdk não pode ser ajustado, vamos introduzir a configuração manualmente // Então, às vezes, ser preguiçoso é mais problemático, aprenda com a lição

 if (typeof WeixinJSBridge == indefinido){ console.log( WeixinJSBridge); if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent('); WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}

 npm i -S weixin-js-sdk

Importe o módulo para a página que precisa ser introduzida

 importar wx de 'weixin-js-sdk'

Configuração (consulte a documentação oficial do WeChat: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // Ativa o modo de depuração. Os valores de retorno de todas as chamadas de API serão alertados no lado do cliente. Se quiser visualizar os parâmetros recebidos, você pode abri-los no lado do PC . As informações do parâmetro serão exibidas através do log. Elas serão impressas apenas no lado do PC: '', // Obrigatório, o identificador exclusivo do carimbo de data/hora da conta oficial: , // Obrigatório, o carimbo de data/hora da assinatura gerada. nonceStr: '', // Obrigatório, o carimbo de data e hora da assinatura gerada Assinatura de string aleatória: '', // Obrigatório, assinatura jsApiList: [] // Obrigatório, lista de interfaces JS que precisam ser usadas Por exemplo, se eu quiser chamar a interface de pagamento, é [chooseWXPay]});

Aqui o carimbo de data / hora está em letras minúsculas, s está em letras minúsculas e o tipo de dados é do tipo int.

Agora que a configuração foi bem-sucedida, continue lendo a documentação oficial.

A documentação oficial diz que existe um método pronto. Após a verificação da configuração ser bem-sucedida, a interface é colocada nele para garantir a execução.

 wx.ready(function(){ // O método ready será executado após a verificação das informações de configuração. Todas as chamadas de interface devem ser feitas após a interface de configuração obter o resultado. config é uma operação assíncrona no lado do cliente, portanto, se você precisa chamar a interface relevante quando a página é carregada, a interface relevante deve ser chamada na função pronta para garantir a execução correta. Para interfaces que são chamadas apenas quando acionadas pelo usuário, elas podem ser chamadas diretamente e não precisam ser. colocado na função pronta });

Importe parâmetros prontos (preste atenção ao tipo de dados e coopere bem com colegas de back-end - -)

 wx.chooseWXPay({timestamp: 0, // Carimbo de data e hora da assinatura do pagamento. Observe que todos os campos de carimbo de data e hora usados ​​no WeChat jssdk estão em letras minúsculas. No entanto, o nome do campo timeStamp usado pela versão mais recente do plano de fundo do pagamento para gerar assinaturas precisa colocar S em maiúscula caractere nonceStr: '', // String aleatória de assinatura de pagamento, não maior que 32 bits package: '', // O valor do parâmetro prepay_id retornado pela interface de pagamento unificada, o formato de envio é: prepay_id=/*/*/*) signType: '', // O método de assinatura, o padrão é 'SHA1' e você precisa passar ' MD5' ao usar a nova versão do pagamento paySign: ' ', // Assinatura de pagamento bem-sucedida: function (res) {// Função de retorno de chamada após pagamento bem-sucedido}});

Ao usar os dados do Vue prontos, acidentalmente caí no buraco apontado por isso. Se o bind não for adicionado, os parâmetros em wx.chooseWXPay não poderão obter os dados solicitados do backend. obtenha os dados que atribuí ao objeto de matriz this.wx_config após a solicitação.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Ativa o modo de depuração. Os valores de retorno de todas as apis chamadas serão alertados no lado do cliente. Se você quiser visualizar o parâmetros de entrada, você pode abri-lo no lado do PC, as informações do parâmetro serão impressas através do log e só serão impressas no lado do PC appId: this.wx_config.appId, // Obrigatório, o identificador exclusivo do oficial. carimbo de data/hora da conta: this.wx_config.timestamp, // Obrigatório, gerar carimbo de data e hora de assinatura nonceStr: this.wx_config.nonceStr, // Obrigatório, gerar string aleatória de assinatura de assinatura: this.wx_config.signature, // Obrigatório, assinatura jsApiList: this.wx_config.jsApiList // Obrigatório Preencha a lista de Interfaces JS que precisam ser usadas}); //Pagamento WeChat wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ timestamp: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, pacote: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, sucesso: função () { // Função de retorno de chamada após alerta de pagamento bem-sucedido (pagamento bem-sucedido); /hd/becomevip }, cancelar: function() { alert(falha no pagamento } });

É sempre inevitável pisar em armadilhas. Em resumo, não faça a coisa certa só porque tem medo de problemas.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.