uni-app:獲取當前經緯度解決方案+如何佈置全域性元件

林恆發表於2023-02-24
APP元件

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

uni-app:獲取當前經緯度解決方案+如何佈置全域性元件

 

一.佈置全域性元件

在我們開發的過程中，會碰到一個現象，就是在頁面裡面引入元件，總算要寫import，components才能引用，這裡給大家分享我們的一個解決方案

1.首先要建立一個components資料夾，用來放我們的所有元件

 

 2.然後在裡面寫好元件

 

3.來到main.js，在程式碼中加入兩行程式碼

import movable from "@/components/movable/index.vue";
Vue.component("movable", movable);

這樣我們就能在頁面裡，不用寫import，components，就能引用了

二.獲取當前經緯度解決方案

這裡給大家分享出一套我使用的獲取當前經緯度的方案

1.小程式設定，去小程式公眾平臺，開啟介面許可權

2.程式碼中manifest.json檔案以下位置加上程式碼

/* 小程式特有相關 */
    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置資訊將用於和門店的距離長度"
            }
        },
        "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]
    },

3.頁面方法分享，分為檢測許可權，成功處理，錯誤處理

檢測許可權

// 位置授權
			getAuthorizeInfo() {
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允許授權
						that.getLocationInfo();
					},
					fail() { // 拒絕授權
						that.openConfirm();
						// console.log("你拒絕了授權，無法獲得周邊資訊")
					}
				})
			},

獲取地理位置

// 獲取地理位置
			getLocationInfo() {
				const that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						uni.setStorageSync("lat", res.latitude)
						uni.setStorageSync("lng", res.longitude)
					},
					fail(res) { // 拒絕授權
						console.log(res, '222');
					}
				});
			},

錯誤處理

// 再次獲取授權
			// 當使用者第一次拒絕後再次請求授權
			openConfirm() {
				uni.showModal({
					title: '請求授權當前位置',
					content: '需要獲取您的地理位置，請確認授權',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 開啟地圖許可權設定
						}
					}
				});
			},

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

 uni-app:獲取當前經緯度解決方案+如何佈置全域性元件

相關文章