屏幕坐标转经纬度
概述用 uniapp 开发APP,版本 vue3,HBuildX 4.75map组件在 APP 平台(vue版)上,地图组件的点击事件无法直接返回经纬度。我们通过屏幕坐标和地图视野范围,计算出点击位置的经纬度。 核心思路将屏幕上的点击位置,按照比例映射到地图的地理坐标上。 实现步骤第一步:获取屏幕点击坐标当用户点击地图时,我们从触摸事件中获取点击位置在屏幕上的坐标: clickX:点击位置距离屏幕左边的像素距离 clickY:点击位置距离屏幕顶部的像素距离 第二步:转换为地图容器内的相对坐标地图组件在屏幕上有一个固定的位置和大小。我们需要计算点击位置相对于地图容器的坐标: 12相对X = 屏幕X - 地图容器左边距离相对Y = 屏幕Y - 地图容器顶部距离 第三步:计算比例将相对坐标转换为比例值(0 到 1 之间): ratioX = 相对X / 地图容器宽度(0 = 最左边,1 = 最右边) ratioY = 相对Y / 地图容器高度(0 = 最上边,1 = 最下边) 第四步:获取地图视野范围通过地图 API...
uniapp下各端调用三方地图导航
uniapp 调用第三方地图导航在 uniapp 中调用第三方地图导航,主要用 URL Scheme。 基本思路通过 plus.runtime.openURL() 打开地图应用的 URL Scheme,传入目标经纬度,应用会自动打开并导航。 常用地图的 URL Scheme高德地图 iOS: iosamap://path?dname=目的地&dlat=纬度&dlon=经度&dev=0&t=0 Android: androidamap://route?dname=目的地&dlat=纬度&dlon=经度&dev=0&t=0 百度地图 通用: baidumap://map/direction?destination=latlng:纬度,经度|name:目的地&mode=driving 腾讯地图 通用: qqmap://map/routeplan?type=drive&to=目的地&tocoord=纬度,经度 苹果地图(仅...
困扰我一周的问题!一套uniappx代码开发两个APP,却不能同时安装
魔鬼往往藏在细节中 简介由于两个应用基本相似,所以使用uniappX的一套代码,开发了两个应用A和B,但是在安装到手机时却报错。虽然是一套代码,但是有关的配置都以进行了修改,包括APPID、证书、包名等等。起初我尝试用不同的手机进行安装,结论都是不行。 oppo手机提示:”已安装了签名冲突的应用” 小米手机提示:”与己安装应用内容提供者冲突” 尝试报错后就开始从网上查找,按照网上教程尝试过许多办法,包括但不限于 修改开发账号,重新获取APPID 更换设备进行打包 离线打包,使用自己生成的证书 多次更换包名 尝试很多方法,都不行。 解决最终从小米手机的提示中获得灵感,“提供者冲突”。于是顺着这个思路开始查找,了解到安卓有android:authorities这么一个属性。但是我在uniappx配置中并未找到此配置。然后开始去搜索一些安卓有关的内容,发现安卓有一个 AndroidManifest.xml 文件,此文件是 Android 应用的“身份证”和“总说明书”。但是我并没有这个配置文件,于是我尝试全局搜索,在uni_modules中的worry-clipboard...
实现一个带S曲线的标签页切换效果
实现一个带S曲线的标签页切换效果最近做项目遇到一个设计稿,标签页要做成这种带曲线的效果,折腾了半天终于搞定了,记录一下。 效果说明就是那种选中的标签页会凸起来,边缘是S形曲线,看起来像是从背景里”挤”出来的感觉。 实现思路核心就是用多层背景 + 伪元素来模拟这个效果。 HTML结构12345<view class="tab-background"></view><view class="tab-active-bg" :class="activeTab === 'service' ? 'right' : 'left'"></view><view class="tab-no-active-bg-wrapper"> <view class="tab-no-active-bg" :class="activeTab ===...
vue优雅的路由设计
📋 完整流程概览1234561. 预处理:扫描所有Vue组件文件 (asyncModules.ts)2. 获取数据:从后端API获取路由配置 (getUserRoute)3. 数据转换:将后端数据转换为Vue Router格式 (formatAsyncRoutes)4. 组件映射:将字符串路径映射为实际组件 (transformComponentView)5. 路由处理:多级路由扁平化处理 (flatMultiLevelRoutes)6. 动态挂载:将路由添加到Vue Router实例 (router.addRoute) 🔧 第一步:组件预处理 (asyncModules.ts)123456// src/router/asyncModules.tstype ImportVueFileType = typeof import('*.vue')type ImportVueFileFnType = () => Promise<ImportVueFileType>// 🔍 使用 Vite 的 import.meta.glob 扫描所有...
vue动态路由
Vue3动态路由核心实现1. 动态导入组件使用 import.meta.glob 批量导入组件: 123456789101112131415161718// utils/loadComponent.jsconst modules = import.meta.glob('../views/modules/**/index.vue')export function loadComponent(componentPath) { // Layout组件 if (componentPath === 'Layout') { return () => import('@/views/layout/index.vue') } // 动态组件 const component = modules[`../views/modules${componentPath}/index.vue`] if (component) { return...
微信小程序打包
编程中的分包概念分包(Package Splitting/Code Splitting)是现代软件开发中的一种重要优化技术,主要目的是将大型应用程序拆分成更小、更易管理的模块或包。 分包的核心优势性能优化:通过将代码分割成多个包,可以实现按需加载,减少初始加载时间。用户只需要下载当前需要的代码,而不是整个应用程序。 缓存效率:当应用更新时,只有修改过的包需要重新下载,未修改的包可以继续使用缓存版本,提高加载速度。 并行加载:多个包可以同时下载,充分利用网络带宽,缩短总体加载时间。 代码组织:将功能相关的代码组织在一起,提高代码的可维护性和可读性。 微信小程序分包详解微信小程序的分包是一个特别重要的功能,因为小程序有严格的体积限制。 基本概念微信小程序分包将小程序划分为主包和若干个分包: 主包:包含默认启动页面和公共资源 分包:根据功能模块划分的独立包 体积限制 整个小程序所有分包大小不超过 20MB 单个分包/主包大小不超过 2MB 主包通常建议控制在 1MB 以内 分包配置在 app.json...
如何完全卸载Java
这两天在运行一个Java项目,由于之前安装的Java版本太低,导致项目无法运行,于是决定卸载Java,重新安装一个高版本的Java。下载完JDK后,发现双击安装包打不开,判断可能是之前的没卸载干净,尝试多种网络上的方法,如控制面板卸载(报错)、删除安装目录、删除环境变量等,最终发现了这样一个方法,可以彻底卸载Java。 关键工具:微软故障排除程序 下载地址:微软故障排除程序 使用故障排除程序卸载Java打开故障排除程序,点击下一步,选择卸载 等待检测完成后,选择Java,点击下一步 等待卸载完成即可


