【微信小程序实战教程】之微信开发者工具详解

微信开发者工具详解

小程序是一种全新的获取和传播信息的方式，小程序的概念并非空穴来风，微信作为一款移动应用，其内部的 WebView 组件提供了应用内部打开
Web 应用的能力，此时，微信仅需要对外开放 JS API，就可以在 Web
应用中实现调用手机硬件的能力。早在2015年，微信就曾发布了一套网页开发工具包，被称为
JS-SDK，并开放了拍摄、录音、语音识别、扫二维码、地图定位、支付与分享等几十个 API。从此，一种新的开发方式被揭开了序幕，给所有的
Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，并且开发之前难以完成的功能。

1 申请小程序账号

1.1 申请账号

开发微信小程序的第一步，是需要先申请一个小程序的账号，通过这个账号可以在微信公众平台中管理自己的小程序。申请微信小程序账号需要先打开微信公众平台（https://mp.weixin.qq.com/），在浏览器中打开网页后点击右上角的“立即注册”链接，效果如图1所示。

图1 微信公众平台

点击“立即注册”之后要先选择注册的账号类型，微信公众平台提供了四种类型的账号注册，分别为：订阅号、服务号、小程序、企业微信，效果如图2所示。

图2 微信公众号注册的类型

关于这四种公众号类型的区别，主要体现在以下方面：

• 订阅号，对所有主体开放，包括政府、企事业单位、非盈利性机构、社会组织、媒体、个人等，推送消息在用户消息盒子中显示，每天可以推送一次，对开发者提供的开放能力有限；
• 服务号，不对个人主体开放，只对组织主体开放注册，包括政府、企事业单位、非盈利性机构、社会组织、媒体，推送消息在用户的消息列表中显示，对开发者提供更全面的开放能力；
• 小程序，一种全新的连接用户与服务的方式，具有更加出色的交互体验，小程序内具有调用手机硬件能力，适合所有主体注册，为了保护用户隐私，尽量减少对用户的打扰，小程序不支持信息推送；
• 企业微信，为企业提供更高效的协同办公体验，只对企业及组织开发注册权限；
  在微信公众号类型选择页面，选择小程序注册，进入小程序注册页面，效果如图3所示。

图3 注册微信小程序

进入小程序注册页面后，根据指引填写信息并提交相关的资料，在注册之前，需要先了解小程序的注册主体上限规则。
微信小程序的注册上限：

1）同一个邮箱只能申请1个小程序；
2）同一个手机号码可绑定5个小程序；
3）同一身份证注册个人类型小程序数量上限为5个；
4）同一企业、政府、媒体、其他组织资料注册小程序数量上限为50个；
5）同一个体工商户注册小程序数量上限为5个。

微信小程序的绑定上限：

1）同一身份证可绑定5个小程序；
2）同一手机号可绑定5个小程序；
3）同一微信号可绑定5个小程序。

账号信息填写完毕后，点击下方的“注册”按钮，进入邮箱激活页面，此时需要登录上一步中的邮箱，查收腾讯官方发送的小程序账号激活邮件，点击激活链接，效果如图4所示。

图4 小程序邮箱激活

点击激活链接后，继续下一步的注册流程，选择注册的主体类型，并完善主体信息和管理员信息，效果如图5所示。

图5 注册主体信息登记

填写的主体不同，官方验证的方式也会有所区别，以企业类型账号为例，企业主体注册小程序账号可以选择两种主体验证方式：

• 支付验证，需要使用公司的对公账户向腾讯公司指定的对公账户打款，以此来验证企业的主体身份，打款信息在提交主体信息后可以查看到，效果如图6所示。
• 微信认证，通过微信认证企业主体身份，需要支付一定金额的认证费，一般为300元，在官方审核通过之前，小程序部分功能暂时无法使用。

图6 企业支付验证主体身份信息

主体一旦提交并认证成功之后，被认证的主体信息不可变更，效果如图7所示。

