项目背景:开发工具为HBuilderX,框架为uniapp,开发移动端的Web应用,在企业微信中使用(自建应用),Web开发的应用,不是小程序。

需求点:获取用户当前的位置信息,技术流程包括以下几个环节:

  • 1、获取当前用户的经纬度位置信息,用的uniapp的uni.getLocation()接口。
  • 2、显示一个地图,标记用户的位置,用的百度地图SDK。
  • 3、地图可以拖动,拖动后标记点会跟着移动,让用户可以自行调整位置。
  • 4、获取标记点详细地址,采用百度地图的逆解析API,获得详细位置信息。

问题:但实际开发中定位老是不准,存在各种问题,最后通过升级HTTPS解决,记录一下处理过程。


01、百度地图

百度地图开放平台,注册一个开发者账号,百度地图需要申请一个KEY才能使用。可根据项目情况选择个人账号,还是企业账号。

类型 个人账号 企业开发者账号
应用场景 个人学习 企业商业使用
认证方式 开发者认证,个人实名认证(已完成) 企业名称、营业执照、法人、联系方式、对公帐号信息
认证时长 很快 几分钟-5个工作日,多种认证方式
收费 白嫖 商业授权,基础版5W/年
调用限额 JS API 定位:5,000次/日,并发10次/秒
JS API 逆地理编码:5,000次/日,并发30次/秒
JS API 定位:30W次/日,并发100次/秒
JS API 逆地理编码:300W次/日,并发100次/秒

方案

  • 如果使用次数较多,则需要考虑企业账号,或购买额度。
  • 一般小项目、公司内部使用,调用频次不多,可申请个人账号,或者多申请几个账号,轮训使用。

国内地图三巨头腾讯、高德、百度的商业授权都是收费的,起步价都是5W/年。

逆地址解析:

// 根据坐标获取位置描述
export function getLocationByPoint(p, BMap) {
if (!p || !p.lng) return ''
const gc = new BMap.Geocoder()
return new Promise((resolve) => {
gc.getLocation(p, (rs) => {
const addComp = rs.addressComponents
resolve(addComp.province + addComp.city + addComp.district + addComp.street+ addComp.district)
})
})
}

坐标转换,wgs84坐标转换为火星坐标,否则在百度地图上显示会有偏差

// wgs84 坐标转百度坐标
export function WGS2BD(p, BMap) {
const wpoint = new BMap.Point(p.lng, p.lat)
const convertor = new BMap.Convertor()
return new Promise(resolve => {
convertor.translate([wpoint], 1, 5, function (data) {
if (data.status === 0) {
resolve(data.points[0])
}
})
})
}

资料


02、UNI的定位

UNI的定位核心API:uni.getLocation(OBJECT),但在使用中定位有问题。

  • uni自带的getLocation在移动端浏览器上运行正常,第一次会提示定位权限。typewgs84可定位,如果为gcj02则定位失败。
  • 如果H5应用嵌入企业微信,在企业微信中运行,则会定位失败,可能是权限问题,无法获取手机定位权限。

type String:默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation 和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。

2.1、getLocationbug

uni.getLocation还有bug,就是如果内部调用失败,就会报错,且无法捕获,看源码(gitee源码)是其内部使用了Promise但没有处理好异常导致的,外面无法捕获。

Uncaught (in promise) Error: network error

2.2、配置地图key-没解决

定位不准,继续寻找方案。打包的H5是在企业微信中使用,就申请了一个腾讯地图的Key,在uniapp中配置。如下图,在Web配置中启用地图定位,填上腾讯开发者key。

然而并没有什么改善,返回的定位依然是不准的。这里的不准不是有偏差,而是一个城市里的位置都一样,都指向市政府。

2.3、微信JS-SDK

企业微信为应用开发提供了一个JS-SDK,可以用来定位、获取蓝牙、摄像头等权限。

// 获取用户当前位置
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude; // 纬度
var longitude = res.longitude; // 经度
var speed = res.speed; // 速度,以米/秒计算
var accuracy = res.accuracy; // 位置精度,以米为单位的定位误差
alert("您的位置是:" + latitude + "," + longitude);
},
fail: function (res) {
alert("获取用户位置信息失败!");
}
});

但使用前必须先用接口注册,流程比较麻烦,需要前后端配合。官方使用说明,看官方要求和项目情况可能存在问题,还是先试试HTTPS吧。

2.4、开启HTTPS-通过

部署的网站是HTTP的,并没有启用HTTPS,在微信小程序的开发文档中有明确说明需要HTTPS进行网络通信,那就升级到HTTPS吧。

腾讯云申请免费的HTTPS证书,总计可以申请最多50张免费的SSL证书(其中20张免费证书支持绑定全网域名,30张免费证书可绑定腾讯云域名),成为腾讯云 V2 会员即可提升绑定全网域名的额度。

  • 免费证书不支持泛域名(*.qq.com)。
  • 免费证书有效期为1年,到期后如需继续使用证书,请重新申请并安装。
  • 正式版可以自动续费,单域名证书个人版500+/年,企业版2K+/年;泛域名证书个人版2K+/年,企业版5K+/年。

输入域名,选择DNS验证,需要在域名解析处添加一条TEXT记录。参考官方DNS 验证文档。

