uni-app:获取当前经纬度解决方案+如何布置全局组件
阅读原文时间:2023年07月08日阅读:1

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

在我们开发的过程中,会碰到一个现象,就是在页面里面引入组件,总算要写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(); // 打开地图权限设置
}
}
});
},

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章