图7 主体信息确认提示

主体信息提交成功后，等待官方对注册主体的认证结果，认证成功后，整个小程序的注册过程就结束了，你就拥有了自己的小程序账号，马上开启你的小程序开发之旅吧！

1.2 微信公众平台

微信公众平台是管理微信公众账号的综合性管理后台，本小节主要介绍的是微信小程序管理后台，关于微信小程序的所有账号信息配置和开发者相关配置都需要在微信小程序管理后台进行操作。

登录微信公众平台有两种方式，一种是使用邮箱和密码登录，效果如图8所示。

图8 使用邮箱登录微信公众平台

另一种登录方式是扫码登录，在微信公众平台的登录表单右上方点击扫码登录按钮，切换到扫码登录状态，通过注册微信小程序时绑定的小程序管理员微信账号扫码，效果如图9所示。

图9 使用微信扫码登录

如果当前微信绑定了多个小程序时，扫码成功后，在手机上选择要登录的小程序账号，然后点击登录即可完成登录。两种登录方式中，推荐使用扫码的方式登录小程序。

进入微信小程序管理后台，可以设置当前微信小程序账号的基本信息、版本信息、开发成员、开发管理、功能设置等，微信小程序管理后台界面效果如图10所示。

图10 微信小程序管理后台界面

在完成小程序注册后，需要在管理后台的基本设置中，编辑当前微信小程序的名称、小程序简称、并上传小程序头像，提交这些信息并等待官方审核通过。

2 微信开发者工具下载与安装

2.1 微信开发者工具介绍

小程序的开发不同于其他的前端项目开发，小程序是需要依赖于某个应用作为宿主环境，所以开发小程序需要在官方指定的开发工具中完成。为了让开发者更加简单高效地开发和调试微信小程序，微信官方推出了全新的微信开发者工具，在这套IDE（全称 Integrated Development Environment，集成开发环境）集成了公众号网页和小程序两种开发模式。

开发者可以通过微信开发者工具完成小程序的 API 和页面的开发调试、代码查看、代码编辑、小程序预览和发布等功能。为了更好的让开发者具有更好的开发体验，官方从视觉、交互、性能等方面不断地对开发者工具进行升级，开发者可以在微信小程序官方文档中下载最新版的微信开发者工具。

2.2 安装微信开发者工具

在浏览器中打开微信官方文档（网址：https://developers.weixin.qq.com/doc/），选择小程序文档，在开发栏目下选择工具、下载、稳定版更新日志，根据自己的电脑操作系统下载对应版本的微信开发者工具安装包，效果如图11所示。

图11 下载微信开发者工具

本书以 Windows64 版本为例，安装微信开发者工具并进行后续内容的讲解。点击下载链接后，等待安装包下载完成，效果如图12所示。

图12 微信开发者工具安装包

双击微信开发者工具安装包，打开安装程序对话框进入微信开发者工具安装向导界面，效果如图13所示。

图13 微信开发者工具安装向导

在“下一步”按钮上单击鼠标左键，进入微信开发者工具安装许可协议界面，效果如图14所示。

图14 安装许可协议

在“我接受”按钮上单击鼠标左键，进入微信开发者工具安装位置选择界面，效果如图15所示。

图15 选择安装位置

在安装位置选择界面，在“浏览”按钮上单击鼠标左键，选择微信开发者工具安装目录，然后点击确定后，在“安装”按钮上单击鼠标左键，开始执行微信开发者工具安装程序，效果如图16所示。

图16 执行微信开发者工具安装程序

等待安装程序执行完成后，会弹出安装完成提示界面，效果如图17所示。

图17 微信开发者工具安装完成提示

在安装完成提示界面选中“运行 微信开发者工具”的选项，然后在“完成”按钮上单击鼠标左键，到此微信开发者工具就全部安装完成了。

3 微信开发者工具界面介绍

3.1 启动微信开发者工具

