微信小程序获取用户地址

思路

一.获取用户收货地址
1.绑定点击事件
2.调用小程序内置API 获取用户的收获地址 wx.chooseAddress

在这里插入图片描述

遇到的常见问题

用户触发事件,小程序会申请拿用户的地址,如果用户不小心点了取消,那个权限就会变成false,然后就无法调用,如果用户第一次使用,权限就undefined,这个权限打印名字出来是scope.adress(关于打印方法 是调用api----wx.getsetting
在这里插入图片描述

那么如何解决呢

 1. 假设用户的权限原本是undefined和true  则直接触发地址获取就好了
 2. 假设 用户点击取消 那就是fasle,那就按另外一个思路来走
            (1)诱导用户自己打开授权设置页面  让用户给予地址权限
         (2) 获取收货地址

先不说那么多 先上代码 有问题后面再讲

// pages/cart/index.js
Page({
handleChooseAddress(){
  wx.getSetting({
    success: (result) => {
      const scopeAddress=result.authSetting["scope.address"];
      //获取权限状态很怪异时候  都需要 [“  ”]形式来获取属性值
      if (scopeAddress===true||scopeAddress===undefined) {
        wx.chooseAddress({
          success: (res) => {
            console.log(res);
          },
        })
        
      }else{
        wx.openSetting({
          success: (res) => {
            wx.chooseAddress({
              success: (res0) => {
                console.log(res0);
              },
            })
          },
        })
      }
    },
  })



}
})

最后 效果图

只要勾选上去  就可以正常获取了

只要勾选上去 就可以正常获取了

如果能稍微帮到你 能不能给个赞呀



分                     	割                             线


下面是用es7 的async方法去简化代码

关于包regeneratorRuntime包(来自facebook),这个包在GitHub上面,如果感兴趣的朋友可以自己找,找不到私信我呗

我的js代码简化后

// pages/cart/index.js
import{getSetting,chooseAddress,openSetting} from "../../utils/asyncWx.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
async handleChooseAddress(){

  //获取权限状态
  const res1=await getSetting();
  const scopeAddress=res1.authSetting["scope.address"];
  //判断

  if (scopeAddress===true||scopeAddress===undefined){
    const res2=await chooseAddress();
    console.log(res2);
    
  }else{
    //诱导用户打开授权的页面
   await openSetting();
   //调用收货地址的api
   const res2 =await chooseAddress();
   console.log(res2);
  }
  



}
})

这是封装的部分代码

export const getSetting=()=>{
return new Promise((resolve,reject)=>{
  wx.getSetting({
    success: (res) => {
      resolve(res);
    },
    fail:(err)=>{
      reject(err);
    }
  });
})
}
export const chooseAddress=()=>{
  return new Promise((resolve,reject)=>{
    wx.chooseAddress({
      success: (res) => {
        resolve(res);
      },
      fail:(err)=>{
        reject(err);
      }
    });
  })
  }
  export const openSetting=()=>{
    return new Promise((resolve,reject)=>{
      wx.openSetting({
        success: (res) => {
          resolve(res);
        },
        fail:(err)=>{
          reject(err);
        }
      });
    })
    }

还有一个Facebook的runtime库,也要自行配置的

js代码还可以继续简化然后加个本地缓存
// pages/cart/index.js
import{getSetting,chooseAddress,openSetting} from "../../utils/asyncWx.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  
async handleChooseAddress(){
  try{
  //获取权限状态
  const res1=await getSetting();
  const scopeAddress=res1.authSetting["scope.address"];
  //判断

  if (scopeAddress===false){
    await openSetting();
    
  }
  const address =await chooseAddress();
  //存入缓存中
  wx.setStorageSync('address', address);
}catch(error){
  console.log(error);
  
}


}
})

可能优化方案的那块 async用法 让你们看得很恶心 我找了篇文章 供大家参考哈哈哈哈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章