微信小程序收货地址API兼容低版本解决方法-前端开发

微信小程序收货地址API兼容低版本解决方法的攻略如下：

微信小程序收货地址API兼容低版本解决方法的攻略如下：

问题描述

随着微信的版本升级，小程序中的API也在不断更新。在微信版本7.0.0及以上，小程序新增了获取用户收货地址的API，可以直接调用wx.chooseAddress()方法获取用户的收货地址信息。但是，如果小程序运行的微信版本低于7.0.0，将会出现报错，导致无法获取收货地址信息。因此，需要兼容低版本的微信，使得小程序运行在低版本时也可以获取到用户的收货地址。

解决方法

针对这个问题，我们可以使用微信小程序的两个API：wx.showModal() 和 wx.openSetting()，实现一个兼容低版本的解决方案。具体步骤如下：

步骤一：检查微信版本

在调用wx.chooseAddress()方法之前，我们可以先使用wx.getSystemInfo()获取当前微信版本信息，以判断当前微信版本是否支持该API。代码如下：

wx.getSystemInfo({
  success: function (res) {
    // 判断微信版本是否支持chooseAddress API
    if (res.SDKVersion < '1.3.0') {
      wx.showModal({
        title: '提示',
        content: '您的微信版本过低，不支持该功能，请升级到最新版本！',
        showCancel: false
      })
    } else {
      // 调用chooseAddress方法
      wx.chooseAddress({
        success: function (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) // 电话号码
        }
      })
    }
  }
})

步骤二：引导用户打开授权设置页面

当微信版本低于7.0.0时，即使通过步骤一的判断，该功能还是无法使用。因此，我们需要引导用户在小程序设置页面中打开授权设置，允许小程序访问用户的收货地址。代码如下：

wx.getSetting({
  success: function (res) {
    // 如果授权已经打开，直接调用API
    if (res.authSetting['scope.address']) {
      wx.chooseAddress({
        success: function (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) // 电话号码
        }
      })
    } else {
      // 如果授权未打开，引导用户打开授权页面
      wx.showModal({
        title: '提示',
        content: '您还未授权使用收货地址，请在小程序设置页面中打开授权设置！',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            wx.openSetting({
              success: function (res) {
                console.log(res)
              }
            })
          }
        }
      })
    }
  }
})

示例说明

下面我们结合两个示例，更加形象地说明上述的解决方法。

示例一：微信版本支持

如果用户的微信版本大于等于7.0.0，直接通过wx.chooseAddress()方法获取用户的收货地址。示例代码如下：

wx.getSystemInfo({
  success: function (res) {
    // 判断微信版本是否支持chooseAddress API
    if (res.SDKVersion < '1.3.0') {
      wx.showModal({
        title: '提示',
        content: '您的微信版本过低，不支持该功能，请升级到最新版本！',
        showCancel: false
      })
    } else {
      // 调用chooseAddress方法
      wx.chooseAddress({
        success: function (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) // 电话号码
        }
      })
    }
  }
})

示例二：微信版本不支持

如果用户的微信版本低于7.0.0，无法使用wx.chooseAddress()方法获取用户的收货地址。在这种情况下，我们需要引导用户在小程序设置页面中打开授权设置。示例代码如下：

wx.getSystemInfo({
  success: function (res) {
    // 判断微信版本是否支持chooseAddress API
    if (res.SDKVersion < '1.3.0') {
      wx.showModal({
        title: '提示',
        content: '您的微信版本过低，不支持该功能，请升级到最新版本！',
        showCancel: false
      })
    } else {
      wx.getSetting({
        success: function (res) {
          // 如果授权已经打开，直接调用API
          if (res.authSetting['scope.address']) {
            wx.chooseAddress({
              success: function (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) // 电话号码
              }
            })
          } else {
            // 如果授权未打开，引导用户打开授权页面
            wx.showModal({
              title: '提示',
              content: '您还未授权使用收货地址，请在小程序设置页面中打开授权设置！',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  wx.openSetting({
                    success: function (res) {
                      console.log(res)
                    }
                  })
                }
              }
            })
          }
        }
      })
    }
  }
})

总结

通过使用wx.chooseAddress() 方法和版本判断API wx.getSystemInfo()以及授权设置API wx.getSetting() 和 wx.openSetting()，我们可以实现一个兼容低版本的获取用户收货地址的解决方案。同时，该解决方案还具备非常好的用户体验，当版本支持时，可以直接获取用户的收货地址，而不需要跳转到其他页面设置授权。