2.1 创建第一个微信小程序
本节使用微信web开发者工具创建第一个微信小程序。
2.1.1 新建项目
双击微信web开发者工具图标，管理员或开发者使用微信扫描二维码后进入菜单界面。然后单击菜单中的“小程序项目”选项，进入小程序项目管理页面，如图2-1所示。
视频讲解
图2-1 新建小程序项目
此时，开发者依次填写项目目录、AppID和项目名称就可以新建一个小程序项目了。填写的注意事项如下。
• 项目目录：项目文件存放的路径地址，可以单击输入框右侧的箭头按钮在计算机盘符中选择指定的目录地址。
• AppID：管理员在微信公众平台上注册的小程序ID。
• 项目名称：由开发者自定义一个项目名称，该名称不会影响小程序被用户看到的名字。
小程序的AppID可以登录微信公众平台（https://mp.weixin.qq.com）查看，具体查看方法是单击左侧的“设置”选项，在“开发设置”面板中查看“开发者ID”标题下方的AppID（小程序ID），如图2-2所示。
图2-2 查看小程序ID
将查看到的小程序ID复制并粘贴到图2-1（b）所示的AppID输入框中，填完以后的效果如图2-3所示。
图2-3 小程序项目填写效果示意图
AppID必须填实际的小程序ID，否则部分功能将无法使用。如果开发者暂时条件受限无法注册申请小程序ID，可以选择AppID输入框下方的体验小程序，此时也可以在开发者工具中进行开发，但无法真机预览。
如果项目目录选择的是一个空白文件夹，则开发者工具会默认勾选“建立普通快速启动模板”，该选项会自动生成代码形成一个简单的小程序效果供初学者入门学习。
填写完毕后单击“确定”按钮完成操作，跳转到开发页面，如图2-4所示。
图2-4 小程序项目开发页面
该图中左边就是手机预览效果图，可见目前能够显示出一个“获取头像昵称”按钮和一个“Hello World”文本，这与手机运行的效果完全相同。
用户可以直接在PC端用鼠标单击模拟手指在手机屏幕上触摸的效果，如图2-5所示。
图2-5 小程序项目运行效果
在图2-5中，图（a）显示的是使用鼠标单击来模拟手指在手机屏幕上触摸的效果；图（b）为单击之后弹出的微信授权信息，只有单击“允许”才可以获得数据；图（c）为最终显示效果，由该图可见小程序项目已经成功地获取了开发者的头像和昵称信息。
2.1.2 真机预览和调试
1 真机预览
除了可以在PC端使用鼠标模拟手机触屏的单击效果以外，还可以直接在真机上进行程序预览。单击“预览”按钮，即可自动生成一个预览专用二维码，如图2-6所示。
图2-6 小程序项目生成预览二维码
此时用手机微信扫描图2-6中的二维码即可进行真机测试，如图2-7所示。
图2-7 小程序项目的真机预览效果
由图2-7可见效果基本与PC端的预览图一致。用户需要注意，预览所用的二维码不是永久有效，要注意它的过期时间，一旦过期，需要重新单击“预览”按钮生成新的预览二维码。
2 真机调试
真机预览只能看到小程序页面效果，如果在测试过程中需要像PC端一样获得小程序的状态数据（例如console语句输出、本地缓存数据变化、网络抓包等），则需要进行真机调试。
单击“远程调试”按钮，即可自动生成一个调试专用二维码，如图2-8所示。
图2-8 小程序项目生成预览二维码
此时用手机微信扫描图2-8中的二维码即可进行真机远程调试，如图2-9所示。
图2-9 小程序项目的远程调试
手机调试界面会比真机预览多出一个浮窗，该浮窗会显示与PC端的通信状态。在调试过程中手机端的任何操作都可以在PC端调试器中同步进行查看。
2.1.3 代码的提交
1 上传代码
预览只能由开发者测试小程序的性能和表现，如果希望更多人使用小程序，需要进行代码的上传。注意，只有上传后的代码才可以由管理员进一步选择发布为体验版本或正式版本。
首先需要将代码上传到小程序的后台管理端。单击开发者工具顶端的“上传”按钮准备上传代码，具体操作如图2-10所示。
图2-10 上传代码示意图
单击“确定”按钮之后，会出现新的表单要求开发者填写自定义的版本号和项目备注，如图2-11所示。这两个字段是为了方便管理员检查版本而使用的。
图2-11 版本号与项目备注
上传成功后就可以登录小程序管理后台，单击“开发管理”选项，在开发管理面板中看到刚才提交的版本，如图2-12所示。
图2-12 开发版本
同一个小程序允许同时有多名开发者提交自己的最新开发版本，管理员最终只能选择其中一份进一步提交为体验版或线上版。
2 提交体验
管理员可以将开发版本提交为体验版，体验版目前最多可以供15名体验者使用。单击“提交审核”按钮右边的向下箭头按钮，选择“选为体验版本”选项，如图2-13所示。
图2-13 小程序的开发版本
体验版无须经过审核，选中选项即可完成，已经转换成功的体验版如图2-14所示。
图2-14 小程序的体验版本
单击体验版的版本号下方的按钮会出现一个二维码，具有体验者权限的用户通过手机微信扫一扫就可以使用体验版了。体验版也可以继续单击“提交审核”按钮提交为正式的线上版本，但是需要经过审核。
3 提交审核
管理员可以将开发版或体验版进一步提交审核，通过审核后的版本将成为正式的线上版。该版本没有权限限制，所有微信用户都可以使用。正式发布的线上版本如图2-15所示。
图2-15 小程序的线上版本
2.1.4 小程序的版本
小程序根据项目阶段分为开发测试、审核过程和最终发布，如图2-16所示。
图2-16 小程序项目阶段示意图
在不同阶段小程序的版本主要有开发版本、体验版本、审核中版本和线上版本。
1 开发版本
使用开发者工具可以将代码上传到开发版本中。开发版本只保留每位开发者最新的一份上传代码，该版本只有开发者权限用户可以预览、测试。开发版本可以删除，不影响线上版本和审核中版本的代码。开发版可以由管理员继续提交为体验版或审核中版本。
2 体验版本
开发版可以由管理员继续提交为体验版，该版本无须审核且只有体验者权限用户可以使用，其他用户无法打开。该版本主要用于正式上线前的测试体验。
3 审核中版本
开发版全部完成后可以由管理员正式提交上线。小程序正式上线前的待审核状态称为审核中版本，同一个小程序的所有开发版本只能有一份处于此状态。该版本可在更新代码后重新提交审核，在等待审核的过程中不影响现有正式版本的使用。
4 线上版本
该版本是审核通过后的版本，所有微信用户都可以查看和使用。如果有新上传的代码重新被审核通过，该版本将被覆盖更新。