uniapp外接ic读卡器

Question

uniapp外接一个ic读卡器，登录页面点击刷卡登陆按钮，出现一个卡片的图片弹窗，上面提示请刷卡，把卡片靠一下读卡器就开始识别读取到的卡号调接口登录，现在的问题是怎么能知道他刷卡了，并且识别到读卡器识别到的卡号

Answer 1

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7512577
• 这篇博客也不错, 你可以看下如何解决uniapp加载登录页时，却先跳转首页再跳转登录页的问题
• 除此之外, 这篇博客: uniapp 实现微信小程序全局分享及自定义分享按钮样式中的 实现自定义分享按钮样式的效果 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

•         效果展示：

  

   解析：以上两种风格都是比较常见的微信小程序分享按钮自定义样式，然而实际我们并非是对 <button></button> 按钮进行这样的自定义样式，而是将这样的样式做到 <view></view> 上或者直接是一个 image 图片，而要实现点击它触发分享，我们只需要在它的上面盖一个 <button id="shareBtn" open-type="share" ></button> 按钮，这个按钮当然就是用来触发我们的分享功能的，而我们只需要让它的透明度为完全透明就好了，这样一搭配起来，我们效果上就好像实现了对分享按钮的自定义一般。示例代码如下：

  1.HTML 代码如下

  <!-- 一键分享 -->
  <view class="share">
      <u-image src="/static/imgs/yjfx.png" width="110" height="110"></u-image>
      <u-button id="shareBtn" open-type="share" ></u-button>
  </view>

   2.CSS 代码如下（这里采用的是 SCSS 的写法）

      .share {
  			width: 110rpx;
  			height: 110rpx;
  			border-radius: 50%;
  			position: absolute;
  			top: 50%;
  			right: 29rpx;
  			#shareBtn {
  				width: 100%;
  				height: 100%;
  				position: absolute;
  				top: 0;
  				left: 0;
  				opacity: 0;
  			}
  		}

  这样我们就实现了 “自定义分享按钮” 的效果了，核心之处就在与放一个分享按钮到我们自定义样式部位的上方，让分享按钮完全盖住它并且让这个分享按钮完全透明即可。

• 您还可以看一下 耿职老师的uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程课程中的 Uniapp生成小程序以及要跳过的坑小节, 巩固相关知识点