1 <template>
  2     <view class="box">
  3         <button type="primary" @tap="fingerprint()" :disabled="disabled">按下开始识别指纹</button>
  4         <view style="width: 100%;text-align: center;">
  5             {{result}}
  6         </view>
  7         <view class="mask" v-show="popup" @tap="cancelbox()">
  8             <view class="content">
  9                 <image :src="zhiwenimg" mode="" class="imagestyle"></image>
 10                 <text class="text">{{zhiwentext}}</text>
 11             </view>
 12         </view>
 13     </view>
 14 
 15 </template>
 16 
 17 <script>
 18     export default {
 19         data() {
 20             return {
 21                 result: "",
 22                 disabled: false,
 23                 popup: false,
 24                 zhiwentext: ‘指纹识别‘,
 25                 zhiwenimg: require(‘@/static/images/zhiwen.png‘)
 26             }
 27         },
 28         onLoad() {
 29             // #ifdef APP-PLUS
 30             if (!plus.fingerprint.isSupport()) {
 31                 this.result = ‘此设备不支持指纹识别‘;
 32                 this.disabled = true;
 33             } else if (!plus.fingerprint.isKeyguardSecure()) {
 34                 this.result = ‘此设备未设置密码锁屏，无法使用指纹识别‘;
 35                 this.disabled = true;
 36             } else if (!plus.fingerprint.isEnrolledFingerprints()) {
 37                 this.result = ‘此设备未录入指纹，请到设置中开启‘;
 38                 this.disabled = true;
 39             } else {
 40                 this.result = ‘此设备支持指纹识别‘;
 41                 this.disabled = false;
 42             }
 43             // #endif
 44             // #ifdef MP-WEIXIN
 45             this.disabled = false;
 46             this.result = ‘请在微信真机中使用，模拟器不支持‘;
 47             // #endif
 48             // #ifndef APP-PLUS || MP-WEIXIN
 49             this.result = ‘此平台不支持指纹识别‘;
 50             // #endif
 51         },
 52         methods: {
 53             // 取消识别
 54             cancelbox: function() {
 55                 this.popup = false;
 56                 plus.fingerprint.cancel();
 57             },
 58 
 59             fingerprint: function() {
 60                 this.popup = true;
 61                 var that = this;
 62 
 63                 // #ifdef APP-PLUS
 64                 plus.fingerprint.authenticate(function(result) {
 65                     console.log(result)
 66                     that.zhiwenimg = require(‘@/static/images/zhiwen_success.png‘)
 67                     that.zhiwentext = ‘指纹识别成功‘;
 68                     setTimeout(function() {
 69                         that.popup = false
 70                     }, 1500);
 71                 }, function(e) {
 72                     switch (e.code) {
 73                         case e.AUTHENTICATE_MISMATCH:
 74                             plus.nativeUI.toast(‘指纹匹配失败，请重新输入‘);
 75                             break;
 76                         case e.AUTHENTICATE_OVERLIMIT:
 77                             plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
 78                             plus.nativeUI.alert(‘指纹识别失败次数超出限制，请使用其它方式进行认证‘);
 79                             break;
 80                         case e.CANCEL:
 81                             plus.nativeUI.toast(‘已取消识别‘);
 82                             break;
 83                         default:
 84                             plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
 85                             plus.nativeUI.alert(‘指纹识别失败，请重试‘);
 86                             break;
 87                     }
 88                 });
 89                 // // Android平台手动弹出等待提示框 
 90                 // if (‘Android‘ == plus.os.name) {
 91                 //     plus.nativeUI.showWaiting(‘指纹识别中...‘).onclose = function() {
 92                 //         plus.fingerprint.cancel();
 93                 //     }
 94                 // }
 95                 // #endif
 96 
 97                 // #ifdef MP-WEIXIN
 98                 wx.startSoterAuthentication({
 99                     requestAuthModes: [‘fingerPrint‘],
100                     challenge: ‘123456‘,
101                     authContent: ‘请用指纹解锁‘,
102                     success(res) {
103                         uni.showToast({
104                             title: ‘识别成功‘,
105                             mask: false,
106                             duration: 1500
107                         });
108                     }
109                 })
110                 // #endif
111             },
112         }
113     }
114 </script>
115 
116 <style>
117     .imagestyle {
118         width: 100rpx;
119         height: 100rpx;
120     }
121 
122     page {
123         background: transparent;
124     }
125 
126     .box {
127         word-break: break-all;
128     }
129 
130     .mask {
131         position: fixed;
132         left: 0;
133         top: 0;
134         right: 0;
135         bottom: 0;
136         /* #ifndef APP-NVUE */
137         display: flex;
138         /* #endif */
139         justify-content: center;
140         align-items: center;
141         background-color: rgba(0, 0, 0, 0.4);
142     }
143 
144     .content {
145         width: 300rpx;
146         height: 300rpx;
147         border-radius: 40rpx;
148         padding: 60rpx 30rpx;
149         box-sizing: border-box;
150         background-color: #FFFFFF;
151         text-align: center;
152     }
153 
154     .text {
155         /* #ifndef APP-NVUE */
156         display: block;
157         /* #endif */
158         text-align: center;
159         color: #333333;
160         line-height: 60rpx;
161     }
162 </style>