账号及环境准备

注册一个小程序账号，主体类型可以选择个人。

搜索引擎搜索“微信公众平台”，到微信公众平台官网进行注册微信小程序账号。

这里就不详细展开注册步骤了，很简单的，根据提示操作就行，3分钟就能注册好一个小程序账号。

注意：建议使用全新的邮箱，没有注册过其他小程序或者公众号的邮箱。没有邮箱的话，先注册邮箱再回来注册小程序账号。

获取APPID

由于小程序项目必填项，以及后期会调用微信小程序的云开发接口等功能，需要获取小程序的 APPID 。所以在注册成功后， 可使用小程序账号登录至微信公众平台，然后获取APPID。

点击【开发管理】-【开发设置】，复制APPID。

下载并安装开发工具

在微信开放文档【开发】-【工具】-【下载】，根据自己的电脑系统，进行选择开发工具版本，然后下载，并进行安装；

一般建议选【稳定版】：

如果你的是Windows64，则选【Windows64】；

如果你的是Windows32，则选【Windows32】；

如果你的是mac，则选【macOS】；

开发者工具，即为小程序的开发以及运行环境，帮助开发者简单和高效地开发和调试微信小程序。

创建小程序

打开微信开发者工具，注意：第一次登录的时候，需要扫码登录。

新建小程序项目，点击小程序选择添加。

填写项目信息：项目名称、目录、APPID。

注意：后端服务选择“微信云开发”。

开发者工具

主界面

开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、目录树、编辑区、调试器 六大部分。

菜单栏

1）微信web开发者工具

2）项目

新建项目：快速新建项目

打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目

查看所有项目：新窗口打开启动页的项目列表页

关闭当前项目：关闭当前项目，回到启动页的项目列表页

3）文件

新建文件

保存

保存所有

关闭文件

4）编辑

5）工具

6）界面

7）设置

工具栏

1）用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。

2）工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览。

3）想要在手机上进行预览，那么先点击预览待生成二维码后，微信扫一扫即可进行访问预览效果。

4）工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。

5）工具栏右侧是开发辅助功能的区域，在这里可以上传代码、版本管理、查看项目详情。

模拟器

模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数。

基础库版本切换

开发者可以在此选择任意基础库版本，用于开发和调试旧版本兼容问题。

控制台

1）Console面板可查看打印输出或者报错信息。

2）Network面板可查看请求资源。其中cloud查看云开发请求资源。

3）AppData面板可查看页面数据。

初始化项目

创建小程序项目后，删掉多余文件。

在app.json修改相关配置项。

在app.wxss引入图标字体样式库等。

@import "/style/icon.wxss";