rails网站分享到朋友圈功能是怎么实现的

最新推荐文章于 2017-09-19 09:46:38 发布

冰凌花花

最新推荐文章于 2017-09-19 09:46:38 发布

阅读量649

点赞数

分类专栏：微信分享

本文链接：https://blog.csdn.net/shiralwz/article/details/48471929

版权

微信分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在的网站基本上都需要接入微信分享功能，那么这个过程是怎么实现的咩，前几天做了这个功能，一直没来得及整理下，

今天大致把步骤写一写。

微信的官网文档给出了非常清晰具体的步骤 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" &times;
        .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" &times;


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