微信小程序獲取用戶地址

思路

一.獲取用戶收貨地址
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用法 讓你們看得很噁心 我找了篇文章 供大家參考哈哈哈哈

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