微信开发者工具启动成功后，进入登录界面，效果如图18所示。

图18 微信开发者工具启动界面

使用微信扫描微信开发者工具启动页面的二维码，在手机微信中点击“确认登录”按钮，效果如图19所示。

图19 微信开发者工具登录确认

等待系统认证完成后即可成功登录微信开发者工具，进入小程序项目管理界面，效果如图20所示。

图20 小程序项目管理界面

在小程序管理界面中的加号图标处，单击鼠标左键，进入创建小程序的信息配置界面，效果如图21所示。

图21 创建小程序信息配置界面

创建微信小程序时需要填写的信息如下：

• 项目名称：根据当前项目的需求填写项目的名称；
• 目录：选择本地文件夹作为小程序源码的存放目录；
• AppID：小程序的唯一标识，配置AppID时需要先在微信小程序管理后台中找到设置、基本设置、账号信息中复制小程序的AppID，然后在创建小程序的信息表单里粘贴AppID；
• 开发模式：可以选择小程序或插件，当前为小程序开发，所以选择小程序；
• 后端服务：可以选择是否使用微信云开发，使用云开发手动无需搭建后端服务器，只有配置了AppID才能选择微信云开发；
• 模板选择：如果选择了微信云开发，可以使用官方推荐的模板进行小程序开发，使用模板后创建的小程序项目中包含模板实现的代码，也可以选择不使用模板。

配置好小程序信息后，在“确定”按钮处单击鼠标左键，进入微信小程序开发界面，效果如图22所示。

图22 微信小程序开发界面

微信开发者工具支持同时打开多个项目，每次打开项目时会从新窗口打开，入口有以下几种：

• 从项目选择页打开项目，处于项目窗口时可以从菜单栏的项目 -> 查看所有项目打开项目选择页；
• 从菜单栏的最近打开项目列表中打开的项目会从新窗口打开；
• 新建项目；
• 命令行或 HTTP 调用工具打开项目。

除了创建小程序之外，还可以对本地项目进行删除和批量删除，在小程序管理界面右上角的“管理”链接处单击鼠标左键，进入小程序批量管理界面，效果如图23、图24所示。

图23 管理小程序界面

图24 批量管理微信小程序

微信开发者工具界面一共包括：菜单栏、工具栏、模拟器、资源管理器、代码编辑区、代码调试区等六大区域，效果如图25所示。

图25 微信开发者工具界面

在开发过程中为了方便查看，可以将模拟器、代码调试器设置为独立展示的窗口，而资源管理器和代码编辑区又可以称为代码编辑窗口。所以，为了更加方便的学习微信开发者工具界面，我们可以把模拟器、资源管理器、代码编辑区、代码调试区统称为微信开发者工具的开发窗口，简称窗口。

3.2 菜单栏介绍

微信开发者工具的菜单栏在界面的最上方展示，是一种以树型结构为开发者提供大部分功能的入口按钮，主要包括以下功能。

（1）项目

• 新建项目：快速新建项目；
• 打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目；
• 查看所有项目：新窗口打开启动页的项目列表页；
• 关闭当前项目：关闭当前项目，回到启动页的项目列表页。

**
**

• 新建文件：快速新建代码文件或配置文件；
• 保存：保存当前激活的代码文件或配置文件；
• 全部保存：保存所有未保存的代码文件或配置文件；
• 自动保存：自动保存当前激活状态的代码文件或配置文件。

（3）编辑

包含文件的撤销、查找、替换、复制等文件编辑功能以及代码格式化功能。

（4）工具

• 编译：编译当前小程序项目；
• 刷新：与编译的功能一致，由于历史原因保留对应的快捷键 ctrl + R；
• 编译配置：可以选择普通编译或自定义编译条件；
• 前后台切换：模拟客户端小程序进入后台运行和返回前台的操作；
• 清除缓存：清除文件缓存、数据缓存、以及授权数据。

（5）界面

