vue3+ts+uniapp 微信小程序（第一篇）—— 微信小程序定位授权，位置信息权限授权

---

简介

开发工具：VsCode
技术栈：vue3 + Ts + uni-app
简介：图文结合，十分钟带你搞定微信小程序如何授权定位
注意：最核心的代码在步骤四

---

一、先看效果

1.1 授权定位前，先弹出隐私协议弹框

1.2 上述弹框点击同意，得到如下弹框

1.3 点击三个点，然后点设置

1.4 在1.2步骤下，无论同意或者拒绝

注：uni.openSetting 即可引导用户跳转此页面，详情参考官方文档

二、manifest.json 文件配置

找到项目中的 manifest.json 文件，在 mp-weixin 中配置如下代码
注 ：若是 unibest 项目，则在 manifest.ts 文件中进行配置

  "mp-weixin": {// ... 其他代码"requiredPrivateInfos": ["getLocation"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"},}// ... 其他代码},

三、微信公众平台配置

微信公众平台官网：https://mp.weixin.qq.com/

3.1 登录进入微信公众平台，点击账号设置

3.2 去完善隐私协议

3.3 填写需要的用户权限

3.4 提交审核

四、代码实现

4.1 通过代码调起隐私协议和定位授权

进入系统，调用过此代码之后，即可获得1.4步骤的页面

/*** 点击授权定位*/
const handleLocation = () => {uni.getLocation({success: function (res) {console.log('res', res)},fail: function (res) {console.log('res', res)},})
}

4.2 使用位置信息处逻辑

注：我用的 message.comfirm 是 wot design ui 的组件。你们可用 uni.showModal去代替

uni.getSetting({success: function (res) {const statue = res.authSettingif (!statue['scope.userLocation']) {// 若未授权摄像头message.confirm({msg: '请授权小程序位置信息权限，以便XXXXX',title: '温馨提示',confirmButtonText: '授权',cancelButtonText: '取消',}).then(() => {// 点击确认，开始判断位置服务权限信息uni.openSetting({success: function (data) {if (data.authSetting['scope.userLocation']) {toast.success('授权成功')resolve(data)} else {toast.warning('授权失败')reject(error)}},fail(e) {reject(e)},})}).catch(() => {console.log('点击了取消按钮')})} else {// 若已授权console.log('存在权限')resolve(res)}},fail: function (res) {reject(res)toast.error('调用授权窗口失败')},
})