![微信小程序开发与运营](https://wfqqreader-1252317822.image.myqcloud.com/cover/975/32854975/b_32854975.jpg)
1.2 微信小程序开发流程
微信小程序开发流程为:第1步,在微信公众平台上注册小程序账号;第2步,下载开发者工具进行编码;第3步,通过开发者工具提交代码,待通过审核后便可以发布。
1.2.1 注册小程序账号
注册小程序账号需要以下5步:
(1)在微信公众平台官网首页(mp.weixin.qq.com)单击位于右上角的“立即注册”按钮,如图1-5所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1738985247-Omz4cJXHp5gIeOkxdfYxTY9mIS5sqkso-0-358e8a25f3ccd0ee042ee7d71f1e389f)
图1-5 微信公众平台官网首页
(2)选择账号的类型,单击“小程序”选项,如图1-6所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0016_0002.jpg?sign=1738985247-v9x1Rm8MWhj6UPPb2egKhEXyF1AjSQnf-0-a6d4153ca715bb328671c12de579c95f)
图1-6 选择账号类型
(3)进入账号信息页面(图1-7),填写邮箱地址(该邮箱未注册过公共平台、开放平台、企业号,未绑定个人微信),这个邮箱地址将作为以后登录小程序后台的账号。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1738985247-yd43Fca9s9AhQXOUP3Iy9fvPOHHd6qao-0-23181218d19eb43f1308c93d99c304df)
图1-7 填写账号信息
(4)填写个人账号信息后,邮箱中会收到一封激活邮件,单击该邮件中的激活链接,进入主体信息页面进行“主体类型”选择(图1-8),在此选择“个人”选项。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1738985247-zc0debdYA6r8H3fqq7nnGzrllQdohPoI-0-5ebff7594ccea859f5c3b854214e508c)
图1-8 选择主体类型
(5)进入主体信息登记界面(图1-9),完善主体信息,即可完成注册流程。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1738985247-aAQOq6WFLTu8ANKQP0kQxviBdeSKF0Lw-0-d3b9990ab82cf1eb7d5490c120f3ff5f)
图1-9 主体信息登记界面
1.2.2 开发环境准备
完成账户注册后,登录微信公众平台官网(mp.weixin.qq.com),如图1-10所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0018_0002.jpg?sign=1738985247-xMbFlfd8dpUyHsBuHgnQc1JMaqUo7YqG-0-3a2e3d9c664754842d53b94eb54c293d)
图1-10 小程序信息及开发设置
单击“设置”→“填写”按钮,进入图1-11所示的页面,完善小程序信息。需要注意,目前,小程序的名称一旦确定便不能被修改。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1738985247-CGpGFnzykiTNA6sTcM5p5zoTpRXyvRR3-0-b712bcea40987d31a17b8731a09cd84d)
图1-11 完善小程序信息
单击“设置”→“开发设置”选项,获取AppID(小程序ID),如图1-12所示。只有填写了AppID的项目,开发者才能通过手机微信扫描二维码对其进行真机测试。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0019_0002.jpg?sign=1738985247-rtvUY0mJqOluNAZpAMqU00q11rt7MM5q-0-17cbe4a1cc5345ef7baf20062b928192)
图1-12 获取小程序ID
1.2.3 微信开发工具的下载及安装
单击图1-12中的“开发者工具”选项,进入如图1-13所示的页面,官方提供了3个版本的开发工具安装包:Windows 64、Windows 32和Mac。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0019_0003.jpg?sign=1738985247-6jrdmrp41vcvQ8RdBFSi9zU3FaDQvJxk-0-d62397378955f0ae02a67d1b8f2321a1)
图1-13 “开发者工具”的下载
本节以Windows 64位安装包为例,介绍微信开发工具的安装过程。
双击下载的安装包,将出现安装向导,如图1-14所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1738985247-VBN27RFN2d1UuLGECVy8PaAGXQJ2UXtr-0-4bbeeb7c8446b8f9bba9344e8c4e8999)
图1-14 安装向导之一
单击图1-14所示界面中的“下一步”按钮,按照安装向导提示进行操作,直到安装完成,如图1-15所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1738985247-94IXpFrQlXHr93gJ1aZwO6DMhg918JGG-0-a023a2f58d36a6292b6fa73a55f48206)
图1-15 “安装完成”界面
1.2.4 创建第一个小程序项目
如果是第一次打开或者长时间未打开“微信web开发者工具”,双击快捷方式后,开发工具会弹出一个二维码,如图1-16所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1738985247-Z8M8dqKGiHlUyzPvcEHJp5gpMmOLEy91-0-0b1135889617123ca215465b01df94d1)
图1-16 登录微信开发者工具
使用开发者的微信扫描二维码验证进入后,出现如图1-17所示的界面。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1738985247-eMzxG5LxTIMStRvYyT3STqL3w9zqHMsN-0-507ce19f944b395da0a435373b6c9983)
图1-17 选择项目类型
单击“小程序项目”选项,将出现如图1-18所示的对话框,填入“项目目录”“AppID”和“项目名称”(若无AppID,则单击“可点此体验”),并勾选“创建QuickStart项目”复选框。单击“确定”按钮后,将成功创建一个系统默认的示例项目,如图1-19所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1738985247-GQYeSnxBwdShOIR3E4bax7I6pT2BwWaK-0-454a1a82d2a63f626cfdbe923f06e785)
图1-18 填写项目信息
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1738985247-8H7dQ53yTN3blEOoYbImHFn3X1LDr4wT-0-19ec9053a8815ebad28f41023b852763)
图1-19 微信开发者工具
这个示例项目的首页展示了当前登录的用户信息,单击用户头像,跳转到一个记录当前小程序启动时间的日志页面。
1.2.5 运行及发布小程序
开发者可以单击工具栏中的“调试器”图标,在模拟器中运行小程序,查看小程序的运行效果。开发者也可以单击工具栏中的“预览”图标,扫描二维码后即可在微信客户端中体验,如图1-20所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1738985247-OQ9NmOM2ugMtgoOEZa8mmKAZu4lTJhv5-0-6c311f134b6ee8ea848c4f668790bc07)
图1-20 手机扫描二维码后码预览
开发者还可以单击工具栏中的“上传”按钮,将小程序上传到微信公众平台,如图1-21所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0023_0002.jpg?sign=1738985247-BVRdRkC5wSiiixxt07tOuAIprGlY1RGf-0-805078b693481b76b0ccd04bf71469dc)
图1-21 上传小程序代码
开发者将小程序上传成功后,打开微信公众平台(mp.weixin.qq.com),单击“开发管理”选项,进入“开发管理”对话框,如图1-22所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1738985247-8DAYUGbvGBCBDV1esGPAIIPFHiNeiZ8u-0-c0c849c96deea3e1d3199b2df059fb06)
图1-22 “开发管理”对话框
此时,开发者会发现小程序已经上传至公众平台,单击“开发版本”的“提交审核”按钮。待通过审核后,该按钮会变为“审核版本”, “审核版本”提交审核并通过后,该按钮会变为“线上版本”。当成为“线上版本”后,开发者单击“发布”按钮即可在微信发现中搜索该小程序项目。