uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

这篇具有很好参考价值的文章主要介绍了uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.获取手机号(旧版本,只能在测试号调用)

1.获取手机号首先要先登录拿到code,用code去获取session_key

2.获取 code需要知道自己的AppID(小程序ID)和AppSecret(小程序密钥)

3.解密后得到手机号

 登录微信公众平台拿到自己的AppID(小程序ID)和AppSecret(小程序密钥)

 微信公众平台

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 补充获取 code:

               uni.login({
  					success: (loginRes) => {
					  console.log(loginRes.code,"code");
					}
				});

补充获取openId:

wx.request({
        url: `https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=你的secret&js_code=${code}&grant_type=authorization_code`,
        method: 'POST',
        data: {
            code: code
        },
        success: res => {
            console.log(res.data.openid, "获取openId");
        }
    })

获取session_key:

          uni.login({
  					success: (loginRes) => {
						let code = loginRes.code
						wx.request({
							url: `https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=你的secret&js_code=${code}&grant_type=authorization_code`,
							method: 'POST',
							data: {
								code: code
							},
							header: {
								'content-type': 'application/json;charset=UTF-8'
							},
							success: (res) => {
								this.sessionkey = res.data.session_key
							}
						})
					}
				});

解密:引入官方解密开放数据

服务端获取开放数据 | 微信开放文档

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 下载之后我们拿到WXBizDataCrypt.js文件把它放在项目中

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 import WXBizDataCrypt from "@/js/WXBizDataCrypt.js" 
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">唤起授权手机号</button>
           getPhoneNumber(e) {
 				let pc = new WXBizDataCrypt('你的AppID', this.sessionkey);
				let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				console.log(data, "解密之后的数据包含手机号")
			},

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

获取手机号(新版本)

获取access_token:

wx.request({
			url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret`,
			success: (res) => {
				console.log(res.data.access_token);
			}
})
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">唤起授权手机号</button>

 注:getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的,不能混用

getPhoneNumber code 动态令牌,可通过动态令牌换取用户手机号
 getPhoneNumber(e) {
				wx.request({
					url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret`,
					success: (res) => {
						this.access_token = res.data.access_token
						wx.request({
							url:'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=' +this.access_token,
							method: 'POST',
							data: {
								code: e.detail.code
							},
							success: (res) => {
								console.log(res, "获取到的手机号");
							}
						})
					}
				})
			},

二.获取用户地理位置

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

              uni.chooseLocation({
					success: function(res) {
						console.log(res, "获取当前的地理位置");
					}
				});

三.根据位置获取经纬度跳转高德

高德地图key获取方法:登录高德开放平台-控制台-应用管理-我的应用(创建新应用并添加key)

高德开放平台 | 高德地图API

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

                uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					data: {
						key: '你的高德地图key', 
						address: "杭州市西湖区学院路007号" 
					},
					success: (res) => {
						var latlon = res.data.geocodes[0].location.split(',')
						this.latitude = latlon[0]
						this.longitude = latlon[1]
						this.openMap()
					}
				})

 跳转到高德地图相应地址

          openMap() {
				uni.openLocation({
					latitude: Number(this.longitude),
					longitude: Number(this.latitude),
					success: (res) => {
						console.log(res, 'success');
					}
				});
			},

 四.小程序订阅消息提醒

微信公众平台

登录微信公众平台->订阅消息->选取一个模版

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 文章来源地址https://www.toymoban.com/news/detail-435202.html

		wx.requestSubscribeMessage({
					tmplIds: [
						'模板ID',
					],
					success: res => {
						if (res.errMsg === 'requestSubscribeMessage:ok') {
							wx.request({
								url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret',
								success: res => {
									var access_token = res.data.access_token
									wx.request({
										url: `https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${access_token}`,
										method: 'POST',
										header: {
											'Content-Type': 'application/json'
										},
										data: {
											"touser": this.openid,
											"template_id": "模板ID",
											"page": "index",
											"miniprogram_state": "developer",
											"lang": "zh_CN",
											"data": {
												"time9": {
													"value": this.dataform.appointmentTime
												},

												"thing14": {
													"value": this.dataform.projects
												},
												"thing8": {
													"value": this.dataform.mobile
												}
											},
										},
										success(res) {},
									})
								},
							})
						}
					},
				})

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

 

