Como conectar o site H5 ou o pacote H5 uni-app à conta oficial do WeChat para pagamento

Como conectar o site H5 ou o pacote H5 uni-app à conta oficial do WeChat para pagamento

http://www.linfengya.cn/?post=39

Aqui, tomo como exemplo um site H5 empacotado por uniapp (sites H5 comuns ainda são comuns, e está tudo bem se for melhor que uma cabaça)

Não há interface de pagamento encapsulada na documentação do site oficial do uniapp, portanto, mesmo que o H5 seja escrito no uniapp, você ainda terá que seguir o processo normal de pagamento da conta pública de acesso ao H5.

Preparação pré-requisito:

① Certifique-se de que a conta oficial do WeChat solicitou o pagamento do WeChat

②Appid da conta oficial do WeChat

③O segredo da conta oficial do WeChat (geralmente, o front-end não precisa usar isso, mas o back-end precisa usar isso)

④ Configure um nome de domínio seguro para a conta oficial

Processo: ①Obtenha o código por meio de autorização

② Utilize o parâmetro openid para obter os parâmetros necessários para pagamento através do código.

③Injetar configuração de verificação de permissão por meio da interface wx.config

​ ④ Se a verificação da assinatura do pré-pedido for aprovada, prossiga para a etapa 5 (haverá muitos erros nesta etapa, como parâmetros ausentes, assinatura errada, chamadas ilegais, etc.)

⑤Use WeixinJSBridge.invoke para ativar o pagamento via H5 no WeChat e tudo ficará bem.

Vamos começar a colar o código:

Primeiro use o npm para instalar o jsApi do WeChat (você deve conseguir fazer isso, assim como o vue usa o npm para instalar dependências)

初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save



H5的话 要引入js
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>

Em seguida, use a autorização do WeChat (porque estou fazendo login e me registrando com uma conta e não preciso obter as informações do usuário do WeChat, então uso a autorização silenciosa).A propósito, vamos aprender sobre as duas autorizações do WeChat (meu Google): existem dois tipos de autorização de conta oficial Um método é a autorização silenciosa. O usuário não tem conhecimento, mas as informações básicas do usuário não podem ser obtidas. Se você deseja obter informações do usuário, você precisa usar outro método de autorização. Como esse método envolve privacidade, é necessário o consentimento do usuário. Tudo bem.

A forma de obtê-lo é

https://open.weixin.qq.com/connect/oauth2/authorize?appid= Erro de análise do KaTeX: 'EOF' esperado, obteve '&' na posição 8: {appid}&̲redirect_uri= {uri}&response_type=code&scope=$ {scope}&state=123#wechat_redirect

  //登录成功后跳转的首页域名  有些文章中写的这个地址需要进行encodeURIComponent()加密   我这里没有进行加密
var uri = 'http://www.linfeng******.com/index.html';  
//公众号的appid
var appid = 'wx2aec******62811f';

window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid +'&redirect_uri='+uri+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect');

Seguindo o link, você pode analisar o URL depois de acessar a página inicial e obter o código.

Chamar este método na página inicial retornará uma string. Se houver um valor, o valor é o código.

function urlGetCode(){
    var indexUrl = location.search.substr(1);//截取到当前的地址
    var items = indexUrl.split('&');
    var item;
    var code;
    for (let a = 0; a < items.length; a++) {
        item = items[a].split("=");
        if (item[0] == 'code') {
            code = item[1];
            return code;
        }
    }
}

Depois de obtermos o código, precisamos chamar a interface e usar o código em troca de um openid.

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

Descrição do parâmetro

parâmetro	Isso é necessário	ilustrar
aplicativo	sim	O identificador exclusivo da conta oficial
segredo	sim	O appsecret da conta oficial
código	sim	Preencha os parâmetros do código obtidos na primeira etapa
tipo_de_concessão	sim	Preencha o código_de_autorização

O front-end pode chamar essa interface, mas será de domínio cruzado, portanto, essa interface geralmente é encapsulada pelo back-end. Você só precisa passar o código para o back-end e deixar o back-end retornar um openid para você e, em seguida, armazenar o openid no cache, porque a predefinição Você precisa usar esse openid antes de fazer um pedido e pagar.

Para obter detalhes, consulte a documentação de desenvolvimento do WeChat: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1

Em seguida, vamos para a página de pagamento do pedido e chamamos a interface de pagamento. Depois disso, o background retornará alguns parâmetros de pré-pedido, como

