หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

วีแชทเกต

ห้องสมุดการพัฒนาแพลตฟอร์มสาธารณะ WeChat

อินเทอร์เฟซที่รองรับ:

  • access_token (ใช้โดย API แบ็กเอนด์)
  • การรับข้อมูลการอนุญาตผู้ใช้ (OAuth2)
  • JS-SDK
  • การห่อหุ้มข้อความตอบกลับ
  • อินเตอร์เฟซเมนู
  • ส่วนต่อประสานวัสดุ

คุณสมบัติ:

  • จัดการการรีเฟรชตั๋วและการหมดอายุของ access_token และ JS-SDK โดยอัตโนมัติ
  • รองรับบัญชีสาธารณะ WeChat หลายบัญชี
  • การสนับสนุนหลายสภาพแวดล้อม (การพัฒนา การผลิต) เพื่ออำนวยความสะดวกในการทดสอบในท้องถิ่น
  • วิธีการควบคุมและตัวช่วยเหลือ (การจัดการเซสชัน WeChat ฯลฯ)
  • อินเทอร์เฟซที่เรียบง่ายและการปรับแต่งที่ง่ายดาย

วิดีโอสอนการใช้งาน: การพัฒนาบัญชีสาธารณะ WeChat

การติดตั้ง

เพิ่มบรรทัดนี้ลงใน Gemfile ของแอปพลิเคชันของคุณ: 

 gem 'wechat-gate'

แล้วดำเนินการ: 

 $ bundle

หรือติดตั้งด้วยตัวเองเป็น: 

 $ gem install wechat-gate

บัญชีอย่างเป็นทางการ

ก่อนเริ่มทำงาน คุณต้องทำการกำหนดค่าต่อไปนี้บนแพลตฟอร์มบัญชีสาธารณะ WeChat:

  1. เปิดบัญชีอย่างเป็นทางการของคุณ (บัญชีบริการ) และเปิดใช้งานการตรวจสอบความถูกต้องของ WeChat (ค่าบริการการตรวจสอบความถูกต้อง 300 หยวน)
  2. ตั้งชื่อโดเมนความปลอดภัยของอินเทอร์เฟซ JS ของคุณใน "การตั้งค่าบัญชีอย่างเป็นทางการ" - "การตั้งค่าฟังก์ชัน" ในพื้นหลังของบัญชีอย่างเป็นทางการ ซึ่งเป็นชื่อโดเมนของเว็บไซต์ที่เรียกโดยบัญชีอย่างเป็นทางการของคุณ
  3. ตั้งชื่อโดเมนหน้าการติดต่อกลับการอนุญาตของคุณใน "การอนุญาตอินเทอร์เฟซ" - "การอนุญาตหน้าเว็บเพื่อรับข้อมูลผู้ใช้ขั้นพื้นฐาน" ใช้สำหรับการตรวจสอบสิทธิ์ชื่อโดเมนการโทรกลับของ OAuth2
  4. ดูและกำหนดค่า AppID และ AppSecret ของคุณใน "การกำหนดค่าพื้นฐาน"

การกำหนดค่า

สร้างไฟล์ wechat.yml ในไดเร็กทอรีการตั้งค่าโปรเจ็กต์ Rails และกำหนดค่าข้อมูลบัญชีอย่างเป็นทางการของคุณ 

 # 区分不同的环境
eggman:
  development:
    host: http://wechat-test1.eggman.tv

    wechat_id: xxxxxxxxxx
    app_id: xxxxxxxxxx
    app_secret: xxxxxxxxxx

    oauth2_redirect_uri: "http://wechat-test1.eggman.tv/wechat/users/callback"

    push_url: "http://wechat-test1.eggman.tv/wechat/push"
    push_token: xxxxxxxxxxxxxxxxxxxx
  production:
    host: https://eggman.tv

    wechat_id: xxxxxxxxxx
    app_id: xxxxxxxxxxxxxxxxxxxx
    app_secret: xxxxxxxxxxxxxxxxxxxxxxxxxx

# 如果不需要多环境支持，也可以这样
app_name:
  app_id: <%= ENV['WECHAT_APP_NAME_APP_ID'] %>
  app_secret: <%= ENV['WECHAT_APP_NAME_APP_SECRET'] %>
  oauth2_redirect_uri: <%= ENV['WECHAT_APP_NAME_OAUTH2_REDIRECT_URI'] %>

จากนั้นระบุชื่อบัญชีอย่างเป็นทางการที่จะอ่านใน ApplicationController: 

 self.wechat_gate_app_name = 'eggman'

การโทรแบ็กเอนด์

การดำเนินการ API เบื้องหลัง (เช่น การได้มาซึ่งข้อมูลผู้ใช้ WeChat เป็นต้น)

