第1章 微信小程序入门

特点：

• 应用体积小
• 无需安装
• 触手可及
• 无需卸载

微信小程序与原生App的关系：

关系特点：

• 跨平台（支持iOS/Android）
• 与微信紧密结合
• 扫一扫或搜一搜可以获取小程序
• 一键登录

微信小程序覆盖的领域：

微信小程序存在的必要性：

• 小程序可以完成订票、打车、订餐等服务。
• 服务号的功能薄弱，而小程序功能强大。
• 小程序可以被附近用户搜索到。
• 小程序可以结合公众平台来推广。

微信小程序发展数据：

微信小程序热门应用案例：

单击微信中的搜索按钮，输入关键词“美团外卖”。

微信小程序的功能界定：

1.1.2 微信小程序的账号

微信公众平台账号分类：

小程序与订阅号、服务号的区别：

1.1.3 微信小程序的特点

微信小程序与原生App、Web App的区别：

1.1.4 微信小程序的发展前景

微信小程序迅速发展表现：

1.2 开发环境搭建

1.2.1 注册微信公众号

注册微信公众号步骤：
微信公众平台

微信公众号展示图：

微信小程序公众号注册完成后，进入微信小程序管理后台：

在“设置”-“开发设置”中查看AppID，为小程序开发做准备：

1.2.2 安装微信开发者工具

在微信公众平台网站中找到微信开发工具的下载地址：
微信开发工具下载

Windows 7操作系统为例，演示开发者工具的安装和使用，具体步骤如下：

安装向导：

1.3 小程序开发体验

1.3.1 创建项目

首次微信扫码登录，登录成功后选择开发模式：

单击“小程序”项目，就可以创建一个新的小程序项目：

1.3.2 开发者工具的使用

小程序项目创建成功后，就会进入到开发调试环境中。

通过菜单栏可以访问微信开发者工具的大部分功能：

• 项目：用于新建项目或打开一个现有的项目。
• 文件：用于新建文件、保存文件或关闭文件。
• 编辑：用于编辑代码，对代码进行格式化。
• 工具：用于访问一些辅助工具。
• 界面：用于控制界面中各部分的显示和隐藏。
• 设置：用于对外观、快捷键、编辑器等进行设置。
• 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。

工具栏提供了一些常用功能的快捷按钮，具体解释如下：

• 个人中心：位于工具栏最左侧第1个按钮，显示当前登录用户头像。
• 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。
• 云开发：开发者可以使用云开发来开发小程序、小游戏。云开发能力从基础库2.2.3开始支持。
• 模式切换下拉菜单：用于在小程序模式搜索动态页和插件模式之间切换。
• 编译下拉菜单：用于切换编译模式，默认为普通编译。
• 编译：编写小程序的代码后，需要编译才能运行。
• 预览：单击预览按钮会生成一个二维码，使用手机中的微信扫描二维码。
• 真机调试：通过网络连接对手机上运行的小程序进行调试。
• 后台：用于模拟小程序在手机中切后台的效果。
• 清缓存：用于清除数据缓存、文件缓存等。
• 上传：用于将代码上传到小程序管理后台。
• 版本管理：用于通过Git对小程序进行版本管理。

模拟器用于模拟手机环境，查看不同型号手机的运行效果：

编辑器：

• 分为左右两栏：左栏用于浏览项目目录结构，右栏用于编写代码。
• 在左栏中单击某个文件：就可以在右栏中对该文件进行编辑。

调试器类似于Google Chrome浏览器中的开发者工具：

• Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。
• Sources：源代码面板，可以查看或编辑源代码，并支持代码调试。
• Network：网络面板，记录网络请求信息，根据它可进行网络性能优化。
• Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。
• AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。
• Audits：审计面板，用于对小程序进行体验评分。
• Sensor：传感器面板，用于模拟地理位置、重力感应。
• Storage：存储面板，用于查看和管理本地数据缓存。
• Trace：跟踪面板，用于真机调试时跟踪调试信息。
• Wxml：Wxml面板，用于查看和调试WXML和WXSS。

1.3.3 目录结构

“Hello World”小程序的目录结构：

单击头像即可进入到登录日志页，查看用户登录的历史记录：

每个页面由wxml、wxss、js和json文件组成：

app.json文件中的pages配置项用来生成index页面：

1.3.4 项目设置

在微信开发者工具中，执行菜单栏中的“设置”-“项目设置”命令：

设置项目及含义：

• 项目设置：对当前项目进行设置。
• 域名信息：小程序的安全域名信息，合法域名可在管理后台进行设置。
• 调试基础库：选择基础库版本，用于在对应版本的微信客户端上运行。
• ES6转ES5：将JavaScript代码的ES6语法转换为ES5语法。
• 上传代码时样式自动补全：自动检测并补全缺失样式。
• 上传代码时自动压缩：压缩代码，缩小代码体积。
• 使用npm模块：在小程序中使用npm安装第三方包。
• 启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令。
• 不校验合法域名、web-view（业务域名）、TlS版本以及HTTpS证书：在真* 实环境中会对这些信息进行校验。

1.3.5 快捷键

为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：

1.4 团队开发与项目上线

1.4.1 项目成员及权限

小程序的开发团队的人员组织结构组成：

开发小程序项目的一般工作流程：

小程序的管理后台开发团队中的不同身份的成员权限：

开发团队的成员权限分配：

小程序的管理后台根据这个流程设计了小程序的版本管理：

预览小程序开发版本二维码：

1.4.2 提交审核及发布

为了保证小程序的质量以及符合相关的规范，小程序的发布需要经过审核：

总结

本章主要讲解了什么是微信小程序，微信小程序的特点和发展前景，以及如何下载安装微信小程序开发者工具及简单使用，最后介绍了微信小程序的团队开发、项目管理以及审核发布。通过本章的学习，读者应对微信小程序的全貌有了一个整体的认识，能够动手完成小程序开发环境的搭建。