zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

微信小程序获取用户收货地址与指纹验证接口(安卓和iphone)

2023-06-13 09:17:15 时间

@toc

1、获取用户收货地址接口wx.chooseAddress()

wx.chooseAddress(Object object)获取用户收货地址,此接口调用的是微信的收货地址。微信收货地址不同于微信设置的省和市地址,它默认是不存在的。在某个小程序中,当用户第一次调用wx.chooseAddress(Object object)接口时,会被要求填写微信收货地址;当用户第二次访问wx.chooseAddress(Object object)接口时,则可以看到自己以前填写的收货地址。这里说的第二次可以是不同的小程序,例如用户在访问A小程序时填写了微信收货地址,则用户在访问带有wx.chooseAddress(Object object)接口的B或者C小程序时都可以看到以前填写的微信收货地址。

1.1 接口参数

wx.chooseAddress(Object object)接口属性如下表所示。

属性

类型

默认值

必填

说明

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

  object.success回调函数:

属性

类型

说明

userName

string

收货人姓名

postalCode

string

邮编

provinceName

string

国标收货地址第一级地址

cityName

string

国标收货地址第二级地址

countyName

string

国标收货地址第三级地址

streetName

string

国标收货地址第四级地址

detailInfo

string

详细收货地址信息(包括街道地址)

detailInfoNew

string

新选择器详细收货地址信息

nationalCode

string

收货地址国家码

telNumber

string

收货人手机号码

errMsg

string

错误信息

  官网示例代码:

wx.chooseAddress({
  success (res) {
    console.log(res.userName)
    console.log(res.postalCode)
    console.log(res.provinceName)
    console.log(res.cityName)
    console.log(res.countyName)
    console.log(res.detailInfo)
    console.log(res.nationalCode)
    console.log(res.telNumber)
  }
})

1.2 案例演示

  本例使用wx.chooseAddress(Object object)获取微信收货地址,并把获取的收货地址信息填入表单,由于是第一次访问wx.chooseAddress()接口,所以点击“获取收货地址”按钮之后,出现了新建并保存收货地址页面。当用户点击保存按钮时,系统获取了微信收货地址并填入表单。

  chooseAddress.wxml:

<view class="container">
  <form>
    <view class="page-section">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">收货人姓名</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.userName }}
          </view>
        </view>

        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">邮编</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.postalCode }}
          </view>
        </view>

        <view class="weui-cell weui-cell_input region">
          <view class="weui-cell__hd">
            <view class="weui-label">地区</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.provinceName }}
            {{ addressInfo.cityName }}
            {{ addressInfo.countyName }}
          </view>
        </view>


        <view class="weui-cell weui-cell_input detail">
          <view class="weui-cell__hd">
            <view class="weui-label">收货地址</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.detailInfo }}
          </view>
        </view>

          <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">国家码</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.nationalCode }}
          </view>
        </view>

        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">手机号码</view>
          </view>
          <view class="weui-cell__bd">
            {{ addressInfo.telNumber }}
          </view>
        </view>

      </view>
    </view>
  </form>
  
  <view class="btn-area"  hidden="{{chooseAddress}}">
    <button type="primary" bindtap="chooseAddress">获取收货地址</button>
  </view>
   <view class="btn-area"  hidden="{{!chooseAddress}}">
    <button type="primary" bindtap="pay">提交</button>
  </view>
</view>

  chooseAddress.js:

