【分享】10分钟，为页面生成二维码链接！

发表于 |
  1. 我们要实现的效果：弹出当前网页网址的二维码，手机扫码后能直接打开当前页面。（预计用时：10分钟）

开始实做：

我们以job的show页面为例。

step1:

  1. 找开 Gemfile.增加：

    1
    gem 'rqrcode'

    执行 bundle install,重启server.

  2. 打来jobs_controller，在show里增加：

    1
    @qr = RQRCode::QRCode.new(job_url(@job).to_s, :size => 6, :level => :h )

step2:

  1. 打开application.scss，增加css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    #overlay table {
       border-width: 0;
       border-style: none;
       border-color: #0000ff;
       border-collapse: collapse;
    }
    #overlay td {
       border-left: solid 12px #000;
       padding: 0;
       margin: 0;
       width: 0px;
       height: 12px;
    }
    #overlay td.black { border-color: #000; }
    #overlay td.white { border-color: #fff; }
    #overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      // background-color: #008CBA;
      overflow: hidden;
      width: 100%;
      height: 0;
      transition: .5s ease;
      background-color: rgba(0,0,0,0.8);
      // z-index: -1;
      cursor: pointer;
    }
    #text{
     position: absolute;
     top: 50%;
     left: 50%;
     font-size: 50px;
     color: white;
     transform: translate(-50%,-50%);
     -ms-transform: translate(-50%,-50%);
    }

  2. 打开Jobs/show.html.erb,在最底下加入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="overlay" onclick="off()">
      <div id="text">手机扫一扫，分享给好友~
        <%= raw @qr.as_html %></div>
    </div>
    <div style="padding:20px">
      <button onclick="on()">点击生成当前网页二维码</button>
    </div>
    <script>
    function on() {
        document.getElementById("overlay").style.height = "100%";
    }
    function off() {
        document.getElementById("overlay").style.height = "0";
    }
    </script>

完成了！

重要提示：在本地开发环境扫出来的链接是http:localhost:3000,手机打不开！！部署到heroku后扫出来的是heroku地址，手机可以打开！

迁移：如果想在其他页面生成二维码，只需要去到controller，

把要呈现的路径替换掉就可以了。

希望你5票投我1票！

这是我用时间堆出来的参赛作品，如果你手上还有票，这个作品值得你为我投上一票！欢迎浏览网址细节：【全栈小伙伴求职网】https://fullstack.xinshengdaxue.com/works/345