{
	"appId": "wx2*********62811f",
	"nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
	"orderNo": 122816*********7682,
	"package": "prepay_id=wx14120839*********6f960fd1318413600",
	"sign": "F581AD6144487*********4B1CBC0AB3",
	"signType": "MD5",
	"timeStamp": 1581653318,
	"totalFee": 190
}

Em seguida, obtemos esses parâmetros e verificamos a configuração injetando permissões por meio da interface de configuração.

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

Para obter detalhes, consulte a documentação de desenvolvimento do WeChat: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

Se a depuração for verdadeira, uma janela pop-up será alertada. Se o conteúdo da janela pop-up for {"errMsg": "config:ok"}, significa que a verificação foi aprovada.

A seguir, você pode ativar o pagamento em H5 no WeChat.

WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
    appId: appId, //公众号名称，由商户传入
    timeStamp: timestamp, //时间戳，自1970年以来的秒数
    nonceStr: nonceStr, //随机串
    package: data.package,
    signType: 'MD5', //微信签名方式：
    paySign: sign //微信签名
},
    function (res) {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            callback(res)
        } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
            errorCallback(res)
        }
    }
)

Para obter detalhes, consulte a documentação de pagamento do WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7

Nesta etapa, se os parâmetros e a verificação da assinatura forem aprovados, ela estará concluída. Se a assinatura estiver errada, você poderá usar a ferramenta de verificação de assinatura.

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1

Código completo

O último código completo precisa ser usado em mais de um local devido a necessidades de negócios. Por exemplo, pagamento também é usado quando o pedido está pendente de pagamento e também é usado nos detalhes do pedido. Portanto, é recomendável encapsular o pagamento, o que pode reduzir muito código.

1. Primeiro use o npm para instalar o jsApi do WeChat (você deve conseguir fazer isso, assim como o vue usa o npm para instalar dependências)

初始化：
npm init -y
安装微信模块：
npm install jweixin-module --save



H5的话 要引入js
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>

2. Crie um novo arquivo wxApi.js em comum do uniapp

wxApi.js

/*
    微信(公众号)支付方法
*/
const wx = require('jweixin-module');
const wexinPay = (data, callback, errorCallback) => {
	let [appId, timestamp, nonceStr, signature, packages, sign] = [data.appId, data.timeStamp, data.nonceStr, data.sign,
		data.package, data.sign
	];
	
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	WeixinJSBridge.invoke(
		'getBrandWCPayRequest', {
			appId: appId, //公众号名称，由商户传入
			timeStamp: timestamp, //时间戳，自1970年以来的秒数
			nonceStr: nonceStr, //随机串
			package: data.package,
			signType: 'MD5', //微信签名方式：
			paySign: sign //微信签名
		},
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				// 使用以上方式判断前端返回,微信团队郑重提示：
				//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				//支付成功回调
				callback(res)
			} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
				//支付失败回调
				errorCallback(res)
			}
		}
	)
}

export default {
	wexinPay
}

3. Importe e monte-o em main.js (deve usar compilação condicional, caso contrário reportará 'jweixin' de indefinido ao empacotar o APP ou executá-lo na base do celular, causando uma tela branca no celular)

// #ifdef H5
//导入 //（一定要用条件编译，否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏）
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxPay = wxApi.wexinPay
// #endif

4. Ligue para pagamento pay.vue na página

this.$wxPay(payInfo, function (res) {
    /*成功的回调*/
    console.log("支付成功")
}, function (e) {
    /**失败的回调*/
     console.log("支付失败或取消支付")
})


//该方法的第一个参数payInfo为调用后台支付返回的预下单参数
//打印payInfo
//{
//	"appId": "wx2*********62811f",
//	"nonceStr": "b0c2e4491a8a5f06a1f4c0d81cd3c40c",
//	"orderNo": 122816*********7682,
//	"package": "prepay_id=wx14120839*********6f960fd1318413600",
//	"sign": "F581AD6144487*********4B1CBC0AB3",
//	"signType": "MD5",
//	"timeStamp": 1581653318,
//	"totalFee": 190
//}
//第二个参数是成功回调  第三个参数是失败回调

Reimpresso de: Xiao Fengfeng não é louco

Endereço original: "Como conectar o H5 empacotado pelo site H5 ou uni-app à conta oficial do WeChat para pagamento" Publicado em 14/02/2020