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

  1. 我们要实现的效果:弹出当前网页网址的二维码,手机扫码后能直接打开当前页面。(预计用时:10分钟)

开始实做:

我们以job的show页面为例。

step1:
  1. 找开 Gemfile.增加:


gem 'rqrcode'

执行 bundle install,重启server.

  1. 打来jobs_controller,在show里增加:


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

step2:
  1. 打开application.scss,增加css:


#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%);
}

  1. 打开Jobs/show.html.erb,在最底下加入:


<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

comments powered by Disqus