uniapp微信小程式獲取手機號 位置資訊

环岛公路發表於2024-06-03

一.獲取手機號

獲取手機號

<template>
   <u-button open-type="getPhoneNumber" @getphonenumber="getNumber">一鍵登入</u-button>
</template>

<script>
  export default {
  
    methods: {
        getNumber(e) {
            let appid = '小程式ID'
            let secret = '小程式秘鑰'
            uni.request({
                url: 'https://api.weixin.qq.com/cgi-bin/token',
                method: 'GET',
                data: {
                    appid,
                    secret,
                    grant_type: 'client_credential'
                },
                success: (res) => {
                    let accessToken = res.data.access_token
                    uni.request({
                        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${accessToken}`,
                        method: 'POST',
                        data: {
                            code: e.detail.code
                        },
                        success: (result) => {
                            console.log(result)
                            if(result.data.errcode === 0) {
                                let phone = result.data.phone_info.phoneNumber
                            }
                        },
                        fail() {
                            uni.showToast({
                                title: '獲取失敗,請重試',
                                icon: 'error'
                            })
                        }
                    })
                },
                fail() {
                    uni.showToast({
                        title: '獲取失敗,請重試',
                        icon: 'error'
                    })
                }
            })
        }
    }
  }
</script> 

二.獲取位置和選擇位置

在manifest.json裡新增
 {
  "name": "xxx",
  "appid": "xxx",
  "description": "xxx",
  ...
  "mp-weixin": {
    "permission" : {
        "scope.userLocation" : {
            "desc" : "您的位置資訊將用於展示您與商家的距離,為您提供更好的服務。"
        }
    },
    "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
  }
}

獲取位置資訊
 uni.getSetting({
    success: res => {
        let s = res.authSetting
        if(s['scope.userLocation']) {
            //說明已經授權了
            uni.getLocation({
                type: 'wgs84',
                success: (res) => {
                    console.log(res)
                },
                fail: () => {
                    console.log('拒絕了')
                }
            })
        }else {
            //沒有授權就引導使用者開啟
            uni.openSetting({
                success: (res) => {
                    let r = res.authSetting
                    if(r['scope.userLocation']) {
                        console.log('授權位置成功')
                         uni.getLocation({
                            type: 'wgs84',
                            success: (res) => {
                                console.log(res)
                            },
                            fail: () => {
                                console.log('拒絕了')
                            }
                        })
                    }else {
                        console.log('授權位置失敗')
                    }
                }
            })
        }
    }
})

選擇位置
 uni.chooseLocation({
    success: res => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

相關文章