wechat jssdk ดาวน์โหลด - ดาวน์โหลด wechat jssdk ซอร์สโค้ด

wechat-jssdk

การรวม WeChat JSSDK กับ NodeJS และเว็บ การรวม WeChat JS-SDK กับ NodeJS และเว็บ

อังกฤษ |. บันทึกประจำรุ่น

ฟังก์ชั่นหลัก

?เซิร์ฟเวอร์
?ด้านเบราว์เซอร์
?การอนุญาตเว็บ OAuth
?คูปอง WeChat
?WeChat จ่าย
?แอปเพล็ต WeChat
?ใช้ร้านค้า
?สาธิตให้สมบูรณ์

วิธีใช้

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

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

รายการการกำหนดค่า Wechat

wechatConfig อยู่ในรูปแบบต่อไปนี้:

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

การตั้งค่าอื่นๆ ที่รองรับจะมีค่าเริ่มต้น ซึ่งโดยพื้นฐานแล้วจะเป็นที่อยู่ของ WeChat API และจะไม่เปลี่ยนแปลง คุณสามารถตรวจสอบ . ./lib/config.js ได้

ตั้งค่าสภาพแวดล้อม WeChat

1. ไปที่แพลตฟอร์มสาธารณะ WeChat

ดาวน์โหลดไฟล์ เช่น MP_verify_XHZon7GAGRdcAFxx.txt และวางไว้ในไดเร็กทอรีรากของเว็บไซต์ เช่น http://yourdomain.com/MP_verify_XHZon7GAGRdcAFxx.txt WeChat จะตรวจสอบลิงก์นี้

2. จากนั้นจัดเตรียมอินเทอร์เฟซในแอป express/koa ของคุณสำหรับเบราว์เซอร์เพื่อรับข้อมูลการตรวจสอบ @see การสาธิต

 //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. หลังจากได้รับลายเซ็นแล้ว ให้ดำเนินการขั้นตอนต่อไปของวิธีใช้เบราว์เซอร์

ด้านเบราว์เซอร์

 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 ควรเป็น:

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

หลังจากตรวจสอบลายเซ็นสำเร็จแล้ว คุณสามารถปรับแต่งเนื้อหาการแชร์ของคุณได้:

ตามค่าเริ่มต้น sdk จะลงทะเบียนเฉพาะ 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'
} ) ;

หากต้องการรับวัตถุ WeChat ดั้งเดิม wx คุณสามารถรับได้ผ่าน wechatObj.getOriginalWx()
หากการตรวจสอบครั้งแรกล้มเหลว คุณสามารถอัปเดตข้อมูลลายเซ็นในการเรียกกลับ error และส่งคำขอตรวจสอบอีกครั้ง:
wechatObj.signSignature(newSignatureConfig); newSignatureConfig จำเป็นต้องมี:

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

โทรหาอินเทอร์เฟซ WeChat อื่นๆ:
wechatObj.callWechatApi(apiName, apiConfig)
apiName และ apiConfig โปรดดูเอกสารประกอบอินเทอร์เฟซอย่างเป็นทางการของ WeChat

OAuth

URL การอนุญาต WeChat ที่สร้างตามค่าเริ่มต้นคือ wx.oauth.snsUserInfoUrl และ wx.oauth.snsUserBaseUrl และ URL โทรกลับเริ่มต้นคือ wechatRedirectUrl ที่กำหนดค่าใน wechatConfig คุณยังสามารถปรับแต่งการโทรกลับได้โดยการเรียก wx.oauth. generateOAuthUrl(customUrl, scope, state) ที่อยู่

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

เคล็ดลับ: ตรวจสอบให้แน่ใจว่าชื่อโดเมนที่อยู่การเปลี่ยนเส้นทางด้านบนได้รับการตั้งค่าในการตั้งค่าที่อยู่ติดต่อกลับที่ได้รับอนุญาตใน WeChat

คูปองวีแชต

ตั้งค่า card: true ใน wechatConfig เพื่อรองรับการสนับสนุนฝั่งเซิร์ฟเวอร์สำหรับฟังก์ชันการ์ดและคูปอง โปรดดูการสาธิต
หากต้องการดู API ของการ์ดและคูปอง โปรดดูที่ API ของการ์ด

วีแชต เพย์

ตั้ง payment: true ใน wechatConfig เพื่อรองรับการสนับสนุนฝั่งเซิร์ฟเวอร์สำหรับฟังก์ชันการชำระเงิน WeChat จำเป็นต้องตั้งค่าอื่น ๆ ที่จำเป็นสำหรับการชำระเงินร่วมกัน
การสาธิตการอ้างอิง
หากต้องการดู API การชำระเงิน โปรดดู API การชำระเงิน

มินิโปรแกรม

ใช้การสนับสนุนฝั่งเซิร์ฟเวอร์ของมินิโปรแกรม (ดูอินเทอร์เฟซ) และตั้ง appId และ appSecret ของมินิโปรแกรมในการกำหนดค่า:

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

การใช้ร้านค้า

Store ใช้เพื่อปรับแต่งการคงอยู่ของโทเค็นการจัดเก็บข้อมูล (เช่น ไฟล์ ฐานข้อมูล ฯลฯ) และใช้งาน Store ของคุณเอง โปรดดู API
มาพร้อมกับ Store: FileStore , MongoStore ค่าเริ่มต้นคือ FileStore ซึ่งจัดเก็บไว้ในไฟล์ wechat-info.json

API

ดูวิกิ API

สาธิต

หลังจากเวอร์ชัน 3.1.0 หน้าสาธิตจะเพิ่มการทดสอบกรณีการใช้งานสำหรับคูปองและการชำระเงิน คัดลอก demo/wechat-config-sample.js ไปที่ demo/wechat-config.js
จากนั้นแก้ไข appId , appSecret และการกำหนดค่าอื่นๆ เช่น การกำหนดค่าการชำระเงิน หากคุณต้องการใช้ฟังก์ชันการชำระเงิน

ตั้งค่า appId และ appSecret ของคุณเองใน ./demo/index.js จากนั้น npm start หรือ npm run dev และใช้เครื่องมือสำหรับนักพัฒนา WeChat เพื่อทดสอบ