这次出差，是我第一次真正意义上独立负责一个完整的小程序活动项目。

来之前，我以为只是换个地方写代码。来之后才发现，这一趟几乎把我之前“听说过但没做过”的技术点全踩了一遍——taro 框架、飞书小程序、相机调用、canvas 绘图、埋点上报、npm 发包、Git 冲突处理、小程序与 H5 通信……

这 9 个“第一次”，每一个都值得单独写一篇，但我想先把它们串在一起，记录这次出差的真实收获。如果你也正在经历类似的阶段，希望对你有所帮助。

一、跨端框架：初见 taro

第一次用 taro 框架，同时开发小程序和飞书小程序

来之前，我只写过普通的 React 项目，对“跨端框架”只有一个模糊的概念。这次项目用的是taro，一套代码可以同时编译到微信小程序和飞书小程序，还支持 React 和 Vue 两种语法。

印象最深的是：

• 开发体验和 React 很像，但有些组件和 API 需要适配不同平台

• taro 的编译流程帮开发者屏蔽了很多底层差异，但这也意味着当某个平台出现兼容性问题时，排查起来需要一定的经验

• 一套代码跑两端，确实省了不少工作量

一点感受：
跨端框架不是“银弹”，但对于业务型项目来说，它确实能大幅提高交付效率。

二、飞书小程序：陌生的开发工具

第一次使用飞书小程序开发者工具

微信开发者工具我用过，但飞书的是第一次接触。

两者的差异点：

• 飞书开发者工具的 UI 和调试方式和微信相似，但登录、权限、真机预览的流程略有不同

• 飞书小程序需要先在飞书开放平台创建应用，获取 App ID 才能本地调试

• 真机预览时，需要在飞书 App 内扫码打开，体验还算流畅

一点感受：
工具只是载体，理解了小程序运行机制，切换平台只是习惯问题。

三、调用相机与 canvas 绘图

第一次在节日活动中调用相机，并用 canvas 绘制海报

这是一个节日活动页面，用户拍照后可以生成一张带有活动元素和用户头像的海报，然后保存到相册。

技术要点：

• 调用相机拍照：wx.chooseImage获取图片临时路径

• 图片处理：用wx.getImageInfo获取图片信息，确保 canvas 能正常绘制

• canvas 绘制：背景图、用户头像、二维码、文字、装饰元素

• 保存到相册：wx.canvasToTempFilePath导出图片，再用wx.saveImageToPhotosAlbum保存

踩过的坑：

• canvas 绘制图片时需要确保图片已加载完成，否则绘制不显示

• 绘制二维码时需要先下载到本地，不能直接用网络图片

• 不同手机屏幕尺寸不同，绘制坐标需要做适配

一点感受：
canvas 在小程序里的使用方式和浏览器很像，但受限于小程序环境，很多细节需要额外处理。

四、埋点上报：终于知道它是什么了

第一次真正理解“埋点”的含义

以前总听同事说“埋点”，但一直没真正接触过。这次项目中需要统计用户行为数据，我才第一次认真了解埋点的作用。

埋点是什么：
在用户点击、页面曝光等关键节点，上报一条数据到服务端，用于分析用户行为、优化产品体验。

我做的埋点：

• 页面进入时上报：记录页面浏览量

• 按钮点击时上报：记录用户点击行为

• 活动分享时上报：记录分享次数

• 海报生成成功时上报：记录转化率

一点感受：
埋点不是“随便加一行代码”就完了，需要提前定义好事件名称、参数格式、上报时机。提前和产品、后端对齐规范，能省很多返工时间。

五、组件发布 npm：从“使用者”到“维护者”

第一次独立把组件抽离为 npm 包并发布

项目中有一个通用组件需要在多个页面使用，我把它抽成了独立依赖，发布到了 npm 上。

发布流程：

bash

# 1. 登录 npm npm login # 2. 更新版本号（package.json） # "version": "1.0.0" → "version": "1.0.1" # 3. 发布 npm publish

踩过的坑：

• 第一次发布时没有在项目中引入ui,导致在本地应用过后,样式消失

• 发布后想撤回需要 24 小时内用npm unpublish，且需要慎重

• 版本号规范：patch（bug修复）、minor（新功能）、major（破坏性更新）

一点感受：
发布 npm 包没有想象中复杂，但需要认真对待。它意味着你写的代码可能被其他人使用，需要有一定的质量意识。

六、小程序与 H5 通信

第一次搞懂小程序和 H5 是怎么“通话”的

项目中需要在小程序里嵌入 H5 页面，并且两者需要传递数据。

小程序跳转 H5：
使用webview组件，在 url 后面拼接参数就能传递数据

H5 跳转小程序：
使用微信 JS-SDK，调用wx.miniProgram.navigateTo可以实现页面跳转

通信方式：

• postMessage：H5 向小程序发送消息，但需要特定触发时机（如分享、返回）

• URL 参数传递：适用于页面打开时的初始数据

• 小程序向 H5 传递数据：通过重新加载 webview 的 src 实现

一点感受：
webview 通信有它的限制，不是“实时双向通道”，需要根据业务场景选择合适的通信方式。理解了两端的运行环境差异，才能写出更稳定的代码。

七、调试工具：开发效率的隐形帮手

第一次用微信开发者工具的地理定位模拟

活动页面需要根据用户位置展示不同内容，但办公电脑的位置是固定的，无法测试其他城市的展示效果。

在开发者工具的Sensor 面板里勾选“Enable”，输入经纬度就能模拟不同城市的定位，测试很方便。

具体位置：
调试器 → Sensor → 地理位置 → 启用 → 输入经纬度

常用城市坐标：

一点感受：
用好开发者工具的各种功能，能让调试效率大幅提升。除了定位模拟，还有 AppData 查看数据状态、Wxml 查看元素样式、Network 查看接口请求等。

八、样式调试

第一次在小程序里像浏览器一样查看样式

在小程序里调试样式，也可以像浏览器 devtools 一样操作：

• Wxml 面板里选中元素

• 右侧 Styles/Computed 里查看样式

• 可以在 Sources 里调试 JS 逻辑

• 在 AppData 里查看数据变化,也可以手动修改数据

一点感受：
开发者工具越来越成熟，小程序的调试体验已经很接近 Web 开发了。熟悉这些工具，能快速定位问题，不用“猜”代码。

写在最后

这 八 个“第一次”，每一个单独拿出来都不算什么大技术，但它们组合在一起，构成了一次实实在在的成长。

最大的变化不是“学会了什么技术”，而是“不再害怕遇到新东西了”。

• 遇到没做过的功能，知道怎么去查文档、拆步骤、逐步实现

• 遇到 Git 冲突，知道怎么分析、怎么处理、怎么避免

• 遇到新技术，知道它不是“需要全部学会才能用”，而是“边用边学就能推进”

这趟出差结束的时候，我回头看——项目上线了，功能跑通了，坑也踩完了。那种感觉很难描述，但我知道，我和出发前已经不一样了。

如果你也正在经历一个“全是第一次”的项目，祝你好运，也祝你收获满满。

附：这次出差使用的工具与技术