微信小程序进阶1

最新推荐文章于 2023-10-02 10:44:28 发布

原创最新推荐文章于 2023-10-02 10:44:28 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信 #javascript

本文详细介绍了如何在微信小程序中实现获取用户位置的功能。首先，在WXML中设置按钮触发事件；然后，在JS文件中封装函数，先检查用户授权状态，如未授权则引导用户设置；最后，调用微信提供的getLocation API获取用户位置信息。记得在app.json中配置权限描述。

在模仿的基础上，开始自己动手写代码

不清楚代码的位置

以获取用户位置，调用微信提供的api为例，以下是一个完整的流程。

1.wxml

<view>
<!--如果用户不进行位置授权，进行点击的时候，会跳到设置界面，知道用户同意授权，才可以继续下一步操作-->
  <view class="one" bindtap='getCurrentLocal'>获取当前位置</view>
</view>

2.js

const app = getApp()
Page({
  
// 获取当前地理位置 授权验证
getCurrentLocal(){
const _self= this;
  wx.getSetting({
    success(res) {
      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
        wx.openSetting({
          success(res) {}
        })
      }  else { // 第一次授权，或者已授权，直接调用相关api
        _self.getMyLocation()
      }
    }
  })
},
// 获取当前地理位置
getMyLocation(){
  const _self = this
  //获取用户的当前位置
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      console.log(res)
    }
  })
},

})

3.app.json
记得加上

 "permission":{
    "scope.userLocation":{
      "desc":"您的位置信息将用于小程序位置接口的效果展示"
    }
}

总结

1.建立在对小程序项目的各个文件较为了解；
2.调用微信小程序的api时，不能直接调用，需要把他封装在一个函数里。