主要用于控制主界面窗口模块的显示与隐藏。

（6）设置

• 外观设置：控制编辑器的配色主题、字体、字号、行距；
• 编辑设置：控制文件保存的行为，编辑器的表现；
• 代理设置：选择直连网络、系统代理和手动设置代理；
• 通知设置：设置是否接受某种类型的通知。

（7）微信开发者工具

• 切换帐号：快速切换登录用户；
• 关于：关于开发者工具的介绍；
• 检查更新：检查版本更新；
• 调试：调试开发者工具、调试编辑器；
• 更换开发模式：快速切换公众号网页调试和小程序调试；
• 退出：退出开发者工具。

3.3 工具栏介绍

点击用户头像可以打开个人中心，在这里可以便捷的切换用户和查看开发者工具收到的消息。效果如图26所示。

图26 点击头像打开个人中心

用户头像右侧是控制窗口显示/隐藏的按钮，在微信开发者工具中至少要显示一个窗口，效果如图27所示。

图27 控制窗口显示/隐藏按钮

工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览。效果如图28所示。

图28 选择编译模式

在工具栏中选择编译模式的右边，提供了预览、真机调试、清缓存的快速入口，可以便捷的查看小程序编译后在移动设备上显示的效果，以及清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。效果如图29所示。

图29 工具栏中的功能按钮

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

图30 工具栏开发辅助功能

点击工具栏右侧的辅助功能按钮中的详情按钮，打开项目配置选项卡主要有三大功能：基本信息、本地设置、项目配置，效果如图31所示。

图31 项目配置选项卡

基本信息包括图标、AppID、第三方平台名（只有第三方平台的开发小程序才会显示）、目录信息、上次提交代码的时间以及代码包大小。

在本地设置中可以切换基本库版本，方便开发者解决开发和调试旧版本兼容问题，正式版本的基础库全量发布前，会有一个灰度的过程。微信开发者工具1.02.2002252或以上版本，开发者可以在此查看正在灰度中的基础库版本，该功能只能下发到登录开发者工具的微信号的客户端，并会影响到该客户端所有小程序。微信客户端对开发版小程序打开调试，可以查看下发测试基础库的生效时间以及版本。除此之外，本地设置还包含上传代码时样式自动补全、自动压缩样式、自动压缩混淆、代码保护，不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书等功能设置。

项目设置中可以设置域名信息，将显示小程序的安全域名信息，合法域名可在微信小程序管理后台的开发管理中进行设置。

3.4 窗口介绍

在微信开发者工具中至少要显示一个窗口，这些窗口主要包括模拟器、资源管理器、代码编辑器、调试器与内置终端，这些窗口的显示与隐藏都是由工具栏左侧的窗口控制按钮统一管理。

（1）模拟器

模拟器可以将小程序的代码通过编译后直接在模拟器上运行，这样即使在不发布小程序的情况下，也可以让开发者查看小程序在微信客户端的表现能力。模拟器还提供了不同的设备类型供开发者选择，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。效果如图32所示。

图32 模拟器的机型选择

在模拟器的右上角也提供了模拟操作的按钮，在模拟操作管理中可以模拟移动设备的常用操作，例如选择网络信号、Home返回键、静音与取消静音、旋转屏幕等操作。效果如图33所示。

图33 选择模拟器网络类型

在模拟器底部的状态栏中，可以更直观地看到当前运行小程序的场景值、页面路径及页面参数等信息。效果如图34所示。

图34 模拟器底部状态栏

（2）代码编辑器

在微信开发者工具中可以把资源管理器、代码编辑器、代码调试器和内置终端统称为代码开发工具，其实在很多的IDE（集成开发环境，Integrated Development Environment ）中都是包含了代码编辑器、编译器、调试器、资源管理器等工具，集成了代码编写、分析、编译、调试等功能。微信开发者工具其实就是为开发微信小程序而定制的一套集成开发环境，其核心就是代码开发工具。效果如图35所示。

图35 微信小程序代码开发工具

除了资源管理、代码编写、代码调试等功能之外，微信的代码开发工具还提供了一些扩展功能，例如代码搜索、项目Git版本管理、插件功能，这些扩展功能可以在资源管理器的上方查看。效果如图36所示。

图36 微信开发工具的扩展功能

4 微信开发者工具功能介绍

4.1 功能设置

在微信开发者工具的菜单栏中点击“设置”按钮，可以打开设置页面，主要包括通用设置、外观设置、快捷键设置、编辑器设置、代理设置、安全设置和扩展设置。

（1）通用设置

通用设置主要用于设置关于语言、工作区路径、以及开发者工具的个性化设置需求，效果如图37所示。

图37 通用设置界面

（2）外观设置

外观设置主要是对开发者工具的外观和主体、区块配置提供支持，可以通过外观设置来配置开发者工具的主体、调试器的颜色，标题内容与标题栏样式，模拟器位置等，效果如图38所示。

图38 外观设置界面

（3）快捷键设置

在快捷键设置界面可以查看和修改当前微信开发者工具所绑定的所有快捷键，效果如图39所示。

图39 快捷键设置界面

（4）编辑器设置

编辑器设置可以对文件的自动保存、自动编译、自动折行等功能进行配置，如果选中了 “总是在新标签页打开文件”，则在编辑器目录树点击文件时，总是会在一个新标签页中打开此文件，而非在临时标签页中打开。效果如图40所示。

图40 编辑器设置界面

（5）代理设置

可以配置不使用代理，或使用系统代理，或使用自定义代理。效果如图41所示。

图41 代理设置界面

（6）安全设置

可以开启和关闭 CLI/HTTP 调用功能，效果如图42所示。

图42 安全配置界面

（7）拓展设置

可以查看、开启和关闭开发者工具的一些拓展功能，例如编辑器扩展、模拟器扩展、调试器扩展插件以及接口、测试等扩展能力，效果如图43所示。

图43 扩展设置界面

4.2 代码编辑

（1）文件类型支持

微信开发者工具目前提供了5种文件的编辑，包括“.wxml”文件、“.wxss”文件、“.js”文件、“.json”文件、“.wxs”文件以及图片文件的预览。

（2）代码自动保存

开发者可以在菜单栏的设置中开启“编译时自动保存所有文件”，具体操作步骤是选择“设置”、选择“编译设置”、选择“编译时自动保存所有文件”，设置好以后，工具就会帮助开发者自动保存当前的代码文件，即使开发者直接关闭微信开发者工具或者是将操作系统的窗口切换到其他软件中，也不会导致已编辑好的代码造成丢失。如果在微信开发工具中设置了“修改文件时自动保存”，工具在修改文件时也会自动保存到硬盘中，无需手动保存代码。

（3）代码自动编译

如果在设置中开启了“文件保存时自动编译小程序”，那么当代码文件（如wxml、js、wxss、json）修改时，可以通过模拟器实时预览编辑的效果。但是自动编译会给小程序的预览带来一定的延迟，想要避免这种延迟编译的情况，可以设置手动点击编译按钮进行编译。

4.3 小程序调试

项目开发阶段为了更好的预览小程序的运行效果以及调试小程序界面的交互功能，开发者可以借助微信开发者工具提供的多种调试功能对小程序进行调试，可以通过点击菜单栏中的工具按钮或快捷入口进入这些调试功能。微信开发者工具主要提供了模拟器调试、自动预览、真机调试、调试器、真机性能分析工具等调试工具。

（1）模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

（2）自动预览

微信开发者工具提供了两种在真机中预览小程序的方式，一种是扫描二维码预览，另一种是自动预览，自动预览可以实现编写小程序时快速预览，免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。点击工具栏中的“预览”按钮，然后在手机中保持微信的前台运行状态既可以自动唤出小程序，如果真机上以及打开了当前的小程序，那么再次点击自动预览即可刷新当前小程序。自动预览效果如图44所示。

图45 自动预览功能

自动预览关联的微信账号是当前微信开发者工具登录的微信账号，并且微信客户端必须为6.6.7及以上版本才能使用自动预览功能。而且在微信小程序未发布之前，小程序只对微信小程序管理后台所配置的开发者和体验者开放。

（3）真机调试

真机远程调试功能可以实现直接利用开发者工具，通过网络连接，对手机上运行的小程序进行调试，帮助开发者更好的定位和查找在手机上出现的问题。要发起一个真机远程调试流程，需要先点击开发者工具的工具栏上 “真机调试” 按钮，效果如图46所示。

图46 自动真机调试功能

真机调试功能和预览功能类似，开发者可以通过手机设备的微信扫描二维码或选择自动真机调试两种操作，如果选择了自动真机调试，此时，工具会将本地代码进行处理打包并上传，就绪之后，可以自动唤起手机前台运行的微信小程序，同时还会在PC端自动弹出真机调试控制台。效果如图47所示。

图47 真机调试控制台

（4）调试器

微信开发者工具的调试器与浏览器中的开发者工具很类似，可以帮助开发者在项目开发过程中对源码做相关的调试操作。效果如图48所示。

图48 微信开发者工具调试器

微信开发者工具的调试器有很多功能，其中最主要的是以下7大功能。

• Wxml面板：开发者可以通过 Wxml 面板看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应的 wxss 属性在模拟器中实时查看到修改的情况。
• Console面板：开发者可以在 Console 面板中查看小程序的错误输出内容，而且还可以在该面板中输入和调试代码。
• Sources面板：开发者可以在 Sources 面板中查看当前项目的脚本文件，由于微信小程序框架会对脚本进行编译，所以在该面板中查看到的文件都是被编译后的文件。
• Network面板：开发者可以在 Network 面板中观察请求响应的情况，查看请求头和响应头以及响应结果等信息。
• Appdata面板：该面板用于显示当前项目运行时小程序 AppData 具体数据。
• Storage面板：该面板用于显示当前项目中的缓存数据，这些数据都是由 wx.setStorage 或者 wx.setStorageSync 函数存储的，开发者也可以在该面板中对缓存数据进行新增、修改、删除的操作。
• Sensor面板：开发者可以在这里选择模拟地理位置，同时还可以在该面板中调试重力感应 API。

（5）真机性能分析工具

微信开发者工具提供了真机性能分析工具，使用该工具的前提是要保证PC机与移动设备在同一局域网下，通过局域网连接，录制真机上小程序/小游戏的Memory、CPU相关的性能数据，帮助开发者更好地定位性能问题。

4.4 小程序开发辅助设置

为方便开发者更好的使用微信开发者工具进行小程序的开发，微信团队为开发者工具提供了很多辅助功能，例如版本管理、命令行调试、HTTP调用、NPM支持、可视化编辑等能力。

（1）Git版本管理

为了方便开发者更简单快捷地进行代码版本管理，简化一些常用的 Git 操作，以及降低代码版本管理使用的学习成本，开发者工具集成了 Git 版本管理面板。开发者可以在打开的项目窗口里，点击工具栏上的 “版本管理” 按钮进入 Git 版本管理界面。

（2）命令行调试

通过命令行调用安装完成的工具可执行文件，完成登录、预览、上传、自动化测试等操作。调用返回码为 0 时代表正常，为 -1 时错误。要使用命令行，注意首先需要在开发者工具的设置、安全设置中开启服务端口。

（3）HTTP调试

HTTP 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装/启动。

（4）NPM支持

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。从小程序基础库版本2.2.1开始，小程序开始支持使用 npm 安装第三方包。

（5）可视化编辑

为提高代码编辑效率和体验，减少开发中非必要的重复编码工作。开发者工具提供可视化面板，方便开发者可以通过拖拽等方式对界面进行快速布局与修改，同时代码编辑器的和可视化编辑面板将双向实时同步修改。通过点击开发者工具顶部导航栏的可视化按钮切换可视化编辑窗口的显示与隐藏，效果如图49所示。

图49 可视化编辑窗口

当开发者在可视化面板进行设置和操作时，代码编辑器会打开对应代码文件，并同步生成相应的代码。开发者可以点击代码的节点或者大纲，来选择对应的可视化组件。

5 编写第一个小程序

5.1 新建微信小程序项目

为了快速实现一个微信小程序的开发过程，我们可以先跳过申请小程序账号的步骤，直接打开微信开发者工具，然后使用测试账号开发我们的第一个微信小程序应用。

打开微信开发者工具后，使用自己的微信账号扫码登录，然后在创建小程序的窗口中填写相关的信息，效果如图50所示。

图50 新建微信小程序应用

在创建小程序的表单中填写项目名称，选择项目所在目录，点击“测试号”按钮，在小程序 AppID 选项中使用测试ID创建临时小程序应用。信息填写完成之后，点击“确定”按钮，跳转到小程序开发界面。

5.2 微信小程序的代码编写

小程序应用创建成功后，会自动生成首页和日志页的代码以及应用的配置文件。小程序的代码目录结构效果如图51所示。

图51 小程序代码目录结构

打开 “pages/index/index.wxml”文件，在该文件中编写小程序首页代码，示例代码如例1所示。

【例1】小程序首页代码

<view>
  <input value="{{ inputValue }}" 
           bindinput="onInput" 
           bindconfirm="onConfirm" 
           placeholder="请输入">
  </input>
  <view class="list-title">列表内容：</view>
  <view class="list">
    <view wx:for="{{ list }}" wx:key="index" class="item">
      {{ item }}
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

打开“pages/index/index.wxss”文件编写小程序首页的样式代码，示例代码如例2所示。
【例2】小程序首页样式代码

input {
  border: 1px solid #ccc;
  font-size: 30rpx;
}
.list-title {
  font-size: 30rpx;
  margin: 20rpx 0rpx;
  font-weight: 600;
}
.list {
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
}
.item {
  margin: 10rpx 0rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

打开“pages/index/index.js”文件编写小程序首页的绑定属性和事件函数，示例代码如例3所示。
【例3】小程序首页的功能代码

Page({
  data: {
    inputValue: '',
    list: []
  },
  onConfirm(event) {
    const list = this.data.listlist.push(event.detail.value)
    this.setData({ 
      list, 
      inputValue: '' 
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

5.3 微信小程序的预览与发布

小程序代码编写完成后，点击工具栏的“预览”按钮，在微信客户端中查看小程序的效果并测试功能，效果如图52所示。

图52 真机预览微信小程序

打开微信小程序后，点击输入框并填写相关内容，输入完毕后点击键盘右下角的“回车”按钮，将输入的内容追加到输入框下方的列表中。

真机预览环境下测试小程序，在操作时如果没有出现异常或报错的情况，就表示当前小程序以及开发完成了，返回微信开发者工具中点击工具栏右侧的“发布”按钮即可上传小程序的程序到微信小程序管理后台，在后台中提交审核，待审核通过后即实现小程序的发布上线。如果当前小程序为测试号，需要先申请微信小程序账号，然后按照上面步骤实现小程序的发布。

6 本章小结

本章学习了小程序账号的申请流程以及开发小程序的步骤，开发微信小程序需要使用微信官方推出的IDE（集成开发工具），即微信开发者工具。在本章中主要介绍了微信开发者工具的使用，熟练掌握微信开发者工具是开发微信小程序的前提，在此基础上还需要熟练掌握微信开发者工具的调试与辅助功能。工欲善其事必先利其器，所以大家一定要认真学习本章的内容，这样才能开发出功能完善的小程序应用。