以下為uniapp代碼?。?！
第一步：
微信小程序webview組件路徑寫花生殼映射的https://***域名。
webView頁面
<template>
<view>
<web-view :src="wvUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
wvUrl: `https://******/h5/index/#/pages/login/login?platformToken=123456`,
}
},
methods: {}
}
</script>
<style>
</style>第二步：
?花生殼配置映射，獲取域名。
花生殼動態(tài)域名解析服務-貝銳官網|花生殼官網|DNS內網穿透|域名注冊|向日葵遠程控制|遠程桌面|蒲公英路由器-貝銳官網https://www.oray.com/
?
第三步：
uniapp獲取定位。(過程全前端實現(xiàn)無后端)
????????3.1? ? 下載所需文件(npm install crypto-js為了SHA1加密,npm install weixin-js-sdk為了使用微信的api)
? ? ? ? 3.2? ??manifest.json配置
????????重要：uniapp H5端口不能使用默認80(自己踩的坑)
manifest.json
/* 小程序特有相關 */
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "您的位置信息將用于小程序位置接口的效果展示"
}
},
// 微信小程序使用位置相關api需要在此處注冊
"requiredPrivateInfos": ["getLocation"]
},
"h5": {
"devServer": {
"port": 8081,
// 此處代理是為了前端獲取access_token、jsapi_ticket,如果是后端獲取就不必寫了
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "https://api.weixin.qq.com",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
}
}????????3.3? ? 獲取access_token、jsapi_ticket、簽名，配置。(配置一次即可，其他頁面只需要調用定位)
App.vue
<script>
import wx from 'weixin-js-sdk';
import {
appid,
secret
} from "@/request/secret_appid.js";
import {
apiGetAccessToken,
apiGetJsapi_ticket,
getSignature
} from '@/request/locationApi.js';
export default {
onLaunch: function() {
let {
accessToken,
dateTime
} = uni.getStorageSync("access_token");
let {
jsapiTicket
} = uni.getStorageSync("jsapi_ticket");
let chaTime = new Date().getTime() - dateTime;
let h_2 = 2 * 60 * 60 * 1000; // 2*60*60*1000 2小時毫秒值
if (!uni.getStorageSync("access_token") || chaTime >= h_2) { // 超過2小時需要重新獲取accessToken
console.log("重新請求token");
this.gettoken();
} else {
console.log("直接走配置");
let result = getSignature(jsapiTicket); // 傳入ticket獲得timestamp,nonceStr,signature
this.configWx(result); // 初始化配置
}
},
onShow: function() {},
onHide: function() {},
methods: {
// 獲取token
gettoken() {
apiGetAccessToken(appid, secret).then(res => {
// 需要緩存token
if (!res.data.errcode) {
let access_token = {
accessToken: res.data.access_token,
dateTime: new Date().getTime(),
}
uni.setStorageSync("access_token", access_token);
this.getJsapi_ticket(res.data.access_token); // 獲取jsapi_ticket
} else {
uni.showToast({
title: `獲取accessToken失敗,errcode:${res.data.errcode}`,
icon: "none"
})
}
})
},
// 獲取jsapi_ticket
getJsapi_ticket(accessToken) {
apiGetJsapi_ticket(accessToken).then(res => {
if (res.data.errcode == 0) {
let jsapi_ticket = {
jsapiTicket: res.data.ticket
}
uni.setStorageSync("jsapi_ticket", jsapi_ticket);
let result = getSignature(res.data.ticket); // 簽名獲取timestamp,nonceStr,signature
this.configWx(result); // 初始化配置
} else {
uni.showToast({
title: `獲取jsapi_ticket失敗,errcode:${res.data.errcode}`,
icon: "none"
})
}
})
},
// 初始化配置
configWx(result) {
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: appid, // 必填，公眾號的唯一標識
timestamp: result.timestamp, // 必填，生成簽名的時間戳
nonceStr: result.noncestr, // 必填，生成簽名的隨機串
signature: result.signature, // 必填，簽名
jsApiList: ["getLocation"] // 必填，需要使用的JS接口列表
});
wx.error((err) => {
uni.showToast({
title: "配置失敗",
icon: "none"
})
})
},
}
}
</script>
<style>
</style>????????3.4? ? 獲取定位方法
weixin-js-sdk_location.js
import wx from 'weixin-js-sdk';
// 坐標轉化的方法
import {
gcj02tobd09
} from '@/utils/coordinateTransform.js';
// 獲取地理坐標
export function getByLocation() {
return new Promise((resolve, reject) => {
wx.ready(() => {
wx.getLocation({
type: 'gcj02', // 默認為wgs84(gcj02)的gps坐標
success: function(res) {
let result = gcj02tobd09(res.longitude, res.latitude);
let lngLat = {
code: 200,
lng: result[0],
lat: result[1]
};
resolve(lngLat)
},
error: function(err) {
reject(err)
},
})
})
})
}????????3.5? ? 使用
<template>
<view></view>
</template>
<script>
import {
getByLocation
} from '@/utils/weixin-js-sdk_location.js';
export default {
data() {
return {}
},
onShow() {
// 通過公眾號sdk獲取位置
getByLocation().then(res => {
if (res.code == 200) {
alert(JSON.stringify(res))
} else {
uni.showToast({
title: "獲取經緯度失敗",
icon: "none"
})
}
})
},
methods: {}
}
</script>
<style>
</style>第四步：所需文件
? ? ? ? 4.1? ? secret_appid.js：存儲appid及secret
// 測試公眾號
let appid = "";
let secret = "";
export {
appid,
secret
}? ? ? ? 4.2? ??locationApi.js：獲取accessToken、jsapi_ticket、簽名等方法
import CryptoJS from "crypto-js";
/*
請求函數(shù)
*/
function request({
url,
method,
params
}) {
uni.showLoading({
title: "加載中..."
});
return new Promise((resolve, reject) => {
uni.request({
url: url,
method: method || 'GET',
data: params || {},
success(res) {
resolve(res);
},
fail(err) {
reject(err);
},
complete() {
uni.hideLoading();
}
});
});
}
/* 第一步：獲取accessToken
access_token的有效期目前為2個小時，需定時刷新
傳參:
appid:開發(fā)者ID(AppID)
secret:開發(fā)者密碼(AppSecret)
*/
// https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}
function apiGetAccessToken(appid, secret) {
return request({
url: `/api/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
})
}
/* 第二步：獲取jsapi_ticket
jsapi_ticket（有效期7200秒，開發(fā)者必須在自己的服務全局緩存jsapi_ticket）用于權限驗證的簽名
傳參:
access_token
*/
function apiGetJsapi_ticket(access_token) {
return request({
url: `/api/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`,
})
}
// 第三步：獲取signature
function getSignature(ticket) {
let noncestr = getRandomString(); // 16位隨機字符串
let jsapi_ticket = ticket; // 此處必須得到有效的jsapi_ticket
let timestamp = getTimestamp(); // 時間戳
let url = getConfigUrl(); // URL
let obj = {
noncestr,
jsapi_ticket,
timestamp,
url
}
let string1 = sort_ascii(obj);
let signature = CryptoJS.SHA1(string1).toString();
let result = {
noncestr,
timestamp,
signature
}
return result;
}
/*
簽名算法所需參數(shù)：
noncestr：隨機字符串，
jsapi_ticket：有效的，
timestamp：時間戳，
url：（當前網頁的URL，不包含#及其后面部分）
對以上四個參數(shù)整理成對象并按ascii碼從小到大排序,排完序在進行sh1加密 得到signature
let result = { noncestr, jsapi_ticket: ticket, timestamp, url: getConfigUrl() };
sort_ascii(result)
*/
// 生成一個隨機的字符串
function getRandomString(len = 16) {
let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
let maxPos = chars.length;
let character = '';
if (len) {
for (let i = 0; i < len; i++) {
character += chars.charAt(Math.floor(Math.random() * maxPos))
}
} else {
for (let i = 0; i < len; i++) {
character += chars.charAt(Math.floor(Math.random() * maxPos))
}
}
return character;
}
// 獲取時間戳
function getTimestamp() {
return new Date().getTime();
}
// 獲取url
function getConfigUrl() {
let u = window.navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
//安卓需要使用當前URL進行微信API注冊（即當場調用location.href.split('#')[0]）
//iOS需要使用進入頁面的初始URL進行注冊，（即在任何pushstate發(fā)生前，調用location.href.split('#')[0]）
let url = '';
if (isiOS) {
url = `${window.localStorage.getItem('_iosWXConfig_') || window.location.href.split('#')[0]}`; //獲取初始化的url相關參數(shù)
} else {
url = window.location.href.split('#')[0];
}
return url;
}
// 按ascii碼從小到大排序
function sort_ascii(obj) {
let arr = [];
let num = 0;
for (let i in obj) {
arr[num] = i;
num++;
}
let sortArr = arr.sort();
let str = ''; //自定義排序字符串
for (let i in sortArr) {
str += sortArr[i] + '=' + obj[sortArr[i]] + '&';
}
//去除兩側字符串
let char = '&';
str = str.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
return str;
}
export {
apiGetAccessToken,
apiGetJsapi_ticket,
getRandomString,
getTimestamp,
getConfigUrl,
sort_ascii,
getSignature
}????????4.3? ??weixin-js-sdk_location.js：獲取定位封裝的方法
import wx from 'weixin-js-sdk';
import {
gcj02tobd09
} from '@/utils/coordinateTransform.js';
// 獲取地理坐標
export function getByLocation() {
return new Promise((resolve, reject) => {
wx.ready(() => {
wx.getLocation({
type: 'gcj02', // 默認為wgs84(gcj02)的gps坐標
success: function(res) {
let result = gcj02tobd09(res.longitude, res.latitude);
let lngLat = {
code: 200,
lng: result[0],
lat: result[1]
};
resolve(lngLat)
},
error: function(err) {
reject(err)
},
})
})
})
}? ? ? ? 4.4? ??coordinateTransform.js：坐標轉換方法
// 地圖坐標轉換公共方法
//定義一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0;
const ee = 0.00669342162296594323;
export function transformlat(lng, lat) {
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));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
return ret
}
export function transformlng(lng, lat) {
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
return ret
}
/**
* 判斷是否在國內，不在國內則不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
export function out_of_china(lng, lat) {
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
}
/**
* WGS84轉GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
export function wgs84togcj02 (lng, lat) {
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [mglng, mglat]
}
}
/**
* GCJ02 轉換為 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
export function gcj02towgs84 (lng, lat) {
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
let mglat = lat + dlat;
let mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
}
/**
* 百度坐標系 (BD-09) 與 火星坐標系 (GCJ-02)的轉換
* 即 百度 轉 谷歌、高德
* @param bd_lon
* @param bd_lat
* @returns {*[]}
*/
export function bd09togcj02 (bd_lon, bd_lat) {
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat]
}
/**
* 火星坐標系 (GCJ-02) 與百度坐標系 (BD-09) 的轉換
* 即谷歌、高德 轉 百度
* @param lng
* @param lat
* @returns {*[]}
*/
export function gcj02tobd09 (lng, lat) {
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat]
}
/**
* WGS84轉BD09
* @param lng
* @param lat
* @returns {*[]}
*/
export function WGS84ToBD09 (lng, lat) {
let gcj02 = wgs84togcj02(lng, lat);
return gcj02tobd09(gcj02[0], gcj02[1]);
}
/**
* BD09轉WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
export function BD09ToWGS84 (lng, lat) {
let gcj02 = bd09togcj02(lng, lat);
return gcj02towgs84(gcj02[0], gcj02[1]);
}
第五步：
測試公眾號（開啟獲取位置的權限、js接口安全域名）
微信公眾平臺https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
文章來源：http://www.zghlxwxcb.cn/news/detail-828473.html
第六步：
vebniew的src域名要和js接口安全域名一致?（不能一個寫花生殼域名一個寫本地ip）文章來源地址http://www.zghlxwxcb.cn/news/detail-828473.html
到了這里，關于微信小程序內嵌webView訪問H5界面，在H5界面獲取定位的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
