UniApp使用Vue3和TypeScript开发小程序获取用户城市定位

引言

在开发小程序时，经常需要获取用户的地理位置信息，其中城市定位是非常常见且重要的功能。UniApp 是一个基于 Vue.js 的全端开发框架，它提供了一套完整的小程序开发解决方案，同时支持使用 Vue 3 和 TypeScript 进行开发。本文将介绍如何使用 UniApp、Vue 3 和 TypeScript 开发小程序，并实现用户城市定位的功能。

准备工作

在开始之前，确保已安装以下工具和环境：

Node.js 和 NPM（官网下载安装）
Hbuid（运行 npm install -g @vue/cli hbuid 安装）
微信开发者工具（官网下载安装）

创建UniApp项目

打开命令行工具，进入项目文件夹，并执行以下命令初始化一个基于 Vue 3 和 TypeScript 的 UniApp 项目：

hbu init my-uniapp --template vue3-ts

cd my-uniapp

使用以下命令运行项目：

hbu dev:mp-weixin

打开微信开发者工具，选择「导入项目」，选择项目所在目录。
在微信开发者工具中预览项目，确保一切正常。

获取用户授权

在使用小程序获取用户的地理位置之前，需要先获得用户的授权。在页面的 onLoad 生命周期中，可以调用 uni.getSetting 方法检查用户是否已经授权地理位置信息。如果用户未授权，则调用 uni.authorize 方法请求授权：

export default {
  onLoad() {
    uni.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          uni.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用户已授权
              // 接下来获取用户地理位置
            },
            fail() {
              // 用户拒绝授权
            }
          })
        } else {
          // 用户已授权
          // 接下来获取用户地理位置
        }
      }
    })
  }
}

获取用户地理位置

获取用户授权后，可以使用 uni.getLocation 方法获取用户的地理位置：

export default {
  onLoad() {
    // ...

    uni.getLocation({
      type: 'gcj02',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        // 根据经纬度调用第三方地理位置API获取用户的城市信息
        // 示例代码：
        uni.request({
          url: 'https://api.example.com/getCity',
          data: {
            latitude,
            longitude
          },
          success(cityRes) {
            const city = cityRes.data.city
            // 将城市信息保存到 Vuex 中，便于全局使用
          }
        })
      }
    })
  }
}

在页面中使用城市信息

在获取到用户的城市信息后，可以将其保存到 Vuex 中，然后在页面中使用：

// store/index.ts
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      city: ''
    }
  },
  mutations: {
    setCity(state, city) {
      state.city = city
    }
  },
  actions: {
    setCity(context, city) {
      context.commit('setCity', city)
    }
  }
})

// components/Example.vue
<template>
  <view>
    <text>{{ $store.state.city }}</text>
  </view>
</template>

<script>
import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    onMounted(() => {
      store.dispatch('setCity', store.state.city)
    })
  }
}
</script>

结语

通过UniApp、Vue 3 和 TypeScript，我们可以方便地开发小程序，并实现获取用户城市定位的功能。UniApp 提供了丰富的 API，可以轻松处理用户授权和地理位置获取等操作。希望本文对你的小程序开发有所帮助，祝你在开发过程中取得成功！

本文来自极简博客，作者：微笑绽放，转载请注明原文链接：UniApp使用Vue3和TypeScript开发小程序获取用户城市定位