企业官网建设流程全解析

基于图片工具小程序的原生开发流程实践

本文基于当前项目（图片工具集）梳理一套可复用的微信小程序开发流程：从项目初始化、页面结构、功能实现到性能与代码质量优化。项目采用原生小程序框架，所有图片处理均在客户端完成，不依赖第三方框架或额外库。

目标与约束

• 目标：提供格式转换、裁剪、改尺寸、压缩、文字水印等高频图片处理能力。
• 约束：纯原生小程序、无第三方依赖、本地处理、界面简洁直观。

项目结构

. ├── app.js ├── app.json ├── app.wxss ├── assets/ │ └── icons/ # 统一风格图标（SVG + data URI） ├── pages/ │ ├── index/ # 首页 │ ├── format/ # 格式转换 │ ├── crop/ # 图片裁剪 │ ├── resize/ # 改尺寸 │ ├── compress/ # 图片压缩 │ └── watermark/ # 文字水印 └── scripts/ └── gen_icons.py # 图标生成脚本

界面截图

主页面如下：

功能页-格式转换页：

功能页-图片裁剪页：

功能页-图片改尺寸页：

功能页-图片压缩页：

功能页-图片文字水印页：

开发流程（从 0 到可用）

1. 初始化与全局配置

核心目标是让各页面可快速迭代，并在性能上符合“工具类”体验。

app.json关键点：

• navigationStyle: "custom"用于自定义页面头部视觉。
• lazyCodeLoading: "requiredComponents"开启组件按需注入。
• permission.scope.writePhotosAlbum用于保存到相册。

{"pages":["pages/index/index","pages/format/index","pages/crop/index","pages/resize/index","pages/watermark/index","pages/compress/index"],"window":{"backgroundColor":"#f6f7fb","backgroundTextStyle":"light","navigationStyle":"custom"},"permission":{"scope.writePhotosAlbum":{"desc":"用于保存处理后的图片到相册"}},"lazyCodeLoading":"requiredComponents"}

2. 首页布局与功能入口

首页只做“导航与心智建立”，所有功能卡片均跳转至独立页面，降低首屏复杂度。

特点：

• 大面积功能卡片，提高可点击区域。
• 入口设计与功能页一致的视觉语言。

3. 功能页开发范式

每个功能页遵循一致结构：

• 顶部返回导航
• 预览区域
• 操作区
• 主按钮（保存/转换）

这样做的好处是可复制与统一体验，后续添加新功能只需套同样的结构。

图片处理实现要点

1. 格式转换

• 使用canvasToTempFilePath输出目标格式。
• WebP 在部分机型存在兼容差异，采用“先尝试 WebP，失败回退 JPG”的策略。

2. 裁剪

• 使用movable-view实现裁剪框拖动与角点缩放。
• 保存时严格夹紧裁剪区坐标，避免取到图像外区域导致灰底。
• 使用wx.getImageInfo的path作为绘制源，确保可绘制。

3. 改尺寸

• 宽高输入，支持锁定比例。
• canvas 绘制后输出目标尺寸。
• 同样使用getImageInfo.path作为绘制源，避免只输出背景色。

4. 压缩

• 通过canvasToTempFilePath的quality控制压缩质量。
• 选图后立即生成预览压缩结果，动态展示压缩后大小与节省空间。

5. 文字水印

• 支持文字内容、透明度、颜色、角度、位置。
• 通过ctx.rotate实现水印角度。
• 预览与导出使用一致参数，保证所见即所得。

统一图标方案

为了统一视觉风格，项目使用脚本生成 SVG 图标并输出 data URI：

• 脚本：scripts/gen_icons.py
• 产物：assets/icons/*.svg与assets/icons/index.js
• 使用方式：在页面 JS 中require("../../assets/icons/index")引用。

这样可以：

• 保持图标风格一致
• 避免外部资源依赖
• 便于后续批量替换颜色与线条粗细

质量与性能优化

根据开发者工具扫描提示处理：

• JS 压缩：project.config.json/project.private.config.json设置minified: true
• 组件按需注入：app.json设置lazyCodeLoading: "requiredComponents"

权限与数据安全

保存图片需相册权限：

• scope.writePhotosAlbum：仅用于保存处理后的图片。
  所有处理均在本地完成，不上传服务器，符合工具类隐私预期。

可复用的开发节奏

1. 搭建全局结构与页面路由
2. 先完成 UI 与交互骨架
3. 再补齐图片处理逻辑
4. 最后统一图标与性能优化

这套流程可适用于绝大多数“工具类小程序”的快速开发与迭代。

总结

原生小程序在图片处理场景下依然高效可靠。通过清晰的功能拆分、统一的页面结构与本地化处理策略，可以快速交付稳定且体验一致的工具类产品。

如需获取完整源码，可在微信公众号码海寻道后台回复“图片处理源码”。