ตามค่าเริ่มต้น การกำหนดค่าได้รับการเตรียมใช้งานในคอนโทรลเลอร์แล้ว วิธีการคือ wechat_gate_config เพียงใช้โดยตรง 

 wechat_gate_config . users # 获取用户列表
wechat_gate_config . user ( 'ONE_OPEN_ID' ) # 获取一个用户的详细信息
wechat_gate_config . access_token # 获取当前access_token

# OAuth 2
wechat_gate_config . oauth2_entrance_url ( scope : "snsapi_userinfo" , state : "CURENT_STATE" ) # 获取当前OAuth2授权入口URL
wechat_gate_config . oauth2_access_token ( "TOKEN" ) # 根据OAuth2返回的TOKEN获取access_token
wechat_gate_config . oauth2_user ( "ACCESS_TOKEN" , "ONE_OPEN_ID" ) # 获取一个用户的信息

wechat_gate_config . medias # 获取素材列表, 参数type: image | video | voice | news (图文)

wechat_gate_config . menu_get # 获取菜单
wechat_gate_config . menu_create ( MENU_HASH ) # 创建菜单

wechat_gate_config . generate_js_request_params ( REFERER_URL ) # 返回JS-SDK的验证参数，供前端JS-SDK使用

แน่นอน คุณยังสามารถเริ่มต้นการกำหนดค่าได้ด้วยตนเอง หรือแม้แต่ระบุเส้นทางไปยังไฟล์การกำหนดค่า: 

 config = WechatGate::Config.new('eggman', '/path/to/what/ever/you/want.yml')

ทั้ง access_token และตั๋วใน JS_SDK มีเวลาหมดอายุและขีดจำกัดเวลารีเฟรช ซึ่งได้รับการพิจารณาที่นี่ คุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ หากคุณต้องการรีเฟรชด้วยตนเอง คุณสามารถทำได้: 

 config.refresh_access_token
config.refresh_jsapi_ticket

ไฟล์การกำหนดค่ารองรับ erb

สำหรับอินเทอร์เฟซและเอกสารประกอบเพิ่มเติม โปรดดูที่ซอร์สโค้ดโดยตรงซึ่งเขียนไว้อย่างละเอียดมาก

JS-SDK 

  def ticket
    url = CGI . unescape ( params [ :url ] ) # 微信中用户访问的页面
    @data = wechat_gate_config . generate_js_request_params ( url ) # 生成微信JS-SDK所需的jsapi_ticket，signature等等参数供前段js使用
    render content_type : "application/javascript"
  end

ตั๋ว js.erb: 

 var wxServerConfig = <%= @data.to_json.html_safe %>;
<%= params[:callback] %>();

จากนั้นแนะนำรหัสต่อไปนี้บนหน้า WeChat: 

 ( function ( ) {
  var ticket = document . createElement ( "script" ) ;
  ticket . src = "http://localhost/api/wechat_ticket/ticket.js?url=" + encodeURIComponent ( window . location . href . split ( '#' ) [ 0 ] ) + "&callback=wxCallback" ;
  var s = document . getElementsByTagName ( "script" ) [ 0 ] ;
  s . parentNode . insertBefore ( ticket , s ) ;
} ) ( ) ;

ฟังก์ชั่นอื่นๆ

เมนูแบบกำหนดเอง

ขั้นแรกให้ตั้งค่าไฟล์การกำหนดค่าเมนู config/wechat_menu.yml ซึ่งรองรับ erb สำหรับรูปแบบ โปรดดูเอกสารเมนูแบบกำหนดเองของ WeChat: 

 button:
  - type: view
    name: 我的2
    url: <%= @config.oauth2_entrance_url(scope: 'snsapi_userinfo', state: 'profile') %>
  - type: view
    name: 课程
    sub_button:
      - type: view
        name: 免费课程
        url:  <%= @config.oauth2_entrance_url(scope: 'snsapi_userinfo', state: 'free') %>
      - type: view
        name: 付费课程
        url:  <%= @config.oauth2_entrance_url(scope: 'snsapi_userinfo', state: 'paid') %>

ตัวแปร **@config** คืออินสแตนซ์บัญชีสาธารณะ WeChat ปัจจุบัน โปรดอย่าแก้ไขและใช้งานโดยตรง

จากนั้นดำเนินการงานคราด: 

 $rails wechat_gate:create_menu APP_NAME=eggman CONFIG=/path/to/wechat.yml MENU=/path/to/wechat_menu.yml

ในจำนวนนี้ CONFIG มีค่าเริ่มต้นเป็น config/wechat.yml MENU มีค่าเริ่มต้นเป็น config/wechat_menu.yml และต้องระบุ APP_NAME

สิ่งที่ต้องทำ

เพิ่มการทดสอบ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด