devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序内嵌webView访问H5界面，在H5界面获取定位_小程序webview获取定位

作者：Guff_9hys | 2024-07-23 17:39:30

赞

踩

小程序webview获取定位

以下为uniapp代码！！！

第一步：

微信小程序webview组件路径写花生壳映射的https://***域名。

  1. webView页面
  2.  
  3.  
  4.  
  5. <template>
  6. 	<view>
  7. 		<web-view :src="wvUrl"></web-view>
  8. 	</view>
  9. </template>
  10.  
  11. <script>
  12. 	export default {
  13. 		data() {
  14. 			return {
  15. 				wvUrl: `https://******/h5/index/#/pages/login/login?platformToken=123456`,
  16. 			}
  17. 		},
  18. 		methods: {}
  19. 	}
  20. </script>
  21.  
  22. <style>
  23. </style>

第二步：

 花生壳配置映射，获取域名。
花生壳动态域名解析服务-贝锐官网|花生壳官网|DNS内网穿透|域名注册|向日葵远程控制|远程桌面|蒲公英路由器-贝锐官网icon-default.png?t=N7T8https://www.oray.com/

 

第三步：

uniapp获取定位。(过程全前端实现无后端)

        3.1    下载所需文件(npm install crypto-js为了SHA1加密,npm install weixin-js-sdk为了使用微信的api)
        3.2    manifest.json配置

        重要：uniapp H5端口不能使用默认80(自己踩的坑)

  1. manifest.json
  2.  
  3.  
  4.  
  5. /* 小程序特有相关 */
  6. 	"mp-weixin": {
  7. 		"appid": "",
  8. 		"setting": {
  9. 			"urlCheck": false
  10. 		},
  11. 		"usingComponents": true,
  12. 		"permission": {
  13. 			"scope.userLocation": {
  14. 				"desc": "您的位置信息将用于小程序位置接口的效果展示"
  15. 			}
  16. 		},
  17. 		// 微信小程序使用位置相关api需要在此处注册
  18. 		"requiredPrivateInfos": ["getLocation"]
  19. 	},
  20.  
  21. "h5": {
  22. 		"devServer": {
  23. 			"port": 8081,
  24.             // 此处代理是为了前端获取access_token、jsapi_ticket,如果是后端获取就不必写了
  25. 			"disableHostCheck": true,
  26. 			"proxy": {
  27. 				"/api": {
  28. 					"target": "https://api.weixin.qq.com",
  29. 					"changeOrigin": true,
  30. 					"pathRewrite": {
  31. 						"^/api": "" 
  32. 					}
  33. 				}
  34. 			}
  35. 		}
  36. 	}

        3.3    获取access_token、jsapi_ticket、签名，配置。(配置一次即可，其他页面只需要调用定位)
  1. App.vue
  2.  
  3.  
  4.  
  5. <script>
  6. 	import wx from 'weixin-js-sdk';
  7. 	import {
  8. 		appid,
  9. 		secret
  10. 	} from "@/request/secret_appid.js";
  11. 	import {
  12. 		apiGetAccessToken,
  13. 		apiGetJsapi_ticket,
  14. 		getSignature
  15. 	} from '@/request/locationApi.js';
  16. 	export default {
  17. 		onLaunch: function() {
  18. 			let {
  19. 				accessToken,
  20. 				dateTime
  21. 			} = uni.getStorageSync("access_token");
  22. 			let {
  23. 				jsapiTicket
  24. 			} = uni.getStorageSync("jsapi_ticket");
  25. 			let chaTime = new Date().getTime() - dateTime;
  26. 			let h_2 = 2 * 60 * 60 * 1000; // 2*60*60*1000	2小时毫秒值
  27. 			if (!uni.getStorageSync("access_token") || chaTime >= h_2) { // 超过2小时需要重新获取accessToken
  28. 				console.log("重新请求token");
  29. 				this.gettoken();
  30. 			} else {
  31. 				console.log("直接走配置");
  32. 				let result = getSignature(jsapiTicket); // 传入ticket获得timestamp,nonceStr,signature
  33. 				this.configWx(result); // 初始化配置
  34. 			}
  35. 		},
  36. 		onShow: function() {},
  37. 		onHide: function() {},
  38. 		methods: {
  39. 			// 获取token
  40. 			gettoken() {
  41. 				apiGetAccessToken(appid, secret).then(res => {
  42. 					// 需要缓存token
  43. 					if (!res.data.errcode) {
  44. 						let access_token = {
  45. 							accessToken: res.data.access_token,
  46. 							dateTime: new Date().getTime(),
  47. 						}
  48. 						uni.setStorageSync("access_token", access_token);
  49. 						this.getJsapi_ticket(res.data.access_token); // 获取jsapi_ticket
  50. 					} else {
  51. 						uni.showToast({
  52. 							title: `获取accessToken失败,errcode:${res.data.errcode}`,
  53. 							icon: "none"
  54. 						})
  55. 					}
  56. 				})
  57. 			},
  58. 			// 获取jsapi_ticket
  59. 			getJsapi_ticket(accessToken) {
  60. 				apiGetJsapi_ticket(accessToken).then(res => {
  61. 					if (res.data.errcode == 0) {
  62. 						let jsapi_ticket = {
  63. 							jsapiTicket: res.data.ticket
  64. 						}
  65. 						uni.setStorageSync("jsapi_ticket", jsapi_ticket);
  66. 						let result = getSignature(res.data.ticket); // 签名获取timestamp,nonceStr,signature
  67. 						this.configWx(result); // 初始化配置
  68. 					} else {
  69. 						uni.showToast({
  70. 							title: `获取jsapi_ticket失败,errcode:${res.data.errcode}`,
  71. 							icon: "none"
  72. 						})
  73. 					}
  74. 				})
  75. 			},
  76. 			// 初始化配置
  77. 			configWx(result) {
  78. 				wx.config({
  79. 					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  80. 					appId: appid, // 必填，公众号的唯一标识
  81. 					timestamp: result.timestamp, // 必填，生成签名的时间戳
  82. 					nonceStr: result.noncestr, // 必填，生成签名的随机串
  83. 					signature: result.signature, // 必填，签名
  84. 					jsApiList: ["getLocation"] // 必填，需要使用的JS接口列表
  85. 				});
  86. 				wx.error((err) => {
  87. 					uni.showToast({
  88. 						title: "配置失败",
  89. 						icon: "none"
  90. 					})
  91. 				})
  92. 			},
  93. 		}
  94. 	}
  95. </script>
  96.  
  97. <style>
  98. </style>
        3.4    获取定位方法
  1. weixin-js-sdk_location.js
  2.  
  3.  
  4.  
  5. import wx from 'weixin-js-sdk';
  6. // 坐标转化的方法
  7. import {
  8. 	gcj02tobd09
  9. } from '@/utils/coordinateTransform.js';
  10.  
  11.  
  12. // 获取地理坐标
  13. export function getByLocation() {
  14. 	return new Promise((resolve, reject) => {
  15. 		wx.ready(() => {
  16. 			wx.getLocation({
  17. 				type: 'gcj02', // 默认为wgs84(gcj02)的gps坐标
  18. 				success: function(res) {
  19. 					let result = gcj02tobd09(res.longitude, res.latitude);
  20. 					let lngLat = {
  21. 						code: 200,
  22. 						lng: result[0],
  23. 						lat: result[1]
  24. 					};
  25. 					resolve(lngLat)
  26. 				},
  27. 				error: function(err) {
  28. 					reject(err)
  29. 				},
  30. 			})
  31. 		})
  32. 	})
  33. }
        3.5    使用
  1. <template>
  2. 	<view></view>
  3. </template>
  4.  
  5. <script>
  6. 	import {
  7. 		getByLocation
  8. 	} from '@/utils/weixin-js-sdk_location.js';
  9.  
  10. 	export default {
  11. 		data() {
  12. 			return {}
  13. 		},
  14. 		onShow() {
  15. 			// 通过公众号sdk获取位置
  16. 			getByLocation().then(res => {
  17. 				if (res.code == 200) {
  18. 					alert(JSON.stringify(res))
  19. 				} else {
  20. 					uni.showToast({
  21. 						title: "获取经纬度失败",
  22. 						icon: "none"
  23. 					})
  24. 				}
  25. 			})
  26. 		},
  27. 		methods: {}
  28. 	}
  29. </script>
  30.  
  31. <style>
  32. </style>

