微信小程序开发

本文讲解讲解微信小程序开发的相关的内容。

这里假设我们已经通过微信开发者工具新建了项目。

获取用户地理位置

通过用户授权获取用户的地理位置信息，授权一次之后，下次不需要进行授权。

添加 wxml

代码语言：javascript复制

<!--pages/index/index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="view1" bindtap="getLocation">点击获取用户位置</view>
  <view>latitude: {{latitude}}</view>
  <view>longitude: {{longitude}}</view>
</scroll-view>

上面有方法 getLocation，点击 点击获取用户位置 按钮，获取用户当前的经纬度，并在页面上展示出来。

添加 js

代码语言：javascript复制

// pages/index/index.js

Component({
  data: {
    latitude: 0,
    longitude: 0
  },
  methods: {
    getLocation() {
      var that = this;
      wx.getLocation({
        type: 'gcj02',
        success (res) {
          const latitude = res.latitude
          const longitude = res.longitude
          that.setData({
            latitude: latitude,
            longitude: longitude
          })
        },
        fail: function (error) {
          wx.showModal({
            title: '授权提示',
            content: '需要获取您的地理位置信息，请打开设置页面手动授权。',
            showCancel: false,
            success: function (modalRes) {
              if (modalRes.confirm) {
                wx.openSetting({
                  success: function (settingRes) {
                    if (settingRes.authSetting['scope.userLocation']) {
                      console.log('用户已手动授权');
                    } else {
                      console.log('用户依然拒绝授权');
                    }
                  }
                });
              }
            }
          });
        }
       })
    }
  },
})

我们设置了对应的经纬度变量 - latitude 和 longitude。通过调用微信方法 wx.getLocation 来获取当前用户的经纬度信息。如果用户允许授权，则直接将获取到的经纬度进行赋值；如果用户拒绝授权，则来到 fail 的部分，我们调用弹窗方法 wx.showModal 对用户进行提示，跳转到用户手动授权地理位置的页面。如果用户依旧不进行授权，我们可以对用户的其他操作进行限制，比如，直接限制进入详情页面。

这里我们为了更加准确获到用户的地理位置信息，使用了 type: 'gcj02'。

当然，只是通过配置上面的内容信息，我们还不能获取到用户的地理位置信息。我们还得添加点配置信息。

添加配置信息

我们需要在 app.json 文件中，添加下面的配置信息：

代码语言：javascript复制

{
  # 其他内容
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "requiredPrivateInfos": ["getLocation"]
}