uni-app實戰之路-獲取用戶地址和基本信息

寫在前面

開發小程序避免不了的是獲取用戶的信息，地址等，今天就簡單的記錄一下我實現的過程，因爲我多個地方要用到，所以我這裏直接寫到vuex裏面，你們看情況，不需要用的可以直接寫到你們認爲合適的地方！

流程

拿到授權->獲取經緯度->獲取地圖的授權->根據經緯度進行逆地址解析
下面我們按照流程進行一步一步的來

authorize

authorize文檔
這裏可以看到文檔裏面寫的還是比較明白的，提前向用戶發起授權請求。調用後會立刻彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數據，但不會實際調用對應接口。如果用戶之前已經同意授權，則不會出現彈窗，直接返回成功。我們主要是使用他的參數scope，這個參數有一個對應的列表，裏面的這個參數scope.userLocation，看實例：

uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})

可能這個比較廢話，不想我的風格，說好的不按照文檔來的，我們還是按照文檔來吧，畢竟這個我不是很熟悉，一步一步來！

getLocation

getLocation文檔
獲取當前的地理位置、速度。
我們使用這個進行獲取用戶的經緯度,這裏文檔有一個比較奇怪的地方，這裏有一個參數是geocode，上面的描述是這樣的，說默認false，是否解析地址信息，我這裏的理解是解析地址應該是直接返回給你具體的詳細地址，但是他返回的是一個經緯度，我以爲是我寫的有問題，但是我測試看一些

getLocal(){
				uni.authorize({
					scope: "scope.userLocation",
					success() {
						//成功以後獲取位置信息
						uni.getLocation({
							type: 'wgs84', //這裏是不同的地圖api支持的格式不一樣，騰訊的gcj02，因爲這裏返回的是一個具體的經緯度，所以我們需要逆地址解析進行匹配對應的位置
							geocode :true,
							success: function(res) {
								console.log('當前位置的經度：' + res.longitude);
								console.log('當前位置的緯度：' + res.latitude);
								console.info(res)
							}
						});
					},
					fail(err) {
						uni.showToast({
							icon : none,
							title : '位置獲取失敗，部分功能不能使用！',
							duration : 2000
						})
						console.info(err)
					}
				})
			},

返回的結果是經緯度，好吧，可能是我比較菜吧，這裏你們可以當作沒看到!我們接着說，既然拿到的了經緯度，現在就需要想辦法進行地址解析了！下面是官方的用法！

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('當前位置的經度：' + res.longitude);
        console.log('當前位置的緯度：' + res.latitude);
    }
});

獲取騰訊的授權配置

騰訊地圖api
我們進去以後呢直接點擊控制檯，進行微信登錄，然後申請一個key，類似於這樣的！

然後配置一下具體信息：

然後我們找到他的api
入門使用
我們直接看他的入門使用，裏面說需要我們引入一個核心類

我們照做

// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: '申請的key'
        });
    },
    onShow: function () {
        // 調用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
})

寫的很明白，我們這裏下載好以後直接進行引入，然後我們看一下他的逆地址解析的過程
逆地址解析
我們直接使用：這裏注意一點，uniapp自帶的type類型是wgs84，我們這裏使用的是gcj02，不明白沒關係，我也不明白，但是知道用就行了。

具體有什麼區別呢！博主這裏簡單的搜索了一下，感興趣的可以自己研究，座標系,我們接着說，文檔說我們可以使用reverseGeocoder這個函數進行逆地址解析，看一下他的參數，裏面剛好有我們可以拿到的經緯度，這不就可以了嗎！

源代碼

getCity(context) {
			//獲取授權
			uni.authorize({
				scope: "scope.userLocation",
				success() {
					//引入騰訊地圖對象
					let qqmapsdk = new QQMapWX({
						key: '您自己的key'
					});
					//成功以後獲取位置信息
					uni.getLocation({
						type: 'gcj02', //這裏是不同的地圖api支持的格式不一樣，騰訊的gcj02，因爲這裏返回的是一個具體的經緯度，所以我們需要逆地址解析進行匹配對應的位置
						success: function(res) {
							console.log('當前位置的經度：' + res.longitude);
							console.log('當前位置的緯度：' + res.latitude);
							qqmapsdk.reverseGeocoder({
								location:{
									longitude : res.longitude,
									latitude : res.latitude
								},
								success(res){
									//使用上下文賦值 這裏您可以根據自己的需求記性賦值
									context.city = res.result.address_component.city;
									console.info(context.city)
									weathers(context.city).then((res)=>{
										console.info(res)
									})
								}
							})
						}
					});
				},
				fail(err) {
					uni.showToast({
						icon : none,
						title : '位置獲取失敗，部分功能不能使用！',
						duration : 2000
					})
					console.info(err)
				}
			})
			console.info(uni)
		}

• 效果：

這裏不要忘記下載好的qqmap-wx-jssdk.min.js，然後進行引入，不然是不行的！相信你們也知道！

獲取用戶基本信息

我們在開發的時候一般是需要獲取到用戶的頭像和暱稱等信息的，這裏簡單的說一下，畢竟文檔寫的也比較簡單了!
獲取用戶基本信息
這裏直接看源碼吧！

getUserInfo() {
				let _self = this;
				uni.login({
					success(res) {
						console.info(res)
						let code = res.code;
						uni.getUserInfo({
							success(resp) {
								_self.nickName = resp.userInfo && resp.userInfo.nickName || "獲取失敗"
								_self.avatarUrl = resp.userInfo && resp.userInfo.avatarUrl || "獲取失敗"
								_self.show = false;
								_self.other_flag = true;
							},
							fail(err) {
								console.error(err)
							}
						})
					}
				})
			}

<button open-type="getUserInfo" class="mine_btn" @getuserinfo="getUserInfo()" v-if="show">獲取授權</button>

• 效果：
• 界面不要糾結，只是爲了演示給你們看而已！
  這裏說一下，就是我們獲取的時候文檔沒有直接說我們必須使用button，但是如果我們不使用的話，會發現可能不會成功，這裏我們看一下文檔怎麼說的，button的介紹
  
  首先我們需要定一個button，然後需要定義button的open-type的值，然後值必須是getUserInfo，這樣纔可以，額…真（m）不（m）錯（p），知道就行了！

寫到最後

關於怎麼獲取小程序的基本信息和地理位置就先寫到這裏吧！也不早了，後續會繼續更新uniapp的知識點，畢竟路漫漫其修遠兮，任重而道遠啊！共勉！