uni-app开发小程序实时定位(前后台)

实现效果:用户进入小程序开始定位,当小程序切换至后台时仍然进行定位,最终形成用户活动轨迹图

申请接口

使用wx.onLocationChangewx.startLocationUpdateBackground实现
wx.onLocationChange:监听实时地理位置变化事件
wx.startLocationUpdateBackground:开启小程序在前后台时均可接收位置消息,后台包括离开小程序后继续使用微信(微信仍在前台)、离开微信(微信在后台)两个场景,需引导用户开启授权。授权以后,小程序在运行中或进入后台均可接受位置消息变化。

  • 以上两个接口均需开通方可使用:根据官方查看小程序服务类目是否符合,不符合请添加符合的新类目。
  • 开通API:在后台==>开发管理==>开发工具中开通使用。
  • 在这里插入图片描述
    关于审核总不通过的问题:
    根据实例写清楚用途,最好上传视频,如果审核中时间较长,大概率能通过,两个接口申请理由基本一致,一个过了另一个也能过,如果onLocationChange过了startLocationUpdateBackground没过,建议加上前后台等关键字,以下是我们的仅供参考
    在这里插入图片描述

功能实现

1. 配置

manifest.json中配置

"mp-weixin" : {
	 ...
	 // 配置一下两项
     "requiredBackgroundModes" : [ "location" ],
     "requiredPrivateInfos" : [ "onLocationChange", "startLocationUpdateBackground" ]
 },

2. 功能

getLocation() {
		uni.startLocationUpdateBackground({
			success: res => {
				wx.onLocationChange(async function(res) {
					console.log('location change', res)
					// 自己的业务代码
				})
			},
			fail: err => console.error('开启小程序接收位置消息失败:', err),
			complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
		});
},

3. 关于报错

startLocationUpdateBackground:fail api scope is not declared in the privacy agreement.
小程序后台==>设置==>基本设置==>服务内容声明==>用户隐私保护指引中
在这里插入图片描述
在这里插入图片描述
** 如果问题,欢迎一期讨论 **

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 开发准备 在开始开发,需要先进行一些准备工作: - 安装uni-app的开发环境,详见uni-app官方文档; - 创建一个微信小程序开发者账号,获取小程序AppID; - 在小程序管理后台中,开启“获取用户信息”权限和“登录”权限。 2. 登录流程 在uni-app中,可以使用uni.login()方法进行微信登录。该方法返回一个promise对象,表示登录是否成功。在登录成功后,可以使用uni.getUserInfo()方法获取用户信息。 具体的登录流程如下: - 调用uni.login()方法进行微信登录,并获取到code值; - 将code值发送到后端服务器,后端服务器根据code值获取到用户的openid和session_key; - 将openid和session_key存储到本地storage中,用于后续的用户认证; - 根据获取到的用户openid,可以将用户与后端系统中的用户进行关联。 3. 获取用户信息 在登录成功后,可以使用uni.getUserInfo()方法获取用户信息。该方法返回一个promise对象,表示获取用户信息是否成功。在获取成功后,可以将用户信息展示到页面上,或者将用户信息发送到后端服务器。 具体的获取用户信息流程如下: - 调用uni.getUserInfo()方法获取用户信息; - 将获取到的用户信息展示到页面上,或者将用户信息发送到后端服务器。 4. 完整代码示例 下面是一个完整的uni-app微信小程序登录开发示例代码: ``` <template> <view class="container"> <view class="userinfo"> <button @tap="login" v-if="!hasUserInfo">微信登录</button> <image :src="userInfo.avatarUrl" v-if="hasUserInfo" /> <text>{{userInfo.nickName}}</text> </view> </view> </template> <script> export default { data() { return { userInfo: {}, hasUserInfo: false } }, methods: { login() { uni.login({ success: res => { if (res.code) { // 将code发送到后端服务器 uni.request({ url: 'https://example.com/login', data: { code: res.code }, success: res => { // 将openid和session_key存储到本地storage uni.setStorageSync('openid', res.data.openid) uni.setStorageSync('session_key', res.data.session_key) } }) } else { console.log('登录失败:' + res.errMsg) } } }) }, getUserInfo() { uni.getUserInfo({ success: res => { this.userInfo = res.userInfo this.hasUserInfo = true // 将用户信息发送到后端服务器 uni.request({ url: 'https://example.com/userInfo', data: { openid: uni.getStorageSync('openid'), userInfo: res.userInfo } }) } }) } } } </script> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .userinfo { display: flex; flex-direction: column; align-items: center; } </style> ``` 在上面的代码中,当用户点击“微信登录”按钮时,会调用login()方法进行微信登录,并将获取到的openid和session_key存储到本地storage中。当用户点击“获取用户信息”按钮时,会调用getUserInfo()方法获取用户信息,并将用户信息发送到后端服务器。在页面上,会根据hasUserInfo变量的值来决定是否展示用户信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值