uniapp vue3 使用onMounted不生效

### 解决 UniApp Vue3 中 ECharts Tooltip Formatter 不生效 在 UniApp 使用 Vue3 和 ECharts 的过程中，如果遇到 `tooltip.formatter` 不生效的情况，通常是因为响应式数据处理不当造成的。具体来说，在 Vue3 中使用标准的 `ref` 或者 `reactive` 可能会影响 ECharts 实例的行为。 为了确保 `tooltip.formatter` 正常工作，建议采用如下方式： #### 方法一：使用浅层次响应式对象 通过 `shallowRef` 来创建用于保存 ECharts 实例的对象，而不是使用普通的 `ref` 或 `reactive` 函数[^1]。 ```javascript import { shallowRef, onMounted } from 'vue'; import * as echarts from 'echarts'; export default { setup() { const chartInstance = shallowRef(null); onMounted(() => { chartInstance.value = echarts.init(document.getElementById('main')); const option = { tooltip: { trigger: 'axis', formatter: function (params) { return params[0].name + '<br/>' + params[0].value; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Series Name', data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; chartInstance.value.setOption(option); }); return {}; } } ``` 这种方法可以有效避免由于深层次响应式带来的副作用，从而使得 `formatter` 功能能够按预期运行。 #### 方法二：直接操作 DOM 节点 另一种解决方案是在挂载阶段直接获取并初始化 ECharts 实例，而不依赖于任何 Vue 响应式的特性[^2]。 ```html <template> <view id="chart-container"></view> </template> <script> import * as echarts from 'echarts'; export default { mounted() { this.chart = echarts.init(this.$el.querySelector('#chart-container')); const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}' }, // ...其他配置项... }; this.chart.setOption(option); }, beforeDestroy() { if (!this.chart) return; this.chart.dispose(); } }; </script> ``` 这两种方法都可以有效地解决 `tooltip.formatter` 在 UniApp Vue3 环境下不生效的问题。选择哪种取决于具体的项目需求和个人偏好。

### 集成谷歌地图 API 到 UniApp Vue3 项目 #### 创建并配置 Google Maps API 密钥 为了能够在 UniApp 中使用谷歌地图服务，首先需要获取有效的 API Key。这一步骤涉及创建一个项目并在 Google Cloud Platform (GCP) 上启用必要的 API。 访问 GCP 控制台，创建新项目或选择已有项目，随后前往“API 和服务”下的“凭据”，点击“创建凭证”来获得浏览器密钥(API key)[^1]。确保启用了 **Maps JavaScript API**, **Geocoding API** 及其他可能需要用到的服务。 #### 修改 `manifest.json` 文件 为了让 HBuilderX 正确识别外部资源加载请求，在项目的根目录下找到 `manifest.json` 并编辑 `"app-plus"` 节点内的设置： ```json { "app-plus": { ... "distribute": { "webviewPlus": true, "permission": [ {"name":"android.permission.ACCESS_FINE_LOCATION"}, {"name":"android.permission.INTERNET"} ] } } } ``` 此操作允许应用程序访问互联网以及定位权限，这对于显示基于位置的地图数据至关重要[^2]。 #### 编辑 HTML 页面以引入 Google 地图脚本标签 由于 UniApp 是构建于 Web 技术之上，因此可以直接通过 `<template>` 标签内嵌入标准的 HTML 结构。对于每一个打算展示地图视图的页面来说，都需要在模板部分加入如下代码片段用于加载 Google 地图库： ```html <template> <div id="mapContainer"></div> </template> <script setup lang="ts"> import { onMounted } from 'vue'; onMounted(() => { const script = document.createElement('script'); script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.VUE_APP_GOOGLE_MAPS_API_KEY}&callback=initMap`; script.async = true; window.initMap = initMap; function initMap() { new google.maps.Map(document.getElementById("mapContainer"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } document.head.appendChild(script); }); </script> <style scoped> #mapContainer { height: 100vh; width: 100%; } </style> ``` 上述代码展示了如何动态添加来自 Google 的 JS 库到当前文档头部，并定义了一个简单的初始化函数 `initMap()` 来渲染基本的地图实例。注意这里假设环境变量中已经包含了有效值作为 API 键名传递给 URL 参数。 #### 设置 .env 文件中的 API KEY 最后但同样重要的是，应该把之前从 GCP 获取的实际 API Key 存储在一个安全的地方——即 `.env` 文件里。这样做不仅有助于保护敏感信息免受意外暴露的风险，同时也方便后续维护工作： ``` VUE_APP_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here ``` 完成以上步骤之后，重启开发服务器使更改生效即可看到集成后的效果。