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

浏览器兼容性

相关推荐
芭拉拉小魔仙31 分钟前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_797882091 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘2 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理4 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy092917 小时前
微信小程序 request 流式数据处理
微信小程序
人人题18 小时前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
weixin_4404705019 小时前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
276695829221 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir21 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app