微信小程序 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安全协议支持、否则不通过。

浏览器兼容性

相关推荐
知识分享小能手19 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域19 小时前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_9160074721 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
流***陌1 天前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐1 天前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序
lingggggaaaa1 天前
小迪安全v2023学习笔记(九十讲)—— 小程序篇&反编译&外在&主包分包&配置泄露&算法逆向&未授权
笔记·学习·安全·web安全·网络安全·小程序
说私域1 天前
基于定制开发开源AI智能名片S2B2C商城小程序的文案信息传达策略研究
大数据·人工智能·小程序
计算机毕业设计小帅1 天前
【2026计算机毕业设计】基于Springboot的汉服交流的微信小程序
spring boot·微信小程序·课程设计
OEC小胖胖1 天前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
2501_915921431 天前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone