微信小程序获取收货地址

Bertha 。 2021-07-24 18:34 562阅读 0赞

# 微信小程序获取用户的收货地址 #

wxml

<view class="address_btn">
         <button bindtap = "chooseAddress" type="primary">添加收获地址</button>    
    </view>

首先我们来把逻辑和思路梳理一下，磨刀不误砍柴功  
下面的梳理一定要看，很重要，如果不看根本不可能理解（大佬请绕行）

1 绑定点击事件
      2 调用小程序内置 api  获取用户的收货地址  wx.chooseAddress
    
      3 获取 用户 对小程序 所授予 获取地址的  权限 状态 scope
        1 假设 用户 点击获取收货地址的提示框 确定  authSetting scope.address 
          scope 值 true 直接调用 获取收货地址
        2 假设 用户 从来没有调用过 收货地址的api 
          scope undefined 直接调用 获取收货地址
        3 假设 用户 点击获取收货地址的提示框 取消   
          scope 值 false 
          1 诱导用户 自己 打开 授权设置页面(wx.openSetting) 当用户重新给与 获取地址权限的时候 
          2 获取收货地址
        4 把获取到的收货地址 存入到 本地存储中

顺着这个逻辑我们来一步步开发

// 1.获取权限状态
        wx.getSetting({ 
          success: (result)=>{ 
            // 2. 获取权限状态 主要发现一些属性名很怪异的时候 使用[]形式获取属性值
            const scopeAddress = result.authSetting["scope.address"];
            if(scopeAddress === true||scopeAddress ===undefined){ 
              wx.chooseAddress({ 
                success: (result1)=>{ 
                  console.log(result1);
                }
              });
            }else{ 
              // 3.用户拒绝了授权 先诱导用户打开授权
              wx.openSetting({ 
                success: (result2)=>{ 
                  // console.log(result2);
                  // 调用获取收货地址
                  wx.chooseAddress({ 
                    success: (result3)=>{ 
                      console.log(result3);
                    }
                  });
                }
              });
            }
          }
        });

逻辑和功能全部实现，但是看到代码很臃肿，而且有很多的回调，性能会下降，优化一波

async chooseAddress() { 
    // 1.获取权限状态
        const res1 = await getSetting();
        const scopeAddress = res1.authSetting["scope.address"];
        // 2.判断权限状态
        /* if(scopeAddress === true||scopeAddress ===undefined){ }else{ // 用户拒绝了授权 先诱导用户打开授权 await openSetting(); } */
        if (scopeAddress === false) { 
          // 用户拒绝了授权 先诱导用户打开授权
          await openSetting();
        }
        // 3. 调用获取收货地址
        const res2 = await chooseAddress();
        console.log(res2);
     },

优化代码完成，简化了部分逻辑，提高性能,但是要注意了，使用了async和await，小程序是不支持的，但是可以通过技术手段骗过小程序，看下面  
**万能的github啊**  
下载facebook的regenerator库中的[regenerator/packages/regenerator-runtime/runtime.js][regenerator_packages_regenerator-runtime_runtime.js]  
在⼩程序⽬录下新建⽂件夹lib/runtime/runtime.js ，将代码拷⻉进去  
在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）

import regeneratorRuntime from '../../lib/runtime/runtime';//引入就可以，不需要使用

### 突发奇想（验证可实现） ###

一般来说到这里就完了，但是我闲的无聊，干脆再对这个获取收获地址权限再做一个封装  
在⼩程序⽬录下新建⽂件夹utils/asyncWx.js ,并且封装和暴露3个函数

/** * promise形式的getSetting */
    export const getSetting=()=>{ 
        return new Promise((resolve,reject)=>{ 
            wx.getSetting({ 
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (err)=>{ 
                    reject(err);
                }
            });
        })
    }
    /** * promise形式的chooseAddress */
    export const chooseAddress=()=>{ 
        return new Promise((resolve,reject)=>{ 
            wx.chooseAddress({ 
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (err)=>{ 
                    reject(err);
                }
            });
        })
    }
    /** * promise形式的openSetting */
    export const openSetting=()=>{ 
        return new Promise((resolve,reject)=>{ 
            wx.openSetting({ 
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (err)=>{ 
                    reject(err);
                }
            });
        })
    }

在小程序中使用  
先引入三个函数，因为使用了async语法，所以引入runtime.js

import { getSetting,chooseAddress,openSetting} from '../../utils/asyncWx.js'
    import regeneratorRuntime from '../../lib/runtime/runtime';

使用

async chooseAddress() { 
        try { 
          // 1.获取权限状态
          const res1 = await getSetting();
          const scopeAddress = res1.authSetting["scope.address"];
          // 2.判断权限状态
          if (scopeAddress === false) { 
            // 用户拒绝了授权 先诱导用户打开授权
            await openSetting();
          }
          // 3. 调用获取收货地址
          let address = await chooseAddress();
          address.all=address.provinceName+address.cityName+address.countyName+address.detailInfo
          // 4.本地存储数据
          wx.setStorageSync("address", address);
        } catch (error) { 
          console.log(error);
        }
      }

奈斯，完成，测试可以使用

[regenerator_packages_regenerator-runtime_runtime.js]: https://github.com/facebook/regenerator/blob/5703a79746fffc152600fdcef46ba9230671025a/packages/regenerator-runtime/runtime.js