核心是通过逆地理编码将坐标转为城市名，因uni.getlocation仅返回经纬度，需调用高德或腾讯api完成定位→坐标转换→地址提取闭环，且须处理权限、异步、域名配置等细节。
直接在导航栏实时显示当前城市，核心不是“显示”，而是“怎么稳定拿到城市名”——uni.getLocation只返回经纬度，不返回城市；必须调用逆地理编码 API（如高德、腾讯）才能把坐标转成“北京市朝阳区”这类结构化地址。很多项目卡在这一步，不是代码写错，是没走完「定位 → 坐标转换 → 地址提取」闭环。
为什么 uni.getLocation 不能直接拿到城市名
uni.getLocation 返回的是原始坐标（latitude 和 longitude），属于 WGS84 或 GCJ-02 坐标系，本身不含行政区划语义。微信小程序、App、H5 各端返回字段一致，但都不带 city 字段。强行从 address 字符串里正则匹配“市”字，极不可靠（比如“鄂尔多斯市东胜区”会错判为“鄂尔多斯市”，而“上海市浦东新区”可能被截成“上海市”或“浦东新区”）。
必须依赖第三方地图 SDK 做逆地理编码：
- 高德：调用
https://restapi.amap.com/v3/geocode/regeo，传location=lng,lat，返回regeocode.addressComponent.city - 腾讯：调用
https://apis.map.qq.com/ws/geocoder/v1/，传location=lat,lng，返回result.ad_info.city - 注意坐标顺序：高德是
lng,lat，腾讯是lat,lng，顺序反了会解析失败
微信小程序里 city 显示延迟或为空的常见原因
用户一进首页就看到“定位中…”或空白，大概率是以下某个环节断了：
-
uni.getSetting检查权限后，用户点了“拒绝”，但代码没拦截，直接跳去调用逆地理编码，导致无坐标可传 - 逆地理请求发出去了，但没等响应就渲染了空
city；需用Promise链或async/await控制流程 - 高德 key 未在
manifest.json的mp-weixin下配置amap，或 key 绑定的域名没加servicewechat.com - 腾讯地图 SDK 实例没正确初始化（比如
qqMapWX实例挂载在data里但没赋值，或new QQMapWX时漏传key）
自定义导航栏中渲染 city 的最小可行代码结构
假设你已按规范设了 navigationStyle: "custom"，并在组件 data 中声明 city: "定位中..."：
async getCityByLocation() {
try {
const res = await uni.getLocation({ type: 'gcj02' });
// 高德逆地理（需提前在 manifest.json 配好 amap key）
const geoRes = await uni.request({
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
location: `${res.longitude},${res.latitude}`,
key: 'your-amap-key',
extensions: 'base'
}
});
const city = geoRes.data.regeocode.addressComponent.city || '未知城市';
this.city = city.replace(/市$/g, ''); // 去掉“XX市”末尾的“市”，留“北京”“杭州”
} catch (err) {
if (err.errMsg?.includes('getLocation:fail')) {
this.city = '定位失败';
}
}
}
关键点：
- 不要在
onLoad里直接调用，先uni.getSetting确认权限，再决定是否执行getCityByLocation - 微信小程序中，
uni.request必须在request合法域名白名单内，高德和腾讯都支持 HTTPS，但必须配置 - 如果用户快速切换页面，需在
onUnload清掉 pending 请求（可用AbortController或简单标记this.isPageAlive = false）
真正难的不是写几行代码，是让“城市名”在各种弱网、拒权、坐标偏移、API限流场景下，依然能 fallback 到合理文案（比如缓存上次成功结果、降级用 IP 归属地、或展示“附近城市”列表）。这些细节，往往上线后才暴露。
