小程序学习（十）

参考链接：https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html

扫一扫页面的设计

要想实现图书扫码借阅这个小程序，必然会需要用到扫一扫功能，但如何正确调用该功能呢？在官方文档中，给出了相关参数以及示例代码：

按照文档，尝试对扫一扫页面进行了设计，琢磨一番后虽然实现了扫一扫功能的调用，但显示的页面却是这样的：
图片太大，文字又太小，看起来极不协调。同样地，还是需要在样式文件中进行设置。
.wxml

<view class="container">  
  <view class="saoma" bindtap="click">
  <image src='/image/icons/t.png'  clsss="in-image"></image>
 <text class="in-text"> 查询 | 借还</text>
 </view>  
</view> 

.wxss

.container{
  background-color: white;
}
.saoma image { 
  width:400rpx;
  height:400rpx;
}
.saoma{
  diaplay:flex;
  height:200px;
  justify-content: center;
  align-items:center;
  width:150px;
}
.in-text{
  font-family: '仿宋';
  font-size: 25px;
  font-weight: bold;
}

.js

var app = getApp()
Page({
  onLoad: function () {
    console.log('onLoad')
  },
  click: function () {
    var that = this;
    wx.scanCode({
      success: (res) => {
        console.log(res)
      }
    })
  }
})

最后附一张实现效果图吧：

还有一点想说明的是，在电脑上预览扫一扫功能时，效果图是这样的：

这时候就需要在手机在查看效果，实现效果和平时在手机上点击扫一扫时效果是一样的，这里就不放图了。