到了这里,关于uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:获取用户手机号(前端)

    获取手机号的开发过程可以分为三部分:微信前端设置,微信js文件编写,服务器端程序开发. 其中微信前端最为简单,在获取手机号的过程中我们必须经过用户授权,在wxml文件中加入如下代码: 然后我们需要编写js文件,当用户允许获取手机号后调用相关逻辑,将手机号加密信息发

    2024年02月06日
    浏览(64)
  • 小程序获取手机号和用户信息一键登录

    1、一建获取用户信息 以前可以通过 button open-type=\\\"getUserInfo\\\" 一键登录/button 来实现一建获取用户信息; 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像、昵称、性别与地区) 新增 getUserProfile 接口(基础库2.10.4版本开始支持),可获取

    2024年02月09日
    浏览(53)
  • 新版微信小程序获取用户手机号

    小程序手机号验证组件有两种 手机号快速验证组件 手机号实时验证组件

    2024年02月11日
    浏览(55)
  • 公众号和小程序获取用户信息及获取手机号

    公众号的获取用户信息 前端传code,后端根据code获取用户信息 代码: 小程序获取用户信息 前端传iv,encryptedData,code,然后后端根据code获取session_key,再利用session_key,encryptedData及iv来获取用户信息 注意:前端wx.login获取code和获取用户信息的顺序 代码:(用的easyWeChat) 小程

    2024年02月11日
    浏览(56)
  • 微信小程序——获取用户手机号(Java后台)

    最后有完整代码 1、获取code 2、利用code获取sessionkey 小程序端: Java后台: 获取小程序密钥:微信公众平台-开发管理-开发设置 3、获取iv和encryptedData并解密获取手机号 java后台: 如果报错40029则可能是appid不对 4、完整代码 wxml: wxss: js: Java后台

    2024年02月12日
    浏览(62)
  • 【微信小程序】如何获取用户手机号授权登录

    目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体),也就是说只针对企业认证小程序开放。若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。 在使用该接口时,用户可使用微信绑定手机号进行授权,也添加

    2024年02月16日
    浏览(74)
  • uniapp在小程序登录,获取用户信息,获取手机号等流程

    uniapp小程序的授权描述 1、微信小程序通过uni.login()方法可以获取到微信提供的code 2、通过登录获取的code码可以以获取用户唯一标识openid以及会话密钥sessionkey用于解密获取手机的加密信息 3、通过微信提供的获取微信手机号的方法getphonenumber拿到encryptedData iv两个字段的内容

    2024年02月12日
    浏览(49)
  • 微信小程序中如何获取用户手机号授权登录

    随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务。而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一。因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录。 首先,在小程序后台开发设置中勾选“获取手机号”选项

    2024年02月11日
    浏览(106)
  • 支付宝小程序:获取用户信息和手机号快捷登录

    随着支付宝小程序以其便捷性和安全性受到了广大开发者和用户的青睐。在uni-app框架下开发支付宝小程序时,如何安全、合规地获取用户信息和手机号成为了开发者必须面对的问题。 1.在开始之前,确保你已经在支付宝开放平台上注册并创建应用,获取到应用的AppID; 2.小程

    2024年04月28日
    浏览(47)
  • 小程序 获取用户头像、昵称、手机号的组件封装(最新版)

    在父组件引入该组件  子组件详细代码为: authMes.wxml  authMes.js   authMes.less  authMes.json app.apis是封装的微信小程序请求接口的方法详细见这篇文章

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包