Page({
  data: {
    addressInfo: null,
    chooseAddress:false
  },
  chooseAddress:function(e){
    var that=this;
    wx.chooseAddress({
      success: function (res){
        that.setData({
          addressInfo: res,
          chooseAddress: true
        })
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },
  
   pay:function(e){
  
     wx.navigateTo({
       url: '../pay/pay'
     })
   }
})

   除此之外,还有个wx.chooseInvoiceTitle()接口,它和wx.chooseAddress()接口雷系,它用来获取用户的发票信息,包含抬头类型、抬头税号、单位地址、手机号码、银行名称和银行账号等属性。

  这里由于我已经填写过一次了,所以会把上次填的显示出来,这里也可以新建一个,我们就用上次填的数据,选中之后信息就被填入到了下面的表单当中。

2、SOTER指纹认证

2.1 功能简介

  小程序提供wx.checkIsSupportSoterAuthentication(Object object)wx.checkIsSoterEnrolledInDevice(Object object)wx.startSoterAuthentication(Object object)3个接口来实现认证。

wx.checkIsSupportSoterAuthentication(Object object)实现检测手机是否支持指纹认证的功能;wx.checkIsSoterEnrolledInDevice(Object object)实现检测手机安全设置系统是否已经录入过指纹信息;wx.startSoterAuthentication(Object object)判断当前录入的指纹是否与手机安全指纹一致。

2.2 接口参数

2.2.1 wx.checkIsSupportSoterAuthentication(Object object)

wx.checkIsSupportSoterAuthentication(Object object)接口的success函数的回调结果保存在res.supportMode中。

属性

类型

默认值

必填

说明

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

2.2.2 wx.checkIsSoterEnrolledInDevice(Object object)

wx.checkIsSoterEnrolledInDevice(Object object)接口检测手机是否保存了指纹、人脸和声纹信息,该接口属性如下表所示:

  object.success回调函数:

属性

类型

说明

isEnrolled

boolean

是否已录入信息

errMsg

string

错误信息

  官网示例代码:

wx.checkIsSoterEnrolledInDevice({
  checkAuthMode: 'fingerPrint',
  success(res) {
    console.log(res.isEnrolled)
  }
})

2.2.3 wx.startSoterAuthentication(Object object)

wx.startSoterAuthentication(Object object)接口是真正执行SOTER认证的接口,也就是执行指纹认证。

  object.success回调函数:

属性

类型

说明

authMode

string

生物认证方式

resultJSON

string

在设备安全区域(TEE)内获得的本机安全信息(如TEE名称版本号等以及防重放参数)以及本次认证信息(仅Android支持,本次认证的指纹ID)。具体说明见下文

resultJSONSignature

string

用SOTER安全密钥对 resultJSON 的签名(SHA256 with RSA/PSS, saltlen=20)

errCode

number

错误码

errMsg

string

错误信息

2.3 案例演示

  本例使用SOTER认证的3个接口验证小程序的指纹识别功能,这里我手机没有指纹识别,借了部安卓手机。

  SoterAuthentication.wxml:

<view class="container">
  <view class="page-body">
    <view class="btn-area">
      <button type="primary" bindtap="startAuth">指纹认证</button>
    </view>
  </view>
</view>

  SoterAuthentication.js:

const AUTH_MODE = 'fingerPrint'
Page({
  startAuth() {
    wx.checkIsSupportSoterAuthentication({
      success: (res) => {
        console.log(res)
        checkIsEnrolled()
      },
      fail: (err) => {
        console.error(err)
        wx.showModal({
          title: '错误',
          content: '您的设备不支持指纹识别',
          showCancel: false
        })
      }
    })

    const checkIsEnrolled = () => {
      wx.checkIsSoterEnrolledInDevice({
        checkAuthMode: AUTH_MODE,
        success: (res) => {
          console.log(res)
          if (parseInt(res.isEnrolled) <= 0) {
            wx.showModal({
              title: '错误',
              content: '您暂未录入指纹信息,请录入后重试',
              showCancel: false
            })
            return
          }
          startSoterAuthentication();
        },
        fail: (err) => {
          console.error(err)
        }
      })
    }

    const startSoterAuthentication = () => {
      wx.startSoterAuthentication({
        requestAuthModes: [AUTH_MODE],
        challenge: 'test',
        authContent: '指纹认证示例',
        success: (res) => {
          console.log(res)
          wx.showToast({
            title: '认证成功',
            duration: 10000
          })
        },
        fail: (err) => {
          console.error(err)
          wx.showModal({
            title: '失败',
            content: '认证失败',
            showCancel: false
          })
        }
      })
    }
  }
})

2.3.1 安卓手机指纹测试

  这部手机指纹在背面,我们输入指纹看下。

2.3.2 iphone手机人脸识别测试

  我们将代码中的const AUTH_MODE = 'fingerPrint'替换为const AUTH_MODE = 'facial'即可变为人脸识别方式。

  点击人脸识别按钮,开始识别

  可以看到,安卓和苹果都没问题。