Integração WeChat JSSDK com NodeJS e Web Integração WeChat JS-SDK com NodeJS e Web.
Inglês | Notas de versão
npm install wechat-jssdk --save
# 或者
yarn add wechat-jssdk
const { Wechat } = require ( 'wechat-jssdk' ) ;
const wx = new Wechat ( wechatConfig ) ;
wechatConfig
está no seguinte formato:
{
//第一个为设置网页授权回调地址
wechatRedirectUrl : "http://yourdomain.com/wechat/oauth-callback" ,
wechatToken : "xxx" , //第一次在微信控制台保存开发者配置信息时使用
appId : "xxx" ,
appSecret : "xxx" ,
card : true , //开启卡券支持,默认关闭
payment : true , //开启支付支持,默认关闭
merchantId : '' , //商户ID
paymentSandBox : true , //沙箱模式,验收用例
paymentKey : '' , //必传,验签密钥,TIP:获取沙箱密钥也需要真实的密钥,所以即使在沙箱模式下,真实验签密钥也需要传入。
//pfx 证书
paymentCertificatePfx : fs . readFileSync ( path . join ( process . cwd ( ) , 'cert/apiclient_cert.p12' ) ) ,
//默认微信支付通知地址
paymentNotifyUrl : `http://your.domain.com/api/wechat/payment/` ,
//小程序配置
"miniProgram" : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
}
Outras configurações suportadas possuem valores padrão, que são basicamente os endereços da API do ./lib/config.js
e não serão alterados.
1. Acesse a plataforma pública WeChat
Baixe um arquivo como MP_verify_XHZon7GAGRdcAFxx.txt
e coloque-o no diretório raiz do site, como http://yourdomain.com/MP_verify_XHZon7GAGRdcAFxx.txt
. O WeChat verificará o link.
2. Em seguida, forneça uma interface em seu aplicativo express/koa para que o navegador obtenha informações de verificação, @see demo
//express app:
router . get ( '/get-signature' , ( req , res ) => {
wx . jssdk . getSignature ( req . query . url ) . then ( signatureData => {
res . json ( signatureData ) ;
} ) ;
} ) ;
//koa2/koa-router app:
router . get ( '/get-signature' , async ctx => {
ctx . body = await wx . jssdk . getSignature ( ctx . request . query . url ) ;
} ) ;
3. Após obter a assinatura, prossiga para a próxima etapa de como usar o navegador.
const WechatJSSDK = require ( 'wechat-jssdk/dist/client.umd' ) ;
//ES6 import
import WechatJSSDK from 'wechat-jssdk/dist/client.umd' ;
//没有打包的话直接script扔到html,然后从`window`获取, e.g:
const wechatObj = new window . WechatJSSDK ( config )
config
deve ser:
const config = {
//前4个是微信验证签名必须的参数,第2-4个参数为类似上面 '/get-signature' 从node端获取的结果
'appId' : 'xxx' ,
'nonceStr' : 'xxx' ,
'signature' : 'xxx' ,
'timestamp' : 'xxx' ,
//下面为可选参数
'debug' : true , //开启 debug 模式
'jsApiList' : [ ] , //设置所有想要使用的微信jsapi列表, 默认值为 ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline', 'onMenuShareAppMessage'],分享到朋友圈及聊天记录
'customUrl' : '' //自定义微信js链接
}
const wechatObj = new WechatJSSDK ( config ) ;
wechatObj . initialize ( )
. then ( w => {
//set up your share info, "w" is the same instance as "wechatObj"
} )
. catch ( err => {
console . error ( err ) ;
} ) ;
Depois de verificar a assinatura com sucesso, você pode personalizar seu conteúdo de compartilhamento:
Por padrão, o SDK registra apenas
updateAppMessageShareData
,updateTimelineShareData
,onMenuShareTimeline(wx即将废弃)
,onMenuShareAppMessage(wx即将废弃)
//自定义分享到聊天窗口
//内部调用 `wechatObj.callWechatApi('updateAppMessageShareData', {...})`, 语法糖而已
wechatObj . updateAppMessageShareData ( {
type : 'link' ,
title : 'title' ,
link : location . href ,
imgUrl : '/logo.png' ,
desc : 'description' ,
success : function ( ) { } ,
fail : function ( ) { } ,
complete : function ( ) { } ,
cancel : function ( ) { }
} ) ;
//自定义分享到朋友圈
//语法糖
wechatObj . updateTimelineShareData ( {
type : 'link' ,
title : 'title' ,
link : location . href ,
imgUrl : '/logo.png'
} ) ;
Para obter o objeto WeChat original wx
, você pode obtê-lo por meio de wechatObj.getOriginalWx()
.
Se a primeira verificação falhar, você poderá atualizar as informações da assinatura error
e reenviar a solicitação de verificação:
wechatObj.signSignature(newSignatureConfig);
newSignatureConfig
só precisa conter:
{
'nonceStr': 'xxx',
'signature': 'xxx',
'timestamp': 'xxx',
}
Chame outras interfaces WeChat:
wechatObj.callWechatApi(apiName, apiConfig)
apiName
e apiConfig
consulte a documentação oficial da interface do WeChat.
Os URLs de autorização padrão do WeChat gerados são wx.oauth.snsUserInfoUrl
e wx.oauth.snsUserBaseUrl
, e o URL de retorno de chamada padrão é wechatRedirectUrl
configurado em wechatConfig
. Você também pode personalizar o retorno de chamada chamando wx.oauth. generateOAuthUrl(customUrl, scope, state)
endereço
//callback url handler
//如"wechatRedirectUrl"配置为 "http://127.0.0.1/wechat/oauth-callback", 你的路由需要为:
router . get ( '/wechat/oauth-callback' , function ( req , res ) {
//得到code,获取用户信息
wx . oauth . getUserInfo ( req . query . code )
. then ( function ( userProfile ) {
console . log ( userProfile )
res . render ( "demo" , {
wechatInfo : userProfile
} ) ;
} ) ;
} ) ;
DICA: certifique-se de que o nome de domínio do endereço de redirecionamento acima tenha sido definido nas configurações de endereço de retorno de chamada autorizado no WeChat.
Defina card: true
em wechatConfig para oferecer suporte ao servidor para funções de cartão e cupom, consulte a demonstração.
Para visualizar APIs de cartões e cupons, consulte APIs de cartões
Defina payment: true
em wechatConfig para oferecer suporte ao servidor para a função de pagamento WeChat. Outras configurações necessárias para pagamento também precisam ser definidas em conjunto.
Demonstração de referência.
Para visualizar APIs de pagamento, consulte APIs de pagamento
Use o suporte do lado do servidor do miniprograma (consulte a interface) e defina appId
e appSecret
do miniprograma na configuração:
const { Wechat , MiniProgram } = require ( 'wechat-jssdk' ) ;
const wechatConfig = {
"appId" : "appid" ,
"appSecret" : "app_secret" ,
//...other configs
//...
//小程序配置
"miniProgram" : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
} ;
const wx = new Wechat ( wechatConfig ) ;
//调用小程序接口
wx . miniProgram . getSession ( 'code' ) ;
//手动实例化 MiniProgram
const miniProgram = new MiniProgram ( {
miniProgram : {
"appId" : "mp_appid" ,
"appSecret" : "mp_app_secret" ,
}
} )
A loja é usada para personalizar a persistência do token de armazenamento (como arquivos, bancos de dados, etc.) e implementar sua própria loja. Consulte a API.
Vem com Store: FileStore
, MongoStore
, o padrão é FileStore
, armazenado no arquivo wechat-info.json
.
Veja o wiki da API
Após a v3.1.0, a página de demonstração adiciona testes de caso de uso para cupons e pagamentos. Copie demo/wechat-config-sample.js
para demo/wechat-config.js
,
Em seguida, modifique appId
, appSecret
e outras configurações, como configurações de pagamento, se precisar usar a função de pagamento.
Defina seu próprio appId
e appSecret
em ./demo/index.js
, em seguida, npm start
ou npm run dev
e use as ferramentas de desenvolvedor do WeChat para testar.
Se você achar este projeto útil, compre-me um café
MIT @ 2016 até o presente, Jason