微信小程序 webview 定位 并返回

Position - Web API | MDN WEB定位API文档地址

引入wx-jsdk

html 复制代码
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

返回小程序操作

javascript 复制代码
let path = "/pages/home/back";
jWeixin.miniProgram.redirectTo({url:path })

HTML页面代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB定位</title>
    <!-- cdn 引入 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
    <div class="mapinfo"></div>
    <div class="xiedai">携带信息:</div>
    <div class="fanhui">返回</div>
    <script>
        if (navigator.geolocation) {
                // 解析网页携带参数 code
                var code = location.search.split('=')[1] || '无';
                console.log(code);
                // alert( ' 浏览器支持 geolocation ' );
                // navigator.geolocation.getCurrentPosition(success, error, options);
                navigator.geolocation.getCurrentPosition(function(position){
                    console.log(position);
                    var lat = position.coords.latitude; // 纬度
                    var lng = position.coords.longitude; // 经度
                    var alt = position.coords.altitude; // 海拔
                    var acc = position.coords.accuracy; // 精度
                    var spd = position.coords.speed; // 速度
                    var hdg = position.coords.heading; // 方向
                    var tms = position.timestamp; // 时间戳
                    console.log(lat,lng,alt,acc,spd,hdg,tms);
                    mapinfo = document.querySelector('.mapinfo');
                    mapinfo.innerHTML = `
                        <p>纬度:${lat}</p>
                        <p>经度:${lng}</p>
                        <p>海拔:${alt}</p>
                        <p>精度:${acc}</p>
                        <p>速度:${spd}</p>
                        <p>方向:${hdg}</p>
                        <p>时间戳:${tms}</p>
                        支持
                    `;
                    // 携带信息
                    var xiedai = document.querySelector('.xiedai');
                    xiedai.innerHTML = `
                        携带信息:${code}
                    `;
                },function(err){
                    console.log(err); 
                },{
                    enableHighAccuracy: true, // 高精度
                    timeout: 5000, // 超时
                    maximumAge: 0 // 最大时间 
                })
        }else{
                mapinfo = document.querySelector('.mapinfo');
                    mapinfo.innerHTML = `
                        不支持
                    `;
                // 携带信息
                var xiedai = document.querySelector('.xiedai');
                    xiedai.innerHTML = `
                        携带信息:${code}
                    `;
        }
        // 返回
        var fanhui = document.querySelector('.fanhui');
        fanhui.onclick = function(){
            jWeixin.miniProgram.redirectTo({url: '/pages/home/index'})
        }
    </script>
</body>
</html>

HTTPS

协议说明:IOS 内核 浏览器 强制需要HTTPS安全协议支持、否则不通过。

浏览器兼容性

相关推荐
2501_915106329 分钟前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张16 分钟前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城5 小时前
【新版发布】标准版PHP v5.6.4正式版,优化部分用户体验
java·大数据·小程序·php·ux
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生1 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北1 天前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
2501_915918411 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_916008892 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview