![微信小程序开发与运营](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=1739333538-l39mheONCYlAT7wxjmj67X39aAJlX8V4-0-5da5a833cdf11187b573754db4e98316)
图1-5 微信公众平台官网首页
(2)选择账号的类型,单击“小程序”选项,如图1-6所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0016_0002.jpg?sign=1739333538-1Wlj42KUURi11aR2UMT2AJT61gXHG74B-0-996c61af5c6cd04d9105af2a10f4ba2a)
图1-6 选择账号类型
(3)进入账号信息页面(图1-7),填写邮箱地址(该邮箱未注册过公共平台、开放平台、企业号,未绑定个人微信),这个邮箱地址将作为以后登录小程序后台的账号。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1739333538-pug8fukb6zQSykzGqW5oe1xvK8h9RXv4-0-d10dcb16264b865013f50a76b118db2d)
图1-7 填写账号信息
(4)填写个人账号信息后,邮箱中会收到一封激活邮件,单击该邮件中的激活链接,进入主体信息页面进行“主体类型”选择(图1-8),在此选择“个人”选项。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1739333538-NIPgdOMD2kdd7N04Ftq3BBhQh5dUbqzF-0-150cfbce8266771c91115e52a7c7e239)
图1-8 选择主体类型
(5)进入主体信息登记界面(图1-9),完善主体信息,即可完成注册流程。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1739333538-t2JBG3FTZgFDqd4IG9dMpuP2FWQojKSR-0-a8b7c111f4bfb0a7663b41aab124f130)
图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=1739333538-a1wxQNcrbk0AIFtdbUrjRccpDAT0OShm-0-1483763ffee7abca53c828079201b59d)
图1-10 小程序信息及开发设置
单击“设置”→“填写”按钮,进入图1-11所示的页面,完善小程序信息。需要注意,目前,小程序的名称一旦确定便不能被修改。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1739333538-4BG8cv0V3Pi6VGV0IUvgyCX0aNearLpc-0-98ae463bc7c3869d2800aad0b207e3db)
图1-11 完善小程序信息
单击“设置”→“开发设置”选项,获取AppID(小程序ID),如图1-12所示。只有填写了AppID的项目,开发者才能通过手机微信扫描二维码对其进行真机测试。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0019_0002.jpg?sign=1739333538-bIVmI09Mef3nefDaOtPcsHc9Hv898O27-0-a77e6b8f0a6976beea5ded824b4f49f4)
图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=1739333538-hLNyMUm3eDfnG4OHKWmEOsYshFuhYdLy-0-e4660448336dbd93d7679e0228bd9729)
图1-13 “开发者工具”的下载
本节以Windows 64位安装包为例,介绍微信开发工具的安装过程。
双击下载的安装包,将出现安装向导,如图1-14所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1739333538-FVJE6GYxSkUkigYR91h6JVQ9IlsoETrM-0-ae76914c17380fcde6c9b071ab374795)
图1-14 安装向导之一
单击图1-14所示界面中的“下一步”按钮,按照安装向导提示进行操作,直到安装完成,如图1-15所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1739333538-wubbOZH2w0TjoDo6MpvvHS6BXQJv4qLx-0-6e2d3c30679c9458d19af53ad9da9558)
图1-15 “安装完成”界面
1.2.4 创建第一个小程序项目
如果是第一次打开或者长时间未打开“微信web开发者工具”,双击快捷方式后,开发工具会弹出一个二维码,如图1-16所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1739333538-qJJ2p7798FVPnBQX19EB7VCsjpgWwaXQ-0-08ed4589aa23b0c16c09f5ef3d9ea5d4)
图1-16 登录微信开发者工具
使用开发者的微信扫描二维码验证进入后,出现如图1-17所示的界面。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1739333538-xzEXwNaU0bFqDxxD2WpNYv7PIzwCVZrE-0-9982f9802994de086148a1d7ab6d532b)
图1-17 选择项目类型
单击“小程序项目”选项,将出现如图1-18所示的对话框,填入“项目目录”“AppID”和“项目名称”(若无AppID,则单击“可点此体验”),并勾选“创建QuickStart项目”复选框。单击“确定”按钮后,将成功创建一个系统默认的示例项目,如图1-19所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1739333538-FNOIyBXjG57l9fVt9rstXm7FRrxfcp1p-0-a3501c7e0c6628466789acb16f071ba3)
图1-18 填写项目信息
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1739333538-u0Ys37FZUxO4EdBxRt47XMvlTpeXlA5W-0-029a154770018f964f1e04ac8f3e5d36)
图1-19 微信开发者工具
这个示例项目的首页展示了当前登录的用户信息,单击用户头像,跳转到一个记录当前小程序启动时间的日志页面。
1.2.5 运行及发布小程序
开发者可以单击工具栏中的“调试器”图标,在模拟器中运行小程序,查看小程序的运行效果。开发者也可以单击工具栏中的“预览”图标,扫描二维码后即可在微信客户端中体验,如图1-20所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1739333538-tgkXbm8ZVA45n6ShdvbzEs2gnJFImM6a-0-aeb9607b9dad4fb9ca5a744444e9abd4)
图1-20 手机扫描二维码后码预览
开发者还可以单击工具栏中的“上传”按钮,将小程序上传到微信公众平台,如图1-21所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0023_0002.jpg?sign=1739333538-kGa5eTMfLtSuKGxW1D20N2cZNuA0b7jt-0-5636b523f14596999ae9ad6074a89aac)
图1-21 上传小程序代码
开发者将小程序上传成功后,打开微信公众平台(mp.weixin.qq.com),单击“开发管理”选项,进入“开发管理”对话框,如图1-22所示。
![](https://epubservercos.yuewen.com/E048FF/17640061507545406/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1739333538-lfpOTHBCgq77HOc7z9xEiTTDpZWz4uwS-0-bf56b4946f6c4534095a8d6184dfb596)
图1-22 “开发管理”对话框
此时,开发者会发现小程序已经上传至公众平台,单击“开发版本”的“提交审核”按钮。待通过审核后,该按钮会变为“审核版本”, “审核版本”提交审核并通过后,该按钮会变为“线上版本”。当成为“线上版本”后,开发者单击“发布”按钮即可在微信发现中搜索该小程序项目。