Glittering's blog Glittering's blog
Home
  • 学习手册

    • 《JavaScript教程》
    • 《TypeScript教程》
    • 《Git》
    • 《Vite》
    • 《Vue3》
    • 《React18》
    • 《CSS》
    • 《Tailwind CSS》
    • 《ES6 教程》
    • 《TypeScript 从零实现 axios》
  • 技术文档
  • 算法
  • 工作总结
  • 实用技巧
  • collect
About
  • Classification
  • Label
GitHub (opens new window)

Glitz Ma

前端开发工程师
Home
  • 学习手册

    • 《JavaScript教程》
    • 《TypeScript教程》
    • 《Git》
    • 《Vite》
    • 《Vue3》
    • 《React18》
    • 《CSS》
    • 《Tailwind CSS》
    • 《ES6 教程》
    • 《TypeScript 从零实现 axios》
  • 技术文档
  • 算法
  • 工作总结
  • 实用技巧
  • collect
About
  • Classification
  • Label
GitHub (opens new window)
  • 技术文档

  • 算法

  • 工作总结

    • 时区校正
    • 上传下载文件方式总结
    • web异常监控和分析
    • 前端优化指南
    • http缓存机制
    • 静态资源灰度发布
    • 浏览器原理及渲染机制
    • Chrome DevTools 渲染分析实战
    • Layout Thrashing(布局抖动)
    • Composite Layer(合成层)
    • 全局设置滚动条样式好吗?
    • 虚拟列表如何避免Layout和Paint
    • 前端安全知识
    • 安全(同源策略 / CSP / CORS)
    • 浏览器安全模型
    • 从chrome v8 讲安全
    • WebAssembly(Wasm)
    • XSS → JIT → 沙箱逃逸
    • 微前端总结
    • websocket聊天
    • axios 与 promise
    • react高级特性
    • react基础知识总结
    • vue2常见原理总结
    • vue2基础知识总结
    • webpack优化实践
    • webpack基础应用知识总结
    • 小程序笔记
      • 一、前期准备阶段(容易被低估,但很关键)
        • 1️⃣ 小程序账号 & 资质
        • 2️⃣ 技术选型(决定你未来的开发体验)
      • 二、项目初始化阶段
        • 3️⃣ 创建项目
        • 4️⃣ 目录结构设计(非常重要)
      • 三、核心开发阶段(重点)
        • 5️⃣ 页面 & 路由设计
        • 6️⃣ 数据通信 & 网络请求
        • 7️⃣ 状态管理
        • 8️⃣ 生命周期 & 页面栈
      • 四、性能 & 体验优化(上线前必做)
        • 9️⃣ 性能优化关键点
        • 🔟 权限 & 授权(非常容易被拒审)
      • 五、安全 & 合规(现在审核非常严)
        • 1️⃣1️⃣ 安全
        • 1️⃣2️⃣ 合规
      • 六、测试 & 发布阶段
        • 1️⃣3️⃣ 测试
        • 1️⃣4️⃣ 提交审核 & 发布
      • 七、上线后的长期注意事项
        • 1️⃣5️⃣ 运营 & 维护
      • 总结一句话
    • 小程序工程模板设计
    • 地图标绘--射线法来计算点在多边形内
  • 实用技巧

  • 收藏夹

  • 技术
  • 工作总结
mamingjuan
2017-12-25
目录

小程序笔记

# 一、前期准备阶段(容易被低估,但很关键)

# 1️⃣ 小程序账号 & 资质

关键节点

  • 注册微信公众平台小程序账号
  • 主体类型:个人 / 企业 / 政府 / 其他组织
  • 是否需要类目资质(电商、医疗、教育、内容等)

注意事项

  • ❗ 类目决定你能不能上线,不是后面补的

  • 个人主体限制多(支付、部分 API、推广)

  • 企业主体:

    • 微信支付
    • 订阅消息
    • 直播 / 广告
  • 名称一年只能改 2 次(慎重)


# 2️⃣ 技术选型(决定你未来的开发体验)

常见方案

类型 方案 适用场景
原生 原生小程序 轻量、性能优先
框架 Taro React / Vue 跨端
框架 uni-app Vue 体系
框架 mpvue(已衰退) ❌ 不推荐

注意事项

  • 原生 ≠ 慢,但维护成本高

  • 跨端框架:

    • 调试复杂
    • 有 API 差异坑
  • ❗不要为了“跨端”牺牲小程序体验


# 二、项目初始化阶段

# 3️⃣ 创建项目

关键节点

  • 微信开发者工具
  • 绑定 AppID
  • 选择是否启用云开发

注意事项

  • 云开发适合:

    • 快速 MVP
    • 小团队
  • 云开发不适合:

    • 高并发
    • 强业务逻辑
    • 私有部署

# 4️⃣ 目录结构设计(非常重要)

建议结构

/pages
  /home
  /detail
/components
  /NavBar
  /List
/services
  api.js
/store
  index.js
/utils
  request.js
  auth.js
1
2
3
4
5
6
7
8
9
10
11
12
13

注意事项

  • ❌ 不要把业务全写在 page 里
  • 组件化 = 性能 + 维护性
  • 提前规划「公共组件 / 业务组件」

# 三、核心开发阶段(重点)

# 5️⃣ 页面 & 路由设计

关键节点

  • app.json
  • 页面路径固定,不能动态注册

注意事项

  • 页面路径一旦上线,不要随便改
  • 页面数 > 100 会有性能和维护问题
  • tabBar 页面 = 常驻内存(谨慎)

# 6️⃣ 数据通信 & 网络请求

关键节点

  • wx.request
  • 后端接口
  • 登录态维护

注意事项

  • ❗ 微信请求不走浏览器 cookie
  • 登录流程:
wx.login → code → 后端换 openid / session_key
1
  • 一定要做:

    • token 过期处理
    • 幂等处理
  • 请求并发限制(默认 10)


# 7️⃣ 状态管理

常见方案

  • 页面 data
  • 全局 App.globalData
  • MobX / Redux(少见)
  • 自己封装 store

注意事项

  • 小程序 setData 是性能瓶颈

  • ❌ 大对象频繁 setData

  • 建议:

    • 页面局部状态
    • 全局只存必要信息(user / token)

# 8️⃣ 生命周期 & 页面栈

关键节点

  • App 生命周期
  • Page 生命周期
  • 页面栈最大 10 层

注意事项

  • onShow ≠ 页面重新加载
  • onHide 不是销毁
  • 页面返回可能不会触发 onLoad
  • ❗内存泄漏:定时器 / 监听未清理

# 四、性能 & 体验优化(上线前必做)

# 9️⃣ 性能优化关键点

重点方向

  • setData 频率
  • 图片加载
  • 包体积

注意事项

  • 主包 ≤ 2MB

  • 分包加载(非常重要)

  • 图片:

    • webp
    • CDN
  • 列表:

    • 虚拟列表
    • 节流 / 防抖

# 🔟 权限 & 授权(非常容易被拒审)

关键节点

  • 用户授权(头像、手机号、定位)

注意事项

  • ❌ 不能一进来就要授权
  • 必须「用时再要」
  • 授权弹窗要有明确用途说明
  • 手机号必须走微信官方能力

# 五、安全 & 合规(现在审核非常严)

# 1️⃣1️⃣ 安全

关键点

  • https
  • 接口签名
  • 防刷

注意事项

  • ❌ 不要把 secret 写前端
  • 不要相信前端传的任何参数
  • 支付一定走服务端

# 1️⃣2️⃣ 合规

重点

  • 隐私政策
  • 用户数据说明

注意事项

  • 必须有:

    • 隐私政策页面
    • 数据用途说明
  • 使用了:

    • 定位
    • 手机号
    • 相册 → 都要在隐私协议中体现

# 六、测试 & 发布阶段

# 1️⃣3️⃣ 测试

关键节点

  • 真机测试(低端机)
  • 不同微信版本
  • 网络异常

注意事项

  • 模拟器 ≠ 真机
  • iOS / Android 表现不同
  • 异常网络一定要兜底

# 1️⃣4️⃣ 提交审核 & 发布

关键节点

  • 体验版
  • 审核版
  • 正式发布

注意事项

  • 审核失败很常见,别慌

  • 常见拒审原因:

    • 诱导授权
    • 类目不符
    • 功能描述不清
  • 描述要写清楚核心功能


# 七、上线后的长期注意事项

# 1️⃣5️⃣ 运营 & 维护

重点

  • 数据埋点
  • 异常监控
  • 版本回滚

注意事项

  • 小程序 ≠ 一次性项目
  • 用户路径非常短
  • 首屏体验 > 所有功能

# 总结一句话

小程序开发难点不在写页面,而在「规则、性能、合规」


如果你愿意,我可以继续帮你:

  • 🧱 设计 小程序工程模板
  • 🧠 拆一个 真实项目的技术架构
  • 🚀 给你一份 上线前 Checklist
  • 🔥 结合 React / Vue 思维对照小程序开发

你现在是: 👉 准备立项 👉 已经在写 👉 快上线 / 被拒审过?

我可以按你当前阶段继续深挖。

#小程序
上次更新: 2026/01/09, 03:42:28
webpack基础应用知识总结
小程序工程模板设计

← webpack基础应用知识总结 小程序工程模板设计→

Copyright © 2015-2026 Glitz Ma
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式