曹虎 發表於 2024-12-20 18:48:00

uni-app微信小程序GPS位置获取爬坑

<h3 id="前情">前情</h3>
<p>uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,现在所在公司项目有抖音、快手、微信、支付、APP端,就是使用uni-app来开发的。</p>
<h3 id="坑位">坑位</h3>
<p>最近接手的项目是需要在下单前获取用户所有位置的GPS信息,再服务端会根据当前用户的GPS信息来判定是否给当前用户一定优惠。本以为就是调用一个API的事,但当你直接调用的时候你会发现根本无法使用。</p>
<h3 id="why">Why?</h3>
<p>位置信息属于用户隐私,从23年9月开始如果小程序需要获取位置信息需要去小程序管理后台:开发与服务-开发管理-接口设置-接口权限页申请地理位置api权限方才能使用。</p>
<h3 id="解决方案">解决方案</h3>
<p><strong>STEP 1:申请权限</strong></p>
<p>开发与服务-开发管理-接口设置-接口权限申请权限,这里又有一小坑,微信提供了二个获取位置的接口</p>
<ol>
<li><strong>wx.getLocation:获取当前的地理位置、速度,支持高精度定位</strong></li>
<li><strong>wx.getFuzzyLocation:获取当前的模糊地理位置</strong></li>
</ol>
<p>在申请地理位置获取api权限的时候,你需要填二项必填项,申请理由和场景说明,官方有提供申请成功的案例</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202412/685637-20241220184714490-966533139.png" alt="" loading="lazy"></p>
<p>我第一感觉是申请支持高精度定位的<strong>wx.getLocation</strong>,模精定位特有接口能做的支持高精度定位也一定能实现需求,于是我就申请了wx.getLocation接口,同时针对场景截了图提交了申请,一天后发现申请不通过,于是又完善了资料再次提交又碰壁了,二天二次申请都被打回,一脸蒙逼。</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202412/685637-20241220184722974-1723449856.png" alt="" loading="lazy"></p>
<p>搜了论坛都是说申请全被拒的,用模糊定位接口又不准,后面问了产品,我们只需要定位到市区级别行不行,产品说可以的,不用那么精确,于是转而申请wx.getFuzzyLocation,半小时时间未到就收到申请通过的短信提醒(怀疑是机审,走个过场,哈哈哈)</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202412/685637-20241220184728272-1986399420.png" alt="" loading="lazy"></p>
<p>所以在申请接口前要跟产品确认好对于gps位置的精度要求,如果模糊定位能实现那就不要去折腾申请高精度定位的接口了,微信对<strong>wx.getLocation</strong>接口管理的比较严格,如果你确实需要高精度接口,那你就按官方提供的参考申请案例补充资料再申请吧,但是从论坛里的抱怨来看申请可能不是那么容易,如果你要申请那就多费点心吧,在此祝好。</p>
<p><strong>STEP 2:填写接口权限配置</strong></p>
<p>申请接口了并不就是说你就能直接调用了,你需要去app.json里补全位置权限获取说明描述和对应的接口权限注明</p>
<pre><code class="language-json">"permission" : {
                "scope.userFuzzyLocation" : {
                        "desc" : "为了给用户提供更好的服务"
                }
        },
        "requiredPrivateInfos": ["getFuzzyLocation"]
</code></pre>
<p>如果你是使用uni-app的话,你直接用hbuilderx以源码视图方式打开manifest.json文件,找到mp-weixin微信项配置按如下配置好</p>
<p><img src="https://img2024.cnblogs.com/blog/685637/202412/685637-20241220184738742-547882560.png" alt="" loading="lazy"></p>
<p><strong>STEP 3:接口调用</strong></p>
<p>查了uni-app官方文挡都没有找到uni.getFuzzyLocation接口的说明,但是你在调用的时候是可以调用的,如果你实在不放心,可以直接使用wx.getFuzzyLocation接口。</p>
<p>接口调用注意事项:</p>
<p>你调用uni/wx.getFuzzyLocation的时候如果没有授过权会弹出授权的提示弹框,只有用户同意了才能获取地理位置信息,这里如果用户拒绝就无法再次唤起授权弹框,微信会记住授权状态,所以这里如果用户选了同意,那就万事大吉了,但是如果用户选择了拒绝,那后面就一直无法再获取用户位置信息了。</p>
<p>如果你获取用户的位置是可有可无的,你可以把位置信息当可选项,用户不同意你就不上传即可,但是如果你需求是位置信息是必需要的,那这里你需要做一些引导,引导用户去开启权限,对于引导你又要注意二种情况,一种是小程序位置授权没开启,另一种是微信APP位置权限没开启,下面是关键代码:</p>
<pre><code class="language-json">uni.getFuzzyLocation({
        type: 'gcj02',
        success(res){
                // 位置信息获取成功
                // ...
        },
        fail(err) {
                // 位置信息获取失败
                if (['getLocation:fail auth deny','getLocation:fail:auth denied','getLocation:fail:system permission denied'].includes(err.errMsg)) {
                        if (是否是需要强制获取位置信息的) {
                          //小程序位置信息获取被拒绝
                                if (['getLocation:fail auth deny','getLocation:fail:auth denied'].includes(err.errMsg)) {
                                        uni.showModal({
                                                content: "为了您享受到更好的优惠,请授权位置信息后下单",
                                                confirmText: '去授权',
                                                cancelText: '再想想',
                                                success(res) {
                                                        if (res.confirm) {
                                                                // 去小程序位置授权页
                                                                uni.openSetting();
                                                        } else if (res.cancel) {
                                                                console.log('小程序权授没有开启。微信用户点击取消');
                                                        }
                                                }
                                        })
                                }
                                // 微信位置信息获取权限没有打开
                                if (err.errMsg === 'getLocation:fail:system permission denied') {
                                        uni.showModal({
                                                content: "请确认是否已授权APP位置权限",
                                                confirmText: '知道了',
                                                showCancel: false,
                                                success(res) {
                                                        console.log('微信app权限没有开启', res);
                                                }
                                        })
                                }
                        }
                }
        }
})
</code></pre>
<p>注:查了微信官方文挡,并没有对应的错误提示说明,我是多次测试发现的上面的错误提示加入的判断,如果你有官方的错误提示说明文挡链接,欢迎分享出来,谢谢了。</p>
<h3 id="总结">总结</h3>
<p>使用微信的地理位置接口分三步</p>
<ol>
<li><strong>申请权限:</strong>按需选用wx.getFuzzyLocation(易申请)、wx.getLocation(较难申请)</li>
<li><strong>填写接口权限配置:</strong>原生小程序在app.json里配置,uniapp在manifest.json里配置</li>
<li><strong>接口调用:</strong>根据自己需求这里要对权限失败的场景做好引导</li>
</ol>


</div>
<div id="MySignature" role="contentinfo">
    好好学习!天天向上!<br><br>
来源:https://www.cnblogs.com/xwwin/p/18619824
頁: [1]
查看完整版本: uni-app微信小程序GPS位置获取爬坑