uni-app:获取当前经纬度解决方案+如何布置全局组件
2024-09-18 16:48:43
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
一.布置全局组件
在我们开发的过程中，会碰到一个现象，就是在页面里面引入组件，总算要写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(); // 打开地图权限设置
}
}
});
},
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
最新文章
- SpringMVC那点事
- 优化 bulk insert
- DELPHI 读取csv 格式文本文件
- OpenStack在线迁移
- ListView配合CheckBox出现position位置错误的解决
- oracle 11g升级
- GitHub error “Failed to get HEAD”
- NHibernate中的IQueryable和IQueryover
- DX笔记之六------游戏画面绘图之透明特效的制作方法
- SilkTest Q&A 11
- 浅谈DevExpress<六>：为chart创建动态数据源
- 【前端】Require.js使用方法总结
- 深入了解Android蓝牙Bluetooth——《进阶篇》
- NPOI 2.0 教程
- 关于PHP 开启zlib gzip配置
- 采用ADM2483磁隔离器让RS485接口更简单更安全
- JMS Session session = connection.createSession(paramA,paramB) 两个参数不同组合下的含义和区别
- 环境部署（九）：linux下安装python+chrome+Xvfb
- Centos6.5使用yum安装mysql
- PLSQL Developer连接远程Oracle数据库