这次出差是我第一次真正意义上独立负责一个完整的小程序活动项目。来之前我以为只是换个地方写代码。来之后才发现这一趟几乎把我之前“听说过但没做过”的技术点全踩了一遍——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且需要慎重版本号规范patchbug修复、minor新功能、major破坏性更新一点感受发布 npm 包没有想象中复杂但需要认真对待。它意味着你写的代码可能被其他人使用需要有一定的质量意识。六、小程序与 H5 通信第一次搞懂小程序和 H5 是怎么“通话”的项目中需要在小程序里嵌入 H5 页面并且两者需要传递数据。小程序跳转 H5使用webview组件在 url 后面拼接参数就能传递数据H5 跳转小程序使用微信 JS-SDK调用wx.miniProgram.navigateTo可以实现页面跳转通信方式postMessageH5 向小程序发送消息但需要特定触发时机如分享、返回URL 参数传递适用于页面打开时的初始数据小程序向 H5 传递数据通过重新加载 webview 的 src 实现一点感受webview 通信有它的限制不是“实时双向通道”需要根据业务场景选择合适的通信方式。理解了两端的运行环境差异才能写出更稳定的代码。七、调试工具开发效率的隐形帮手第一次用微信开发者工具的地理定位模拟活动页面需要根据用户位置展示不同内容但办公电脑的位置是固定的无法测试其他城市的展示效果。在开发者工具的Sensor 面板里勾选“Enable”输入经纬度就能模拟不同城市的定位测试很方便。具体位置调试器 → Sensor → 地理位置 → 启用 → 输入经纬度常用城市坐标城市纬度经度北京39.908823116.39747上海31.230416121.473701深圳22.543096114.057868一点感受用好开发者工具的各种功能能让调试效率大幅提升。除了定位模拟还有 AppData 查看数据状态、Wxml 查看元素样式、Network 查看接口请求等。八、样式调试第一次在小程序里像浏览器一样查看样式在小程序里调试样式也可以像浏览器 devtools 一样操作Wxml 面板里选中元素右侧 Styles/Computed 里查看样式可以在 Sources 里调试 JS 逻辑在 AppData 里查看数据变化,也可以手动修改数据一点感受开发者工具越来越成熟小程序的调试体验已经很接近 Web 开发了。熟悉这些工具能快速定位问题不用“猜”代码。写在最后这 八 个“第一次”每一个单独拿出来都不算什么大技术但它们组合在一起构成了一次实实在在的成长。最大的变化不是“学会了什么技术”而是“不再害怕遇到新东西了”。遇到没做过的功能知道怎么去查文档、拆步骤、逐步实现遇到 Git 冲突知道怎么分析、怎么处理、怎么避免遇到新技术知道它不是“需要全部学会才能用”而是“边用边学就能推进”这趟出差结束的时候我回头看——项目上线了功能跑通了坑也踩完了。那种感觉很难描述但我知道我和出发前已经不一样了。如果你也正在经历一个“全是第一次”的项目祝你好运也祝你收获满满。附这次出差使用的工具与技术类型技术/工具跨端框架taro小程序平台微信小程序、飞书小程序绘图canvas数据上报埋点日志包管理npm 发包版本控制Git、GitLab调试工具微信开发者工具、飞书开发者工具
 获取与实战)
