H5页面制作之文艺句子

记录一下我第一次认真书写一个H5页面的过程,用以学习和进步。

先展示一下这个H5页面
文艺句子界面

文艺句子2.0

  当我的第一版在即刻发布了一条动态,在那里收获了很多反馈,于是我就把她们的建议和自己的想法慢慢的实现了。

        已完成的想法

  • 添加了「换一句」「生成二维码」「使用文档」等按钮
  • 内置JS插件生成二维码,方便用户分享句子
  • 制作了一个简单的logo

        未完成的想法

  • 分享按钮
  • 高级json接口
  • 图片形式分享文字

  随着对这些技能学习的深入,我会慢慢完善这个页面的。

一些问题

  在慢慢构建页面的时候我也解决了许多问题,在实践中进步。

  • canvas转img
​$('#a').qrcode("https://i.wubuster.com");
function convertCanvasToImage(canvas) {
              var image = new Image();
              image.src = canvas.toDataURL("image/png");
              return image;
            }
            var mycans=$('canvas')[0];
            var img=convertCanvasToImage(mycans);
            $('#qrcode').append(img);​

  这个主要是qrcode.js生成的二维码是一串canvas,然后移动端没有办法长按保存二维码图片,无法实现我想要的分享功能,于是这里就需要把canvas给转换成img图片来实现长按保存。

  • 按钮功能的实现

  这里主要就是一个「生成二维码」的点击功能,首先弄一个div1盒子装刚才qrcode.js生成的canvas二维码,然后在弄一个div2盒子装转化成img的二维码,这两个盒子的初始display都是none,然后点击「生成二维码」后改变div2盒子的display为block,这样就可以看见二维码了。
  具体代码如下:

function showqrcode(){
document.getElementById('qrcode').style.display='block';
document.getElementById('qrcodeimgclose').style.display='block';
}

*

  作为一个没有系统学习过html和css以及JavaScript的弟弟能通过网上的教程与自己的聪明才智完成这么一个页面就很帅气。

以上内容仅个人学习总结,如有错误还请指正。

本文链接: https://blog.wubuster.com/archives/2.html
1 + 8 =
快来做第一个评论的人吧~