微信小程序开发基本流程
第一阶段:注册与配置 (官方准备)
1. 注册微信小程序账号:
◦ 访问 微信公众平台 (mp.weixin.qq.com)。
◦ 选择“小程序”类型进行注册。
◦ 使用一个未注册过公众号/开放平台/企业微信/未被微信号绑定的邮箱。
◦ 完成管理员身份认证(需使用已绑定银行卡的微信扫码)。
◦ 重要:填写主体信息 (个人、企业、政府等)。主体类型决定小程序的功能权限,例如个人主体的小程序无法开通微信支付。
◦ 验证主体信息(个人需身份认证,企业需打款验证或企业微信认证等)。
◦ 设置小程序的基本信息:名称 (需审核)、头像、介绍、服务类目 (需审核) 等。
2. 获取开发信息与配置:
◦ 登录微信公众平台,进入小程序管理后台。
◦ 获取 AppID: 在 “设置” -> “基本设置” 中找到小程序的 AppID(项目创建和真机调试必需)。
◦ 配置服务器域名: 在 “开发” -> “开发管理” -> “开发设置” 中配置 request 合法域名、socket 合法域名、uploadFile 合法域名、downloadFile 合法域名 (必须使用 HTTPS)。这是小程序访问后端API服务的必备设置。
◦ (可选) 开通其他服务: 如微信支付、卡券、附近小程序等,按需申请并设置。
第二阶段:本地开发与调试
3. 安装开发工具:
◦ 下载并安装官方 微信开发者工具。这是开发和调试小程序的核心工具。
4. 创建项目:
◦ 打开开发者工具,选择“小程序”项目类型。
◦ 填写项目名称、选择项目目录。
◦ 填入之前获取的 AppID。
◦ 选择项目模板(如不使用云开发,可先选“不使用云服务”)。
5. 代码开发:
◦ 项目结构: 小程序包含几个核心文件类型:
▪ .json (配置文件):如全局配置 app.json (页面路径、窗口样式、网络超时等),页面配置 page.json。
▪ .wxml (结构文件):类似 HTML,用于构建页面结构,使用小程序定义的组件(如 <view>, <text>, <image>, <button> 等)。
▪ .wxss (样式文件):类似 CSS(增强版),用于设置样式,支持 rpx 适配不同屏幕。
▪ .js (逻辑文件):编写页面生命周期函数、数据处理、事件响应、API调用等 JavaScript 代码。app.js 定义全局逻辑。
◦ 页面构成: 一个完整的小程序页面通常由同名(后缀不同)的 .js, .wxml, .wxss, .json 四个文件组成(json可选)。
◦ 开发流程:
▪ 在开发者工具中编辑代码文件。
▪ 编写页面结构与样式。
▪ 编写业务逻辑和交互功能。
▪ 调用微信小程序提供的丰富 API(如网络请求、数据缓存、位置、设备信息等)。
▪ 管理页面路由 (wx.navigateTo, wx.redirectTo 等)。
6. 实时预览与调试:
◦ 开发者工具提供 模拟器,可以实时查看页面效果并进行基本调试。
◦ 使用工具提供的 真机预览 功能,通过扫描二维码在管理员自己的微信上预览调试(真机环境更真实)。
◦ 使用 真机调试 功能(需要连接数据线),可在手机上实时查看 Console、Network、Storage 等信息,进行深度调试。
◦ 使用 控制台 (Console)、调试器 (Sources)、网络 (Network) 等开发者面板 进行错误排查和性能优化。
第三阶段:测试与提交审核
7. 内部测试:
◦ 使用 体验版:在开发者工具中点击“上传”,生成一个开发版本(上传到微信平台)。
◦ 在微信公众平台后台,将开发版本设置为 体验版。
◦ 添加 体验成员(最多40人)。体验成员通过公众平台提供的链接或二维码安装体验版小程序进行测试。
◦ 充分进行功能测试、兼容性测试(不同机型、微信版本)、性能测试。
8. 提交审核:
◦ 测试通过后,在开发者工具中点击“上传”,确保上传的是最终待审核的版本。
◦ 登录微信公众平台,进入 “管理” -> “版本管理”。
◦ 在“开发版本”列表中找到刚刚上传的版本,点击“提交审核”。
◦ 填写审核信息:
▪ 描述本次更新的内容或修复的问题。
▪ 必须: 提供有效的测试账号和密码(如果需要登录),供审核人员测试核心功能。
▪ 可能需要提供其他额外资料(如类目资质证明)。
▪ 确认信息无误后,提交审核申请。
第四阶段:发布上线与运营
9. 发布上线:
◦ 等待微信官方审核(通常需要几小时到几天)。
◦ 审核通过后,在微信公众平台后台的“版本管理” -> “审核版本”中,点击“发布”按钮。
◦ 确认发布后,该版本将覆盖所有线上用户的小程序(用户需要重启微信或手动更新小程序)。
10. 后期维护与迭代:
◦ 监控线上小程序的运行状况(公众平台提供基础数据分析)。
◦ 收集用户反馈。
◦ 修复线上发现的Bug。
◦ 开发新功能或优化。
◦ 重复 第5步(开发) -> 第8步(提交审核)-> 第9步(发布) 的流程,进行版本迭代更新。
这个流程涵盖了从零开始到上线运营的核心步骤。实际开发中,步骤 5(代码开发)是最复杂和耗时最长的环节,需要不断调试和优化。