1) 准备工作
a) 依照注册流程完成注册,注册成功后将获取小程序AppID;前往微信公众平台扫码登录小程序后台,我们可以在菜单 「开发与服务-开发设置」或「账号头像-账号设置-基本设置-账号信息」 看到小程序的 AppID
请注意:小程序的 AppID 相当于小程序平台的一个身份证,后续会在很多地方要用到 AppID ,这里要区别于服务号或订阅号的 AppID
b) 绑定开发者:前往微信公众平台扫码登录小程序后台,在“管理-成员管理-添加成员”中绑定开发者,小程序后台成员权限说明详见小程序成员管理 | 微信开放社区;
i) 已认证未发布/未认证已发布小程序最多可绑定60个项目成员,60个体验成员;
ii) 已认证已发布的小程序最多可绑定90个项目成员,90个体验成员;
c) 安装开发工具:下载并安装微信开发者工具,用于开发和调试小程序。
2) 创建小程序项目
a) 在登录页,可以使用微信扫码登录开发者工具,开发者工具将使用这个微信账号的信息进行小程序的开发和调试。登录的微信号需要是该 AppID 的开发者;
b) 需要选择一个空目录,或者选择的非空目录下存在 app.json 或 project.config.json;当选择空目录时,可以选择是否在该目录下生成一个简单的项目;
c) 选择后端服务模式,微信云开发无需服务器,即可使用云函数、云数据库、云存储以及微信云托管等完整云功能;
d) 开发者工具提供非常丰富的模块,也可以选择一个模版来创建一个项目;
e)点击 "创建" 完成小程序项目创建;
3) 开发主界面:主要由菜单栏、工具栏、模拟器、目录树、编辑区、调试器 六大部分组成
a) 菜单栏:提供账号切换、帮助文档访问、工具调试、开发模式切换等功能,是进行全局操作的主要入口;
b) 工具栏:可进行快速切换账号、进入可视化编程模式、管理云开发资源、选择开发模式以及进行代码的上传和版本管理;
c) 模拟器:模拟小程序在微信客户端的表现,允许开发者在不同设备上测试小程序的适配性和功能;
d) 目录树:展示项目的文件结构,方便开发者浏览和导航至项目中的特定文件;
e) 编辑区:提供代码编写和编辑的空间,支持多种编程语言和文件格式;
4) 代码编辑
a) 编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作;
b) 目录树展示项目的文件结构,点击右键,选择新建 Page,将自动生成页面所需文件;
c) 开发界面上有不同格式的文件,分别对应不同的功能;目前微信小程序支持五种文件类型的编辑,包括wxml(页面结构)、wxss(页面样式)、js(脚本逻辑)、json(配置文件)和wxs(脚本逻辑,用于在wxml中直接运行脚本)。iOS下仅支持UTF8编码格式;
d) 工具提供自动保存功能,确保代码编辑状态不会因关闭工具或切换项目而丢失;
e) 如果设置中开启了 “文件保存时自动编译小程序”(设置-编辑设置-保存时自动编译小程序),当编译文件修改时,可以通过模拟器实时预览编辑的情况;
f) 提供完善的自动补全功能,支持js、wxml、json文件的快速编码,包括API补全、代码模板支持和实时提示;
g) 当小程序工程目录中存在Git仓库时,编辑器可展示Git状态,包括文件修改、新增、冲突、删除等信息;
5) 调试和预览
a) 在开发过程中,进行测试和调试,确保小程序的功能和用户体验符合预期;
b) 开发者可使用模拟器模拟小程序在微信客户端的表现,编译后的代码可在模拟器上运行,实时查看小程序的实际效果;
c) 模拟器支持模拟操作,如静音、返回聊天窗口等,帮助开发者测试小程序在不同条件下的表现;
d) 模拟器与可自定义编译结合使用,允许开发者通过快捷键Ctrl(⌘) + B编译代码,并在模拟器中自动刷新预览;
e) 工具同时提供功能丰富的调试工具,其主要分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace
详情参照小程序调试文档;
f) 根据调试得到结果,对小程序进行性能优化,如减少网络请求、优化代码逻辑、提高页面加载速度等,以提升小程序的性能和用户体验;
6) 完善小程序功能:
a) 根据需求,继续开发和完善小程序的其他页面和功能。
b) 可以使用微信小程序提供的API进行数据交互、网络请求、本地存储等操作。
c) 可以使用组件库和开源库来加速开发过程,如使用weui等UI组件库。
需要注意的是,以上是一个简要的微信小程序开发流程,具体的开发过程可能会因项目需求和复杂度而有所不同。在开发过程中可参考微信小程序官方文档 ,以获取更详细的指导和帮助
更多有关开发者工具指引和介绍,可参考官方文档:
如有疑问请参阅官方文档,或前往微信开放社区提问,我们会有专人为您解答。