在线体验:https://postbird.gitee.io/vue-online-qrcode/

https://gitee.com/postbird/vue-online-qrcode/raw/master/public/logo.png

一、背景

在开发过程中(尤其是专门为手机开发页面)的时候,基本都会扫码进行手机真机查看。

之前写 ReactNative 或者写 weex 的时候尤其需要在真机上扫码查看最终的产出效果,而一般可能选择的使用服务为:

  • 联图二维码
  • 草料二维码
  • 一些二维码 chrome 插件等

联图二维码的好处是实时根据编辑生成新的二维码,但是页面很不友好,广告也有点多,比较烦人,草图二维码算是比较好用的,但是目前文字生成二维码已经有限制 150 个文字长度了,因此也比较尴尬,chrome 插件需要每次点击生成,不然就没了。

上面列举的几个二维码生成服务有各自的优点,不过他们功能的缺点就是没办法同时生成多个二维码。

多个二维码显示的需求场景一般为不同的 URL 后面可能带参数,也可能根据不同的环境使用不同的二维码,甚至有些时候,因为同时兼顾多个业务,导致需要好几个不同业务的二维码去扫,这时候一般就需要频繁更新或者是开好几个浏览器的 tab,比较麻烦。

基于上面的场景和需求,用 vue 做了个简单的 在线多二维码生成服务,可以在一个页面中生成多个二维码用来扫描,并且能够从缓存中取加载二维码列表,防止因为刷新页面而造成的二维码丢失。

二、功能需求

需要有二维码生成的诸多功能,并且根据需要增加了多二维码的一些需要的功能。

  • Create 二维码
  • Delete 二维码
  • Update 二维码
  • 维护一个二维码列表
  • 从缓存中读取当天的二维码列表缓存,用来防止刷新后丢失列表
  • 设置二维码蒙层防止多个二维码存在导致的误扫描
  • ....

三、Vue 实现功能

组件结构

- App.vue   // 入口组件
  - Add.vue  // create 表单
  - Header.vue // 页面头部
  - HelloWorld.vue // no
  - QrcodeItem.vue // 单个二维码卡片
  - QrocdeList.vue // 二维码列表
  - Update.vue // update 表单

其中二维码卡片承载了 二维码显示、Mask 显示、标题、创建时间和操作按钮等。

四、效果

在线体验:https://postbird.gitee.io/vue-online-qrcode/

效果

https://gitee.com/postbird/vue-online-qrcode/raw/master/examples.gif

五、仓库

gitosc

github