1. 微信小程序账号注册
小程序开发不同于网页开发,在开始微信小程序开发之前,需要先访问微信公众平台,注册一个微信小程序账号。
拥有小程序账号后我们才可以开发和管理小程序,后期可以通过账号设置开发信息、添加成员,也可以通过账号查看、操作小程序相关数据。
防范措施:
在申请账户之前我们需要准备一个邮箱地址,这需要:
1️⃣未注册微信公众平台❗
2️⃣未注册微信开放平台❗
3️⃣ 不绑定个人微信账号!若已绑定,需解除绑定或使用其他邮箱地址❗
1.1打开微信公众平台,点击立即注册
1.2选择注册的账号类型,这里需要选择小程序
1.3 输入账户及其他注册信息
1.4 邮箱激活,需要输入邮箱进行激活
1.5 信息登记、登记类型(需选择中国大陆及个人,其他企业类型需资质认证)
1.6 注册并确认受试者信息
注意:
在进行管理员身份认证时,建议使用自己的微信扫码。
将自己设置为小程序账号管理员,方便日后进行小程序开发、会员等相关设置
1.7 小程序注册完成后,点击进入小程序,进入小程序后台
1.8 完善小程序账号信息
完成小程序账号注册后,就可以打开微信公众平台对小程序账号进行一些设置了。这是开发前的准备工作,完成之后才能进行后续的开发步骤。因为小程序账号信息是小程序提交审核时的必填项,所以注册小程序后,需要补充小程序的基本信息,比如名称、图标、描述等。
防范措施:
在填写小程序类别时一定要谨慎选择游戏类型,否则微信官方会将其视为小游戏开发。
点击填写小程序基本信息。
点击进入设置,设置小程序分类信息
1.8.1 点击右上角添加类别
1.8.2 管理员授权
1.8.3 手机微信认证
1.8.4 添加小程序分类
1.9 小程序开发者ID
小程序开发者账号是免费的,只要开发者满足开发资质,即可免费注册并获得相应的开发者ID。
一个完整的开发者ID由小程序ID()和小程序Key()组成。
小程序ID是小程序在整个微信帐号体系中的唯一身份凭证,后续很多地方都会用到,比如新建小程序项目、真机调试、发布小程序等都需要用到小程序ID。
小程序密钥是开发者对小程序所有权的证明,在登录微信、微信支付、发送消息等高级操作时需要用到。
在微信公众后台,点击左侧开发标签,选择“开发管理”,在新页面点击“开发设置”,可以看到开发者ID信息。请妥善保存你的小程序ID和小程序Key,后续开发中会经常用到,获取位置见下图:
1.10 发展会员与经验会员
小程序提供两种不同的会员角色:项目会员、体验会员
项目成员:参与小程序开发运营,可登录小程序管理后台的成员,包括运营人员、开发者、数据分析师等。管理员可以在“成员管理”中添加、删除项目成员,并设置项目成员的角色。
试用成员:参与小程序内测的成员,可以使用小程序试用版,但不属于项目成员,管理员和项目成员都可以添加、删除试用成员。
2.微信开发者工具
为了帮助开发者简单、高效地开发和调试微信小程序,微信官方提供了微信开发者工具,可以通过该工具轻松开发小程序、查看和编辑代码、预览、发布等。
在微信开发者工具下载页面,可以看到微信开发者工具包含三个版本:
稳定版本:稳定性较高,开发时一般建议使用稳定版本
预发布版本:相当稳定,通常包含新功能和主要功能,并且已通过内部测试
开发版本:稳定性较差,主要用于尽快修复缺陷,快速推出小功能。如果想体验新功能,可以使用此版本
选择合适的版本下载,下载完成后双击下载的微信开发者工具安装包,根据提示点击下一步、我接受,直至安装完成。首次使用微信开发者工具时,需要使用手机微信扫描二维码登录,登录成功后即可进入项目选择界面
防范措施:
微信开发者工具必须在线使用❗
3. 创建小程序项目
创建项目
使用小程序开发者工具创建一个新项目,步骤如下:
3.1 打开微信开发者工具,选择左侧的小程序,点击+号,新建项目
3.2 在弹出的新页面中填写项目信息
3.3 点击确定,如果能够看到小程序开发主界面,则表示小程序项目创建成功。

4.小程序目录结构及文件介绍
创建完小程序项目后,我们首先来熟悉一下小程序项目的目录结构,如下图:
一个完整的小程序项目分为两个部分:主文件和页面文件
主文件又称为小程序全局文件,顾名思义全局文件可以作用于整个小程序,影响小程序的每一个页面。主文件必须放在项目的根目录下,主要由三部分组成:
文件名是必需的吗?
应用程序.js
小程序入口文件
必须
应用程序.json
小程序全局配置
必须
应用程序.wxss
小程序的全局样式
不必要
页面文件是每个页面都需要的文件,小程序的页面文件存放在目录中,每个页面一个文件夹,每个页面通常由四个文件组成,每个文件只对当前页面有效:
文件名是必需的吗?
.js
页面逻辑
必须
.wxml
页面结构
必须
.wxss
页面样式
不必要
.json
页面配置
不必要
防范措施:
页面文件、wxss、json文件可以覆盖主文件中的样式和配置
强烈建议:页面文件夹名和页面文件名保持一致
新增小程序文件及文件夹功能列表:
═─ ➡ 小程序页面存放目录
│
│ ═─ ➡文件夹代表页面所需的文件
│ │ .js ➡ 页面逻辑
│ │ .json ➡ 页面配置
│ │ .wxml ➡ 页面结构
│ │ .wxss ➡ 页面样式
│ ..js➡配置文件
│ app.js ➡小程序入口,即打开小程序首页时执行的项目
│ app.json ➡ 小程序全局配置
│ app.wxss ➡ 小程序全局样式
│ ..json ➡小程序开发者工具配置(项目公共配置文件)
│ ...json ➡项目私有配置文件(此文件需要添加到.file中)
│ .json ➡小程序搜索优化(小程序上线后可以在此文件配置哪些页面可以直接检索)
.json 文件:
.json 文件:
5. 如何调试小程序
在开发项目时,调试是不可避免的。那么如何调试小程序呢?
防范措施:
微信开发者工具缓存很严重❗❗❗❗❗
如果发现代码和你预期不一样,请先点击“编译”❗
如果编译后还是没有达到预期的效果,就需要清除缓存❗甚至重启项目
6. 如何创建新页面
第一种方式:
右键点击目录新建文件夹,输入页面目录名称,例如:list
右键点击列表目录,输入页面文件的名称,例如:list
防范措施:
输入页面文件名时,请勿输入后缀❗
新页面创建成功后,页面路径会添加到app.json中的中
第二种方式:
在app.json选项中,只需添加页面路径
添加新的页面目录后,该目录下会自动生成页面文件
7. 调试基本库
小程序调试基础库是指微信开发者工具中可以选择的微信基础库版本。
微信基础库是指小程序的运行环境,为小程序提供了运行所需的各种API和工具,以及基础框架和运行逻辑。
小程序开发者可以在微信开发者工具中选择所需的微信基础库版本作为运行和调试小程序时的运行环境。
每个小程序对其允许使用的基础库都有最低版本要求,开发者需要选择自己想要兼容的基础库版本,以保证小程序功能正常运行。