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