第1章微信小程序入门初识微信小程序小程序的开发体验开发环境搭建团队开发与项目上线学习目标了解微信小程序的概念及发展前景了解掌握微信小程序的
基本功能掌握微信小程序的目录结构掌握微信小程序开发工具的使用掌握1243掌握目录1.11.31.41.2初识微信小程序小程序开发体
验?点击查看本节相关知识点开发环境搭建?点击查看本节相关知识点?点击查看本节相关知识点团队开发与项目上线?点击查看本节相关知识点知
识架构1.1初识微信小程序1什么是微信小程序2微信小程序的账号3微信小程序的特点4微信小程序的发展前景知识架构1.2开发环境搭
建1注册微信公众号2安装微信开发者工具知识架构1.3小程序的开发体验1创建项目2开发者工具的使用3目录结构4项目设置5快捷键知识
架构1.4团队开发与项目上线1项目成员及权限2提交审核及发布1.1初识微信小程序1什么是微信小程序微信小程序：是一种不需
要安装即可使用的应用，用户只需扫一扫或搜一下即可打开应用，无需安装或卸载。1.1初识微信小程序1什么是微信小程序微信小程序
与原生App的关系图。关系特点：跨平台（支持iOS/Android）与微信紧密结合扫一扫或搜一搜可以获取小程序一键登录1.1初识
微信小程序1什么是微信小程序微信小程序覆盖的领域：1.1初识微信小程序1什么是微信小程序微信小程序存在的必要性：小程
序可以完成订票、打车、订餐等服务。服务号的功能薄弱，而小程序功能强大。小程序可以被附近用户搜索到。小程序可以结合公众平台来推广。1
.1初识微信小程序1什么是微信小程序微信小程序发展数据：1.1初识微信小程序1什么是微信小程序微信小程序热门应用案
例。1.1初识微信小程序1什么是微信小程序单击微信中的搜索按钮，输入关键词“美团外卖”。1.1初识微信小程序1什么是微
信小程序微信小程序的功能界定。支持的功能不支持的功能线下扫码小程序没有集中入口，没有应用商店挂起状态小程序没有订阅关系消息通知
小程序不能主动推动消息（可用模板消息）小程序和公众号的关联-小程序的搜索和历史列表-1.1初识微信小程序2微信小程序账号微
信公众平台账号分类：1.1初识微信小程序2微信小程序账号小程序与订阅号、服务号的区别：对比项小程序订阅号和服务号加载及组件
加载慢，专门提供组件加载快，使用风格统一且近乎原生的页面组件运营后台实时数据非实时数据接口数量丰富的接口，如文件操作、设备相关、动
画等接口数量比较少，只提供有限的功能，受限于浏览器1.1初识微信小程序3微信小程序的特点微信小程序与原生App、WebA
pp的区别：对比项小程序订阅号和服务号WebApp下载无需下载，通过扫码等方式获取从iOS和Android应用商店中下载无需下载
通过浏览器进入安装无需安装安装在手机中占用存储空间无需安装升级无需升级需要升级操作无需升级开发成本开发周期短开发周期长开发周期适中
开发周期开发成本低开发成本高开发成本适中1.1初识微信小程序4微信小程序的发展前景微信小程序迅速发展表现：1.2开发环境
搭建1注册微信公众号注册微信公众号的步骤：1.2开发环境搭建1注册微信公众号微信公众号展示图：1.2开发环境搭建1
注册微信公众号微信小程序公众号注册完成后，进入微信小程序管理后台：1.2开发环境搭建1注册微信公众号在“设置”-“开
发设置”中查看AppID，为小程序开发做准备：1.2开发环境搭建2安装微信开发者工具在微信公众平台网站中找到微信开发工具的
下载地址：1.2开发环境搭建2安装微信开发者工具Windows7操作系统为例，演示开发者工具的安装和使用，具体步骤如下：
1.2开发环境搭建2安装微信开发者工具安装向导：1.3小程序开发体验1创建项目首次微信扫码登录，登录成功后选择开发
模式：1.3小程序开发体验1创建项目单击“小程序”项目，就可以创建一个新的小程序项目：1.3小程序开发体验2开发者工具
的使用小程序项目创建成功后，就会进入到开发调试环境中。1.3小程序开发体验2开发者工具的使用1.3小程序开发体验2
开发者工具的使用通过菜单栏可以访问微信开发者工具的大部分功能：项目：用于新建项目或打开一个现有的项目。文件：用于新建文件、保存
文件或关闭文件。编辑：用于编辑代码，对代码进行格式化。工具：用于访问一些辅助工具。界面：用于控制界面中各部分的显示和隐藏。设置：用
于对外观、快捷键、编辑器等进行设置。微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。1.3小程序开发体验2开发者工
具的使用工具栏提供了一些常用功能的快捷按钮，具体解释如下：个人中心：位于工具栏最左侧第1个按钮，显示当前登录用户头像。模拟器、
编辑器和调试器：用于控制相应工具的显示和隐藏。云开发：开发者可以使用云开发来开发小程序、小游戏。云开发能力从基础库2.2.3开始支
持。1.3小程序开发体验2开发者工具的使用工具栏提供了一些常用功能的快捷按钮，具体解释如下：模式切换下拉菜单：用于在小程序
模式搜索动态页和插件模式之间切换。编译下拉菜单：用于切换编译模式，默认为普通编译。编译：编写小程序的代码后，需要编译才能运行。1.
3小程序开发体验2开发者工具的使用工具栏提供了一些常用功能的快捷按钮，具体解释如下：预览：单击预览按钮会生成一个二维码，使
用手机中的微信扫描二维码。真机调试：通过网络连接对手机上运行的小程序进行调试。切后台：用于模拟小程序在手机中切后台的效果。清缓存：
用于清除数据缓存、文件缓存等。1.3小程序开发体验2开发者工具的使用工具栏提供了一些常用功能的快捷按钮，具体解释如下：上传：用
于将代码上传到小程序管理后台。版本管理：用于通过Git对小程序进行版本管理。1.3小程序开发体验2开发者工具的使用模拟器用
于模拟手机环境，查看不同型号手机的运行效果：1.3小程序开发体验2开发者工具的使用编辑器：分为左右两栏：左栏用于浏览项目目
录结构，右栏用于编写代码。在左栏中单击某个文件：就可以在右栏中对该文件进行编辑。1.3小程序开发体验2开发者工具的使用调试
器类似于GoogleChrome浏览器中的开发者工具：Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。So
urces：源代码面板，可以查看或编辑源代码，并支持代码调试。Network：网络面板，记录网络请求信息，根据它可进行网络性能优化
。Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。1.3小程序开发体验2开发者工具的使用调试器类
似于GoogleChrome浏览器中的开发者工具：AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。Audi
ts：审计面板，用于对小程序进行体验评分。Sensor：传感器面板，用于模拟地理位置、重力感应。Storage：存储面板，用于查
看和管理本地数据缓存。Trace：跟踪面板，用于真机调试时跟踪调试信息。Wxml：Wxml面板，用于查看和调试WXML和WXSS。
1.3小程序开发体验3目录结构“HelloWorld”小程序的目录结构：路径说明project.config.json项
目配置文件app.js应用程序的逻辑文件app.json应用程序的配置文件app.wxss应用程序公共样式文件pages/存放页面
文件目录1.3小程序开发体验3目录结构“HelloWorld”小程序的目录结构：路径说明pages/index/存放in
dex页面的目录pages/index/index.jsIndex页面的逻辑文件pages/index/index.wxmlInd
ex页面的结构文件pages/index/index.wxssIndex页面的样式文件pages/logs/存放logs页面的目录
1.3小程序开发体验3目录结构“HelloWorld”小程序的目录结构：路径说明pages/logs/logs.jslo
gs页面的逻辑文件pages/logs/logs.jsonlogs页面的配置文件pages/logs/logs.wxmllogs页
面的结构文件pages/logs/logs.wxsslogs页面的样式文件utils/存放公共脚本文件的目录utils/utils
.js公共脚本文件，保存一些工具代码1.3小程序开发体验3目录结构单击头像即可进入到登录日志页，查看用户登录的历史记录：1
.3小程序开发体验3目录结构每个页面由wxml、wxss、js和json文件组成：1.3小程序开发体验3目录结构a
pp.json文件中的pages配置项用来生成index页面：index页面事件处理函数{"pages":["pages/in
dex/index","pages/logs/logs"],……}……//事件处理函数bindViewTap:functio
n(){wx.navigateTo({url:''../logs/logs''})},1.3小程序开发体验4项目设置在微
信开发者工具中，执行菜单栏中的“设置”-“项目设置”命令：1.3小程序开发体验4项目设置设置项目及含义：项目设置：对当前项
目进行设置。域名信息：小程序的安全域名信息，合法域名可在管理后台进行设置。调试基础库：选择基础库版本，用于在对应版本的微信客户端上
运行。1.3小程序开发体验4项目设置设置项目及含义：ES6转ES5：将JavaScript代码的ES6语法转换为ES5语法
。上传代码时样式自动补全：自动检测并补全缺失样式。上传代码时自动压缩：压缩代码，缩小代码体积。使用npm模块：在小程序中使用npm
安装第三方包。1.3小程序开发体验4项目设置设置项目及含义：启用自定义处理命令：指定编译前、预览前、上传前需要预处理的命令
。不校验合法域名、web-view（业务域名）、TlS版本以及HTTpS证书：在真实环境中会对这些信息进行校验。1.3小程序开发
体验5快捷键为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+/注释或取消注释Shift+
Home选择从行首到光标处Shift+End选择从光标到行尾Ctrl+Shift+l选中所有匹配Ctrl+Home移动到文件的开头
1.3小程序开发体验5快捷键为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+End移动
到文件的结尾Ctrl+I选中当前行Ctrl+U光标回退Ctrl+D选中匹配Ctrl+C复制（如果没有选中任何文字则复制一行）1.3
小程序开发体验5快捷键为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+V粘贴Alt+S
hift+Up向上复制一行Alt+Shift+Down向下复制一行Ctrl+Shift+[折叠代码块Ctrl+Shift+]展开代
码块1.3小程序开发体验5快捷键为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述Ctrl+Shi
ft+Enter在当前行上插入一行Alt+Up向上移动一行Alt+Down向下移动一行Ctrl+Shift+F全局搜索Alt+Sh
ift+F代码格式化1.3小程序开发体验5快捷键为了方便开发者的使用，微信开发者工具提供了大量的快捷键功能：快捷键功能描述
Ctrl+[在当前行上插入一行Ctrl+]向上移动一行Ctrl+S向下移动一行1.4团队开发与项目上线1项目成员及权限小程序的
开发团队的人员组织结构组成：1.4团队开发与项目上线1项目成员及权限开发小程序项目的一般工作流程：1.4团队开发与项目上线1
项目成员及权限小程序的管理后台开发团队中的不同身份的成员权限：权限说明开发者权限可使用小程序开发者工具及开发版小程序进行开发体验
者权限可使用体验版小程序登录可登录小程序管理后台，无需管理员确认数据分析使用小程序数据分析功能查看小程序数据开发管理小程序提交审核
、发布、回退开发设置设置小程序服务器域名、消息推送及扫描普通二维码打开小程序暂停服务设置暂停小程序上线服务1.4团队开发与项目上
线1项目成员及权限开发团队的成员权限分配：成员权限项目管理组成员拥有所有权限开发组成员开发者权限、体验者权限、数据分析、小程序插
件、腾讯云管理、接触关联公众号产品组成员体验者权限、数据分析测试组成员体验者权限1.4团队开发与项目上线1项目成员及权限小程序
的管理后台根据这个流程设计了小程序的版本管理：版本说明开发版本使用开发者工具，可将代码上传到开发版本中，开发版本只保留最新一份上传
的版本。单击提交审核，可将代码提交审核。开发版本的可删除，不影响线上版本和审核中版本的代码审核中版本只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本线上版本线上所有用户使用的代码版本。该版本代码在新版本代码发布后被覆盖更新1.4团队开发与项目上线1项目成员及权限预览小程序开发版本二维码：1.4团队开发与项目上线2提交审核及发布为了保证小程序的质量以及符合相关的规范，小程序的发布需要经过审核：本章总结本章主要讲解了什么是微信小程序，微信小程序的特点和发展前景，以及如何下载安装微信小程序开发者工具及简单使用，最后介绍了微信小程序的团队开发、项目管理以及审核发布。通过本章的学习，读者应对微信小程序的全貌有了一个整体的认识，能够动手完成小程序开发环境的搭建。 |
|