验证通过后,即可下载证书。然后配置Nginx,腾讯文档Nginx 服务器 SSL 证书安装部署

  • 先确保Nginx是否安装了ssl模块“http_ssl_module”
  • 证书拷贝到cert 文件夹下。
  • 修改配置文件“nginx.conf ”,添加“https server”配置。
  • 重启Nginx。

配置好HTTPS的相关配置,重新打包部署,PC端正常,但移动端存在故障。移动端访问老是被重定向到HTTP上了,几经波折,发现是刚才在uniapp打包时顺手勾上了一个选项“启用https协议”,去掉就好了。,这个选项是干什么的?

重新打包更新,定位准确了!


03、调试uniapp

可以安装微信开发者工具,用公众号网页来调试H5,打开页面后提示错误:“无法获取用户身份”。

需要两个条件:

  • 1、开启开发者模式:我的企业 -> 微信插件 -> 开发者工具勾选上

  • 2、注意是“当前管理员”,开发者工具登录的微信必须是当前企业微信的管理员。

参考资料:


️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址-语雀

uniapp开发企业微信应用中的定位问题记录的更多相关文章

  1. ionic4 开发企业微信应用0

    作为一个后台开发人员,几年前参与过Ionic1开发过一微信公众号的经历,所以这次开发企业微信应用,就使用了ionic,正好ionic4 rc版本发布,虽然不是正式版,作为本项目的项目经理,还是决定使用 ...

  2. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  3. 基于uni-app的微信小程序之分包

    作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 0. 缘由 1. 关于分包 1.0 这是 官方文档 1.1 注意事项 2.使用方法 2.1 首先你得有个uniapp的微信小程序项目 2.2 ...

  4. uni-app开发经验分享十九: uni-app对接微信小程序直播

    uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情>      记录这两个参数直播 ...

  5. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  6. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  7. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  8. C#开发微信门户及应用(14)-在微信菜单中采用重定向获取用户数据

    我曾经在系列文章中的<C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍>中介绍了微信菜单里面的重定向操作,通过这个重定向操作,我们可以获取一个code值,然后获取用户的open ...

  9. 微信红包中使用的技术:AA收款+随机算法

    除夕夜你领到红包了吗?有的说“我领了好几K!”“我领了几W!” 土豪何其多,苦逼也不少!有的说“我出来工作了,没压岁钱了,还要发红包”.那您有去抢微信红包吗?微信群中抢“新年红包”春节爆红.618微信 ...

  10. nodejs 开发企业微信第三方应用入门教程

    最近公司要开发企业微信端的 Worktile,以前做的是企业微信内部应用,所以只适用于私有部署客户,而对于公有云客户就无法使用,所有就准备开发企业微信的第三方应用,本文主要介绍在调研阶段遇到的山珍海味 ...

随机推荐

  1. 微信开发 回复用户消息 .net C#

    前段时间开发了公司的微信 这里做个知识总结分享下经验,望一起学习..... 感觉后面写个系列的最好了 .... 企业需求: 给指定企业用户发送消息:如考勤信息. 企业通知.个人信息推送等等, /// ...

  2. RPA主流厂商有哪些?

    RPA(机器人流程自动化(Robotic Process Automation)是一种能够自动化基于规则.结构化和重复的业务流程的技术.机器人流程自动化降低了成本,同时防止了人为错误,该技术目前已应用 ...

  3. P7961 数列 题解

    对模拟的过程不敏感,对范围的数字不敏感 手玩是发现规律的好方式 计数 dp 以及一众计数题是明显短板,需要加紧突破. 样例解释已经较为明显地提示了这道题的大致做法.对于计数题,有动归与组合数学两种方法 ...

  4. 关于lambda的由来

    总结lambda表达式的本质就是匿名方法,根据委托推断类型 class Program { static void Main(string[] args) { //泛型委托 最后一个是返回值 Acti ...

  5. Lodash常用函数(二)

    数组/对象方法 1.remove(元素筛选,分到两个数组) 2.sortedUniq (去重,排序) 3.takeRightWhile ( 从array数组的最后一个元素开始提取元素,直到 predi ...

  6. STM32F407 学习 (0) 各种外设功能 (中)

    十.高级定时器 1.重复计数器   如果我们设置重复计数器寄存器 RCR 的值为 N,那么更新事件将在定时器发生 N+1 次上溢或下溢时发生.重复计数器的特性,在控制生成 PWM 信号时很有用. 2. ...

  7. SwitchHosts operation not permitted 解决方案--亲测有效

    SwitchHost!是帮助我们管理Hosts的工具,可以帮助我们做域名解析, 弥补了如果要修改域名还要改计算机C:\Windows\System32\drivers\etc位置下的hosts文件的弊 ...

  8. CentOS7-自动化部署web集群

    一.项目要求 1.创建role,通过role完成项目(可能需要多个role) 2.部署nginx调度器(node2主机) 3.部署2台lnmp服务器(node3,node4主机) 4.部署mariad ...

  9. C++的一些随笔(第一篇)

    C++中 ->的作用 ->用于指针 ->用于指向结构体的指针 ->用于指向结构体的指针,表示结构体内的元素  #include<stdio.h> struct ro ...

  10. JSF预热功能在企业前台研发部的实践与探索

    作者:京东零售 李孟东 00 导读 企业前台研发部包含了企业业务大部分的对外前台系统,其中京东VOP平台(开放平台)适合于自建内网采购商城平台的企业客户. 京东为这类客户专门开发API接口,对接到客户 ...