微信小程序入门

1.1 初识微信小程序1.1.1 什么是微信小程序1.1.2 微信小程序的账号1.1.3 微信小程序的特点1.1.4 微信小程序的发展前景 1.2 开发环境搭建1.2.1 注册微信公众号1.2.2 安装微信开发者工具 1.3 小程序开发体验1.3.1 创建项目1.3.2 开发者工具的使用1.3.3 目录结构1.3.4 项目设置1.3.5 快捷键 1.4 团队开发与项目上线1.4.1 项目成员及权限1.4.2 提交审核及发布 总结

1.1 初识微信小程序

1.1.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 提交审核及发布

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

总结

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