第四步：所需文件

        4.1    secret_appid.js：存储appid及secret
  1. // 测试公众号
  2. let appid = "";
  3. let secret = "";
  4. export {
  5. 	appid,
  6. 	secret
  7. }
        4.2    locationApi.js：获取accessToken、jsapi_ticket、签名等方法
  1. import CryptoJS from "crypto-js";
  2.  
  3. /* 
  4. 请求函数
  5. */
  6. function request({
  7. 	url,
  8. 	method,
  9. 	params
  10. }) {
  11. 	uni.showLoading({
  12. 		title: "加载中..."
  13. 	});
  14.  
  15. 	return new Promise((resolve, reject) => {
  16. 		uni.request({
  17. 			url: url,
  18. 			method: method || 'GET',
  19. 			data: params || {},
  20. 			success(res) {
  21. 				resolve(res);
  22. 			},
  23. 			fail(err) {
  24. 				reject(err);
  25. 			},
  26. 			complete() {
  27. 				uni.hideLoading();
  28. 			}
  29. 		});
  30. 	});
  31. }
  32.  
  33. /* 第一步：获取accessToken
  34. access_token的有效期目前为2个小时，需定时刷新
  35. 传参:
  36. 	appid:开发者ID(AppID)
  37. 	secret:开发者密码(AppSecret)
  38. */
  39. // https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}
  40. function apiGetAccessToken(appid, secret) {
  41. 	return request({
  42. 		url: `/api/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
  43. 	})
  44. }
  45.  
  46. /* 第二步：获取jsapi_ticket
  47. jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）用于权限验证的签名
  48. 传参:
  49. 	access_token
  50. */
  51. function apiGetJsapi_ticket(access_token) {
  52. 	return request({
  53. 		url: `/api/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`,
  54. 	})
  55. }
  56.  
  57. // 第三步：获取signature
  58. function getSignature(ticket) {
  59. 	let noncestr = getRandomString(); // 16位随机字符串
  60. 	let jsapi_ticket = ticket; // 此处必须得到有效的jsapi_ticket
  61. 	let timestamp = getTimestamp(); // 时间戳
  62. 	let url = getConfigUrl(); // URL
  63.  
  64. 	let obj = {
  65. 		noncestr,
  66. 		jsapi_ticket,
  67. 		timestamp,
  68. 		url
  69. 	}
  70. 	let string1 = sort_ascii(obj);
  71. 	let signature = CryptoJS.SHA1(string1).toString();
  72.  
  73. 	let result = {
  74. 		noncestr,
  75. 		timestamp,
  76. 		signature
  77. 	}
  78. 	return result;
  79. }
  80.  
  81.  
  82.  
  83. /* 
  84. 签名算法所需参数：
  85. 	noncestr：随机字符串，
  86. 	jsapi_ticket：有效的，
  87. 	timestamp：时间戳，
  88. 	url：（当前网页的URL，不包含#及其后面部分）
  90. 对以上四个参数整理成对象并按ascii码从小到大排序,排完序在进行sh1加密	得到signature
  91. let result = { noncestr, jsapi_ticket: ticket, timestamp, url: getConfigUrl() };
  92. sort_ascii(result)
  93. */
  94. // 生成一个随机的字符串
  95. function getRandomString(len = 16) {
  96. 	let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
  97. 	let maxPos = chars.length;
  98. 	let character = '';
  99.  
  100. 	if (len) {
  101. 		for (let i = 0; i < len; i++) {
  102. 			character += chars.charAt(Math.floor(Math.random() * maxPos))
  103. 		}
  104. 	} else {
  105. 		for (let i = 0; i < len; i++) {
  106. 			character += chars.charAt(Math.floor(Math.random() * maxPos))
  107. 		}
  108. 	}
  109. 	return character;
  110. }
  111. // 获取时间戳
  112. function getTimestamp() {
  113. 	return new Date().getTime();
  114. }
  115. // 获取url
  116. function getConfigUrl() {
  117. 	let u = window.navigator.userAgent;
  118. 	let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  119. 	//安卓需要使用当前URL进行微信API注册（即当场调用location.href.split('#')[0]）
  120. 	//iOS需要使用进入页面的初始URL进行注册，（即在任何pushstate发生前，调用location.href.split('#')[0]）
  121. 	let url = '';
  122. 	if (isiOS) {
  123. 		url = `${window.localStorage.getItem('_iosWXConfig_') || window.location.href.split('#')[0]}`; //获取初始化的url相关参数
  124. 	} else {
  125. 		url = window.location.href.split('#')[0];
  126. 	}
  127. 	return url;
  128. }
  129. // 按ascii码从小到大排序
  130. function sort_ascii(obj) {
  131. 	let arr = [];
  132. 	let num = 0;
  133. 	for (let i in obj) {
  134. 		arr[num] = i;
  135. 		num++;
  136. 	}
  137. 	let sortArr = arr.sort();
  138. 	let str = ''; //自定义排序字符串
  139. 	for (let i in sortArr) {
  140. 		str += sortArr[i] + '=' + obj[sortArr[i]] + '&';
  141. 	}
  142. 	//去除两侧字符串
  143. 	let char = '&';
  144. 	str = str.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
  145.  
  146. 	return str;
  147. }
  148.  
  149. export {
  150. 	apiGetAccessToken,
  151. 	apiGetJsapi_ticket,
  152. 	getRandomString,
  153. 	getTimestamp,
  154. 	getConfigUrl,
  155. 	sort_ascii,
  156. 	getSignature
  157. }
        4.3    weixin-js-sdk_location.js：获取定位封装的方法
  1. import wx from 'weixin-js-sdk';
  2. import {
  3. 	gcj02tobd09
  4. } from '@/utils/coordinateTransform.js';
  5.  
  6.  
  7. // 获取地理坐标
  8. export function getByLocation() {
  9. 	return new Promise((resolve, reject) => {
  10. 		wx.ready(() => {
  11. 			wx.getLocation({
  12. 				type: 'gcj02', // 默认为wgs84(gcj02)的gps坐标
  13. 				success: function(res) {
  14. 					let result = gcj02tobd09(res.longitude, res.latitude);
  15. 					let lngLat = {
  16. 						code: 200,
  17. 						lng: result[0],
  18. 						lat: result[1]
  19. 					};
  20. 					resolve(lngLat)
  21. 				},
  22. 				error: function(err) {
  23. 					reject(err)
  24. 				},
  25. 			})
  26. 		})
  27. 	})
  28. }
        4.4    coordinateTransform.js：坐标转换方法
  1. // 地图坐标转换公共方法
  2.  
  3. //定义一些常量
  4. const PI = 3.1415926535897932384626;
  5. const a = 6378245.0;
  6. const ee = 0.00669342162296594323;
  7.  
  8. export function transformlat(lng, lat) {
  9.   var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
  10.   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  11.   ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
  12.   ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
  13.   return ret
  14. }
  15.  
  16. export function transformlng(lng, lat) {
  17.   var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  18.   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  19.   ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
  20.   ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
  21.   return ret
  22. }
  23.  
  24. /**
  25.  * 判断是否在国内，不在国内则不做偏移
  26.  * @param lng
  27.  * @param lat
  28.  * @returns {boolean}
  29.  */
  30. export function out_of_china(lng, lat) {
  31.   return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
  32. }
  33.  
  34. /**
  35.  * WGS84转GCj02
  36.  * @param lng
  37.  * @param lat
  38.  * @returns {*[]}
  39.  */
  40. export function wgs84togcj02 (lng, lat) {
  41.   if (out_of_china(lng, lat)) {
  42.     return [lng, lat]
  43.   } else {
  44.     var dlat = transformlat(lng - 105.0, lat - 35.0);
  45.     var dlng = transformlng(lng - 105.0, lat - 35.0);
  46.     var radlat = lat / 180.0 * PI;
  47.     var magic = Math.sin(radlat);
  48.     magic = 1 - ee * magic * magic;
  49.     var sqrtmagic = Math.sqrt(magic);
  50.     dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
  51.     dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
  52.     var mglat = lat + dlat;
  53.     var mglng = lng + dlng;
  54.     return [mglng, mglat]
  55.   }
  56. }
  57.  
  58. /**
  59.  * GCJ02 转换为 WGS84
  60.  * @param lng
  61.  * @param lat
  62.  * @returns {*[]}
  63.  */
  64. export function gcj02towgs84 (lng, lat) {
  65.   if (out_of_china(lng, lat)) {
  66.     return [lng, lat]
  67.   } else {
  68.     var dlat = transformlat(lng - 105.0, lat - 35.0);
  69.     var dlng = transformlng(lng - 105.0, lat - 35.0);
  70.     var radlat = lat / 180.0 * PI;
  71.     var magic = Math.sin(radlat);
  72.     magic = 1 - ee * magic * magic;
  73.     var sqrtmagic = Math.sqrt(magic);
  74.     dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
  75.     dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
  76.     let mglat = lat + dlat;
  77.     let mglng = lng + dlng;
  78.     return [lng * 2 - mglng, lat * 2 - mglat]
  79.   }
  80. }
  81.  
  82. /**
  83.  * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
  84.  * 即 百度 转 谷歌、高德
  85.  * @param bd_lon
  86.  * @param bd_lat
  87.  * @returns {*[]}
  88.  */
  89. export function bd09togcj02 (bd_lon, bd_lat) {
  90.   var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  91.   var x = bd_lon - 0.0065;
  92.   var y = bd_lat - 0.006;
  93.   var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  94.   var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  95.   var gg_lng = z * Math.cos(theta);
  96.   var gg_lat = z * Math.sin(theta);
  97.   return [gg_lng, gg_lat]
  98. }
  99.  
  100. /**
  101.  * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
  102.  * 即谷歌、高德 转 百度
  103.  * @param lng
  104.  * @param lat
  105.  * @returns {*[]}
  106.  */
  107. export function gcj02tobd09 (lng, lat) {
  108.   var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
  109.   var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
  110.   var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
  111.   var bd_lng = z * Math.cos(theta) + 0.0065;
  112.   var bd_lat = z * Math.sin(theta) + 0.006;
  113.   return [bd_lng, bd_lat]
  114. }
  115.  
  116. /**
  117.  * WGS84转BD09
  118.  * @param lng
  119.  * @param lat
  120.  * @returns {*[]}
  121.  */
  122. export function WGS84ToBD09 (lng, lat) {
  123.   let gcj02 = wgs84togcj02(lng, lat);
  124.   return gcj02tobd09(gcj02[0], gcj02[1]);
  125. }
  126.  
  127. /**
  128.  * BD09转WGS84
  129.  * @param lng
  130.  * @param lat
  131.  * @returns {*[]}
  132.  */
  133. export function BD09ToWGS84 (lng, lat) {
  134.   let gcj02 = bd09togcj02(lng, lat);
  135.   return gcj02towgs84(gcj02[0], gcj02[1]);
  136. }

第五步：

测试公众号（开启获取位置的权限、js接口安全域名）

微信公众平台icon-default.png?t=N7T8https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

第六步：

vebniew的src域名要和js接口安全域名一致 （不能一个写花生壳域名一个写本地ip）

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号