微信小程序指纹开发怎么开

抖音小程序 2024-01-22 16:16:21 52
微信小程序指纹开发指南

微信小程序指纹开发是指在微信小程序中实现指纹识别功能,让用户通过指纹验证来确保账户安全。本文将为您介绍如何在微信小程序中开启指纹开发。

一、准备工作

1. 确保您已注册并开通微信小程序,并具备调用微信API的权限。

2. 准备一台支持指纹识别的安卓或iOS设备,用于测试开发。

二、开启指纹开发

1. 在微信开发者工具中,打开您的微信小程序项目。

微信小程序指纹开发怎么开

2. 在`app.json`文件中,添加`login`和`verifyFingerprint`两个事件监听器。

{
     "pages":  [
         "pages/login/login",
         "pages/verifyFingerprint/verifyFingerprint"
     ],
     "window":  {
         "backgroundTextStyle":  "light",
         "navigationBarBackgroundColor":  "#fff",
         "navigationBarTitleText":  "微信小程序指纹开发",
         "navigationBarTextStyle":  "black"
     },
     "events":  {
         "login":  "onLogin",
         "verifyFingerprint":  "onVerifyFingerprint"
     }
}
     

3. 创建`pages/login/login.wxml`页面,添加一个按钮用于触发指纹验证。

<view  class="d984-bca4-2f1e-6caa container">
     <button  bindtap="login"  class="bca4-2f1e-6caa-2343 login-btn">登录</button>
</view>
     

4. 创建`pages/login/login.wxss`页面,为按钮添加样式。

.container  {
     display:  flex;
     justify-content:  center;
      align-items:  center;
     height:  100%;
     background-color:  #f8f8f8;
}
.login-btn  {
     width:  200px;
     height:  40px;
     line-height:  40px;
     background-color:  #1AAD19;
     color:  #fff;
     font-size:  16px;
     border-radius:  5px;
      text-align:  center;
     margin-bottom:  20px;
}
     

5. 创建`pages/login/login.js`页面,实现指纹登录功能。

Page({
     data:  {
         userInfo:  null
     },
     onLoad:  function  ()  {
         //  调用微信登录接口,获取用户信息
         wx.login({
             success:  res  =>
  {
                 if  (res.code)  {
                       this.setData({
                          userInfo:  res.userInfo
                      });
                 }
             }
         });
     },
     login:  function  ()  {
         //  调用微信指纹登录接口
         wx.request({
             url:  'https://api.weixin.qq.com/sns/jscode2session',
             method:  'POST',
             data:  {
                 js_code:  '{{$jsCode}}',
                 grant_type:  'authorization_code'
             },
             success:  res  =>
  {
                 if  (res.data.openid)  {
                      wx.setStorageSync('openid',  res.data.openid);
                 }
             }
         });
     },
     onVerifyFingerprint:  function  ()  {
         //  调用微信指纹验证接口
         wx.request({
             url:  'https://api.weixin.qq.com/sns/server_side_call',
             method:  'POST',
             data:  {
                  action:  'verify_fingerprint',
                 openid:  '{{$openId}}',
                 session_key:  '{{$sessionKey}}'
             },
             success:  res  =>
  {
                 if  (res.data.result>
The End