不知道大家有没有这种经历一个功能单拎出来感觉都见过但真到自己动手做的时候总会被各种边角问题磨掉大半天的耐心。前阵子我们软件组内部做了一轮前端集中练习几个人分别领了不同的任务最后汇总到一起发现内容意外地互补有人用 Vue 做了当地天气获取有人用 mpvue 写了小程序有人给前端搭了基于 Koa 的轻量服务器还有人实现了图片点击标注圆点并记录坐标的功能。这篇总结就是把这几块内容放在一起讲讲每个功能背后的实现思路、遇到的坑以及为什么当时要做这样的技术选型。如果你是 Vue 生态的开发者或者正在纠结小程序、轻量服务端和 Canvas 交互这些方向这篇应该能给你一些参考。1. 一次前端实践的整体切片四个小功能背后其实是一条主线这次组内练习的起点很简单就是想验证团队在 Vue 技术栈上的复用能力。于是每个人领了一个相对独立的小任务最后拼起来看恰好覆盖了前端开发的几种常见形态Web 页面上的数据获取、小程序端的业务实现、前端自建接口层以及纯前端的图像交互。这四个点单个拿出来都不算大工程但在实际开发里每一个都能延伸出不少值得记录的细节。先说天气获取这个功能看起来就是调接口、渲染页面但真正做的时候会发现定位怎么处理、接口参数怎么拼、数据怎么清洗、页面在什么时机请求都是需要想清楚的。再说 mpvue 小程序它的本质是用 Vue 的写法去写小程序听起来很美好但小程序和 Web 的环境差异、生命周期差异、样式单位差异全部会在真机调试时暴露出来。然后是 Koa 服务器很多人会问前端项目为什么要自己搭服务器这个问题很关键因为它涉及到跨域、密钥保护、数据裁剪这些 Web 开发绕不开的话题。最后是图片标注圆点表面上是一个 Canvas 绘图问题实际上更多是坐标系换算和状态管理的组合拳。这条主线就是Vue 在前端不同场景下的落地实践。围绕这条主线这篇文章不会只给结论我会把每次实践中的思考过程、踩坑经过、以及最后怎么修正的尽量完整地还原出来。适合正在学习 Vue 的小白也适合写过几个项目但想补齐工程细节的人。2. Vue获取当地天气从定位到渲染的完整链路2.1 先解决当地二字定位信息的两种获取方式天气接口本身不复杂难的是获取当地天气里的当地两个字。第一次做的时候我直接在页面里写死了北京的经纬度跑通之后就放下了后来换到另一台电脑上测试才发现这个方案根本不算做完。浏览器端获取地理位置最直接的方法是 navigator.geolocation.getCurrentPosition。但这种方法有两个前提页面必须在 HTTPS 环境下运行而且用户需要点击授权弹窗。在本地开发环境localhost 默认是安全的可以直接测试。部署到线上之后如果服务器没有配置 HTTPS这个 API 会直接失效。实际代码如下function getPosition() { return new Promise((resolve, reject) { if (!navigator.geolocation) { reject(new Error(当前浏览器不支持定位)); return; } navigator.geolocation.getCurrentPosition( (position) { resolve({ latitude: position.coords.latitude, longitude: position.coords.longitude }); }, (error) { reject(error); }, { enableHighAccuracy: true, timeout: 5000 } ); }); }但是用户拒绝授权的情况非常常见所以我把手动输入城市作为兜底方案。页面顶部放一个输入框用户输入城市名走另一套接口逻辑。虽然多了一点代码量但至少不会因为定位失败让整个页面白屏。2.2 天气接口选型与请求参数组装天气数据来源我用的是常用的免费天气开放服务。这类接口通常支持两种请求方式按经纬度查询或者按城市名查询。推荐优先使用经纬度因为城市名可能存在重名问题定位拿到的是经纬度直接传给接口返回的数据就是当前坐标对应的天气信息。请求参数看起来不复杂无非是经纬度、请求密钥、返回格式这些。但从工程角度有几个点值得注意第一密钥不能直接写在 V