rails網站分享到朋友圈功能是怎麼實現的

 

如今的網站基本上都須要接入微信分享功能，那麼這個過程是怎麼實現的咩，前幾天作了這個功能，一直沒來得及整理下，

今天大體把步驟寫一寫。

微信的官網文檔給出了很是清晰具體的步驟 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

（1）綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後能夠在「開發者中心」查看對應的接口權限

 

（2）引入js文件，http://res.wx.qq.com/open/js/jweixin-1.0.0.js

將js下載後拷貝到app/assets/javascripts文件夾。

而後好要在application.js.coffee裏引入一下哦，就是添加這句話

#= require jweixin-1.0.0

（3）增長初始化文件 vim initializers/weixin.rb

vim config/initializers/weixin.rb

而後加入下面的初始化內容

$client ||= WeixinAuthorize::Client.new(CONFIG['weixin']['appid'], CONFIG['weixin']['secret_key'],"")

在config/config.yml里加入配置（這裏的是須要從微信申請的）

  weixin:
    appid: wfasfasfasdfxxxx
    secret_key: 4cf4dfasfsdfsadfasdf5dasda

（4）經過config接口注入權限驗證配置

全部使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用，目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）

 

vim app/views/share/_weixin_config.html.slim

加入對應的代碼

- data = $client.get_jssign_package(request.url)

javascript:
  wx.config({
    debug: false, // true是開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印
    appId: '#{data["appId"]}', // 必填，公衆號的惟一標識
    timestamp: '#{data["timestamp"]}', // 必填，生成簽名的時間戳
    nonceStr: '#{data["nonceStr"]}', // 必填，生成簽名的隨機串
    signature: '#{data["signature"]}',// 必填，簽名，見附錄1 
    jsApiList: ['onMenuShareTimeline',
                'onMenuShareAppMessage'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2 
  }); 

（5）app/views/layouts/application.html.slim頁面添加按鈕

.modal.fade id="shareModal"  role="dialog" aria-labelledby="infoModalLabel"
  .modal-dialog role="document"
    .modal-content#share-web
      .modal-header
        button type="button" class="close" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" ×
        .modal-title id="infoModalLabel" 微信掃一掃，分享給你的好友吧
      .modal-body#share-qrcodeTable
    .modal-content#share-weixin
      .modal-body
        button type="button" class="close" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" ×


javascript:
  $(function() {
    $('[data-toggle="popover"]').popover();
  });

  jQuery('#share-qrcodeTable').qrcode({
      render  : "canvas",
      width   : 260,
      height  : 260,
      text    : "http://aaa.com"
  })

  var ua = window.navigator.userAgent.toLowerCase()
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
    $('#share-web').addClass('hidden')
  }else{
    $('#share-weixin').addClass('hidden')
  }
  $('#share').click(function(){
    $('#shareModal').modal('show')
  })

(6)在對應的頁面裏增長配置，指定在轉入朋友圈裏連接顯示的文字和圖片

app/views/aaas/index.html.slim

javascript:       
  // 首頁的微信分享 
  wx.ready(function(){
    wx.onMenuShareTimeline({
      title: '來看看aaa！',
      link: window.location.href,
      imgUrl: '#{logo_url}'
    });

    wx.onMenuShareAppMessage({
      title: '這是標題',
      desc: '來看看aaa！',
      link: window.location.href,
      imgUrl: '#{logo_url}'
    });
  });