11

uni-app:获取当前经纬度解决方案+如何布置全局组件 - 林恒

 1 year ago
source link: https://www.cnblogs.com/smileZAZ/p/17152325.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

2149129-20210719135854680-672185839.jpg

一.布置全局组件

在我们开发的过程中，会碰到一个现象，就是在页面里面引入组件，总算要写import，components才能引用，这里给大家分享我们的一个解决方案

1.首先要建立一个components文件夹，用来放我们的所有组件

2149129-20230224172537972-2131561971.png

 2.然后在里面写好组件

2149129-20230224172632271-136483216.png

3.来到main.js，在代码中加入两行代码

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

这样我们就能在页面里，不用写import，components，就能引用了

二.获取当前经纬度解决方案

这里给大家分享出一套我使用的获取当前经纬度的方案

1.小程序设置，去小程序公众平台，开启接口权限

2149129-20230224175037324-483003567.png

2.代码中manifest.json文件以下位置加上代码

2149129-20230224175141009-910335852.png
/* 小程序特有相关 */
"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(); // 打开地图权限设置
}
}
});
},

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

 2149129-20210719144042684-15122820.jpg

__EOF__

本文作者： 林恒 本文链接： https://www.cnblogs.com/smileZAZ/p/17152325.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK