Integración de WeChat JSSDK con NodeJS y Web Integración de WeChat JS-SDK con NodeJS y Web.
Inglés | Notas de la versión
npm install wechat-jssdk --save
# 或者
yarn add wechat-jssdk
const { Wechat } = require ( 'wechat-jssdk' ) ;
const wx = new Wechat ( wechatConfig ) ;
wechatConfig
tiene el siguiente 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" ,
}
}
Otras configuraciones admitidas tienen valores predeterminados, que son básicamente las direcciones de la API de WeChat y no cambiarán. Puede consultar ./lib/config.js
.
1. Vaya a la plataforma pública WeChat
Descargue un archivo como MP_verify_XHZon7GAGRdcAFxx.txt
y colóquelo en el directorio raíz del sitio web, como http://yourdomain.com/MP_verify_XHZon7GAGRdcAFxx.txt
. WeChat verificará el enlace.
2. Luego proporcione una interfaz en su aplicación express/koa para que el navegador obtenga información de verificación, @ver demostración
//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. Después de obtener la firma, continúe con el siguiente paso de cómo utilizar el 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
debería 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 ) ;
} ) ;
Después de verificar con éxito la firma, puede personalizar el contenido que comparte:
De forma predeterminada, SDK solo registra
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 obtener el objeto WeChat original wx
, puede obtenerlo a través de wechatObj.getOriginalWx()
.
Si la primera verificación falla, puede actualizar la información de la firma en error
y reenviar la solicitud de verificación:
wechatObj.signSignature(newSignatureConfig);
, newSignatureConfig
solo debe contener:
{
'nonceStr': 'xxx',
'signature': 'xxx',
'timestamp': 'xxx',
}
Llame a otras interfaces de WeChat:
wechatObj.callWechatApi(apiName, apiConfig)
apiName
y apiConfig
consulte la documentación de la interfaz oficial de WeChat.
Las URL de autorización de WeChat generadas de forma predeterminada son wx.oauth.snsUserInfoUrl
y wx.oauth.snsUserBaseUrl
, y la URL de devolución de llamada predeterminada es wechatRedirectUrl
configurada en wechatConfig
. También puede personalizar la devolución de llamada llamando wx.oauth. generateOAuthUrl(customUrl, scope, state)
DIRECCIÓN
//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
} ) ;
} ) ;
} ) ;
SUGERENCIA: Asegúrese de que el nombre de dominio de la dirección de redireccionamiento anterior se haya configurado en la configuración de la dirección de devolución de llamada autorizada en WeChat.
Configure card: true
en wechatConfig para admitir soporte del lado del servidor para funciones de tarjetas y cupones; consulte la demostración.
Para ver las API de tarjetas y cupones, consulte las API de tarjetas
Configure payment: true
en wechatConfig para admitir la compatibilidad del lado del servidor con la función de pago de WeChat. También se deben establecer juntas otras configuraciones necesarias para el pago.
Demostración de referencia.
Para ver las API de pago, consulte las API de pago.
Utilice el soporte del lado del servidor del miniprograma (consulte la interfaz) y configure appId
y appSecret
del miniprograma en la configuración:
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" ,
}
} )
La tienda se utiliza para personalizar la persistencia de los tokens de almacenamiento (como archivos, bases de datos, etc.) e implementar su propia tienda. Consulte la API.
Viene con Store: FileStore
, MongoStore
, el valor predeterminado es FileStore
, almacenado en el archivo wechat-info.json
.
Ver la wiki de la API
Después de v3.1.0, la página de demostración agrega pruebas de casos de uso para cupones y pagos. Copie demo/wechat-config-sample.js
a demo/wechat-config.js
.
Luego modifique appId
, appSecret
y otras configuraciones, como las configuraciones de pago, si necesita utilizar la función de pago.
Configure su propio appId
y appSecret
en ./demo/index.js
, luego npm start
o npm run dev
y use las herramientas de desarrollo de WeChat para realizar pruebas.
Si encuentras útil este proyecto, invítame un café.
MIT @ 2016-presente jason