王筝的博客
ruby学习

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

今天大致把步骤写一写。

微信的官网文档给出了非常清晰具体的步骤 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}'
    });
  });