zoukankan      html  css  js  c++  java
  • 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}'
        });
      });
  • 相关阅读:
    November 13th 2016 Week 47th Sunday The 1st Day
    November 12th 2016 Week 46th Saturday
    November 11th 2016 Week 46th Friday
    November 10th 2016 Week 46th Thursday
    November 9th 2016 Week 46th Wednesday
    November 8th 2016 Week 46th Tuesday
    windows 7文件共享方法
    Win7无线网络共享设置方法
    常量指针和指针常量
    如何查找局域网的外网ip
  • 原文地址:https://www.cnblogs.com/iwangzheng/p/4811207.html
Copyright © 2011-2022 走看看