Unduh wechat jssdk - unduh kode sumber wechat jssdk

wechat-jssdk

Integrasi WeChat JSSDK dengan NodeJS dan Web Integrasi WeChat JS-SDK dengan NodeJS dan Web.

Bahasa Inggris |. Catatan Rilis

Fungsi utama

?Server
?Sisi peramban
?Otorisasi web OAuth
?Kupon WeChat
?WeChat Membayar
?Aplet WeChat
?Gunakan Toko
?Demo Lengkap

Cara menggunakan

npm install wechat-jssdk --save
# 或者
yarn add wechat-jssdk

 const { Wechat } = require ( 'wechat-jssdk' ) ;
const wx = new Wechat ( wechatConfig ) ;

Item konfigurasi WeChat

wechatConfig dalam format berikut:

 {
  //第一个为设置网页授权回调地址
  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" ,
  }
}

Pengaturan lain yang didukung memiliki nilai default, yang pada dasarnya adalah alamat API ./lib/config.js dan tidak akan berubah.

Siapkan lingkungan WeChat

1. Buka platform publik WeChat

Unduh file seperti MP_verify_XHZon7GAGRdcAFxx.txt dan letakkan di direktori root situs web, seperti http://yourdomain.com/MP_verify_XHZon7GAGRdcAFxx.txt .

2. Kemudian sediakan antarmuka di aplikasi express/koa Anda untuk browser untuk mendapatkan informasi verifikasi, @lihat 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. Setelah mendapatkan tanda tangan, lanjutkan ke langkah berikutnya tentang cara menggunakan browser.

Sisi peramban

 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 seharusnya:

 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 ) ;
  } ) ;

Setelah berhasil memverifikasi tanda tangan, Anda dapat menyesuaikan konten berbagi Anda:

Secara default, SDK hanya mendaftarkan 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'
} ) ;

Untuk mendapatkan objek WeChat asli wx , Anda dapat memperolehnya melalui wechatObj.getOriginalWx() .
Jika verifikasi pertama gagal, Anda dapat memperbarui informasi tanda tangan di panggilan balik error dan mengirim ulang permintaan verifikasi:
wechatObj.signSignature(newSignatureConfig); , newSignatureConfig hanya perlu berisi:

 {
  'nonceStr': 'xxx',
  'signature': 'xxx',
  'timestamp': 'xxx',
}

Hubungi antarmuka WeChat lainnya:
wechatObj.callWechatApi(apiName, apiConfig)
apiName dan apiConfig lihat dokumentasi antarmuka resmi WeChat.

OAuth

URL otorisasi WeChat yang dihasilkan secara default adalah wx.oauth.snsUserInfoUrl dan wx.oauth.snsUserBaseUrl , dan URL panggilan balik default adalah wechatRedirectUrl yang dikonfigurasi di wechatConfig . Anda juga dapat menyesuaikan panggilan balik dengan memanggil wx.oauth. generateOAuthUrl(customUrl, scope, state) alamat

 //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
            } ) ;
          } ) ;
} ) ;

TIPS: Pastikan nama domain alamat pengalihan di atas telah diatur dalam pengaturan alamat panggilan balik resmi di WeChat.

Kupon WeChat

Setel card: true di wechatConfig untuk mendukung dukungan sisi server untuk fungsi kartu dan kupon, lihat demo.
Untuk melihat API kartu dan kupon, lihat api kartu

Pembayaran WeChat

Setel payment: true di wechatConfig untuk mendukung dukungan sisi server untuk fungsi pembayaran WeChat lainnya yang diperlukan untuk pembayaran juga perlu diatur bersama.
Demo referensi.
Untuk melihat API pembayaran, lihat api pembayaran

Program kecil

Gunakan dukungan sisi server dari program mini (lihat antarmuka), dan atur appId dan appSecret dari program mini dalam konfigurasi:

 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" ,
  }
} )

Menggunakan Toko

Store digunakan untuk menyesuaikan persistensi token penyimpanan (seperti file, database, dll.) dan mengimplementasikan Store Anda sendiri. Silakan lihat API.
Dilengkapi dengan Store: FileStore , MongoStore , defaultnya adalah FileStore , disimpan dalam file wechat-info.json .

Lebah

Lihat wiki API

Demo

Setelah v3.1.0, halaman demo menambahkan uji kasus penggunaan untuk kupon dan pembayaran, Salin demo/wechat-config-sample.js ke demo/wechat-config.js ,
Kemudian ubah appId , appSecret , dan konfigurasi lainnya seperti konfigurasi pembayaran jika Anda perlu menggunakan fungsi pembayaran.

Tetapkan appId dan appSecret Anda sendiri di ./demo/index.js , lalu npm start atau npm run dev , dan gunakan alat pengembang WeChat untuk mengujinya.