1、微信小程序开发图解案例教程（附精讲视频）（第2版）刘刚刘刚 著著微信小程序介绍微信小程序介绍 微信小程序开发准备微信小程序开发准备 微信小程序开发工具的使用微信小程序开发工具的使用 沙场大练兵：沙场大练兵：HELLO WORLD的创建的创建 小结小结 第第1 1章章 认识认识微信小程序微信小程序1.1.11.1.1初识微信小程序初识微信小程序 微微信小程序（简称小程序）是一个基于去中心化而存在的平台，它信小程序（简称小程序）是一个基于去中心化而存在的平台，它没有聚合的入口没有聚合的入口，有，有多种进入方式多种进入方式。（1 1）在微信中的）在微信中的“发现发现”界面，可以找到小程序的入口，如图
2、界面，可以找到小程序的入口，如图1.11.1所所示。示。1.11.1微信小程序介绍微信小程序介绍图图1.1微信小程序入口微信小程序入口（2 2）在微信主界面下拉，会看到用过的微信小程序。）在微信主界面下拉，会看到用过的微信小程序。（3 3）给好友或者在群里分享小程序。）给好友或者在群里分享小程序。小小程序的界面和使用方法和程序的界面和使用方法和APPAPP类似，图类似，图1.21.2所示是几个已发布的所示是几个已发布的常用小程序常用小程序界面。界面。图图1.2常用微信小程序界面常用微信小程序界面 用户用户需要下载、安装才可以使用需要下载、安装才可以使用APPAPP，安装时还会考虑，安装时还会考
3、虑APPAPP占用多占用多大存储空间，哪些程序应该卸载掉以释放空间大存储空间，哪些程序应该卸载掉以释放空间。微微信小程序则无需安装，直接使用，不占用存储空间。用户在使信小程序则无需安装，直接使用，不占用存储空间。用户在使用微信小程序后，可以用完用微信小程序后，可以用完即走即走。微微信小程序看起来是程序，但它以完全不同于信小程序看起来是程序，但它以完全不同于APPAPP的状态出现，的状态出现，具有更灵活的应用组织形态。具有更灵活的应用组织形态。小小程序提供的功能如下。程序提供的功能如下。（1 1）分享页功能）分享页功能。（2 2）分享对话功能。）分享对话功能。（3 3）线下扫码进入微信小程序功能
4、）线下扫码进入微信小程序功能。（4 4）挂起状态功能）挂起状态功能。（5 5）消息通知功能）消息通知功能。（6 6）实时音视频录制播放功能。）实时音视频录制播放功能。1.1.21.1.2微信小程序的功能微信小程序的功能（7 7）硬件连接功能。）硬件连接功能。（8 8）小游戏功能）小游戏功能。（9 9）公众号关联功能）公众号关联功能。（1010）搜索查找功能。）搜索查找功能。（1111）识别二维码功能。）识别二维码功能。小小程序不提供的功能如下。程序不提供的功能如下。（1 1）小程序没有集中入口，没有应用商店。）小程序没有集中入口，没有应用商店。（2 2）小程序没有订阅关系，没有粉丝，只有访问量
5、。）小程序没有订阅关系，没有粉丝，只有访问量。（3 3）小程序不能推送消息。）小程序不能推送消息。从从上线开始，各种小程序就如雨后春笋般出现，小程序有哪些适上线开始，各种小程序就如雨后春笋般出现，小程序有哪些适合的使用场景呢？在发布小程序的合的使用场景呢？在发布小程序的时候时候，要选择服务类目，要选择服务类目。通过通过这些服务类目，我们能知道小程序的使用场景。服务类目分这些服务类目，我们能知道小程序的使用场景。服务类目分为个人服务类目和为个人服务类目和企业企业服务类目服务类目。个人个人服务类目针对以个人为开发主体的小程序，服务范围小；企服务类目针对以个人为开发主体的小程序，服务范围小；企业服务
6、类目针对以企业为业服务类目针对以企业为开发主体开发主体的小程序，服务范围大，如表的小程序，服务范围大，如表1.11.1、表表1.21.2所示。所示。1.1.31.1.3微信小程序的使用场景微信小程序的使用场景表表1.1个人服务类目个人服务类目续表续表表表1.2企业服务类目企业服务类目续表续表 原原生生APPAPP一般要同时开发一般要同时开发IOSIOS和和ANDROIDANDROID两版，而小程序只需要做两版，而小程序只需要做一版。毫无疑问，这点是小程序一版。毫无疑问，这点是小程序最大的最大的优势。从这个角度来看，小程优势。从这个角度来看，小程序是序是“跨平台跨平台”的。的。在在现阶段，开发一
7、套逻辑完整的应用程序，小程序的开发效率是现阶段，开发一套逻辑完整的应用程序，小程序的开发效率是低于低于APPAPP的。小程序独立出了一个的。小程序独立出了一个封闭的封闭的生态生态。小小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组件，以前的件，以前的ECHARTSECHARTS和和HIGHTCHARTSHIGHTCHARTS都无法使用。都无法使用。1.1.41.1.4微信小程序能取代微信小程序能取代APPAPP吗吗 小小程序不支持程序不支持WEBVIEWWEBVIEW，大量已被静态化好的，大量已被静态化好的HTMLHTML页面完全没
8、办法页面完全没办法在小程序上展示。在小程序上展示。小小程序想取代程序想取代ANDROIDANDROID和和IOSIOS还要走很长的路，是蓝海还是死海需要还要走很长的路，是蓝海还是死海需要时间来验证。时间来验证。小小程序经过腾讯公司的扶持和发展，已经吸引了很多企业使用，作程序经过腾讯公司的扶持和发展，已经吸引了很多企业使用，作为与为与IOSIOS、ANDROIDANDROID、公众号、公众号、网站并行网站并行的流量入口。的流量入口。微微信小程序从开始研发、正式发布到推广使用，经历了以下发展信小程序从开始研发、正式发布到推广使用，经历了以下发展时期。时期。（1 1）20162016年年1 1月月9
9、 9日，微信团队首次提出应用号的概念。日，微信团队首次提出应用号的概念。（2 2）20162016年年9 9月月2222日，微信公众平台对外发送小程序内测邀请，内测日，微信公众平台对外发送小程序内测邀请，内测名额名额200200个。个。（3 3）20162016年年1111月月3 3日，微信小程序对外公测，开发完成后可以提交审日，微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布。核，但公测期间不能发布。1.1.51.1.5微信小程序的发展历程微信小程序的发展历程（4 4）20162016年年1212月月2828日，张小龙在微信公开课中解答外界对微信小程序日，张小龙在微信公开课中解
10、答外界对微信小程序的几大疑惑，包括没有应用的几大疑惑，包括没有应用商店商店、没有推送消息等。、没有推送消息等。（5 5）20162016年年1212月月3030日，微信公众平台对外发布公告，上线的微信小程日，微信公众平台对外发布公告，上线的微信小程序最多可生成序最多可生成10?00010?000个带个带参数的参数的二维码。二维码。（6 6）20172017年年1 1月月9 9日，微信小程序正式上线。日，微信小程序正式上线。（7 7）20172017年年3 3月月2727日，个人开发者可以申请小程序开发和发布日，个人开发者可以申请小程序开发和发布。（8 8）20172017年年4 4月月1717
11、日，小程序代码包大小限制扩大到日，小程序代码包大小限制扩大到2MB2MB。（9 9）20172017年年4 4月月2020日，腾讯公司发布公众号关注小程序新规则。日，腾讯公司发布公众号关注小程序新规则。（1010）20172017年年5 5月月1212日，腾讯公司发布日，腾讯公司发布“小程序数据助手小程序数据助手”。（1111）20172017年年1212月月2828日，微信更新日，微信更新的的6.6.16.6.1版本版本开放了小游戏。开放了小游戏。（1212）20182018年年1 1月月1818日，微信提供了电子化的侵权投诉渠道，用户或者日，微信提供了电子化的侵权投诉渠道，用户或者企业可以
12、在微信公众平台以及企业可以在微信公众平台以及微信微信客户端入口进行投诉。客户端入口进行投诉。（1313）20182018年年1 1月月2525日，微信团队在日，微信团队在“微信公众平台微信公众平台”发布公告称发布公告称“从从移动应用分享至微信的小程序移动应用分享至微信的小程序页面页面，用户访问时支持打开来源应用，用户访问时支持打开来源应用”。（1414）20182018年年3 3月，微信正式宣布小程序广告组件启动内测，内容还月，微信正式宣布小程序广告组件启动内测，内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基
13、础能力，开发者可以通过小程序来赚取广告收入。更新基础能力，开发者可以通过小程序来赚取广告收入。微微信小程序给很多想做程序员的人提供了机会，因为它的开发门信小程序给很多想做程序员的人提供了机会，因为它的开发门槛很低，不需要太难的技术。学习微槛很低，不需要太难的技术。学习微信小信小程序开发，就可以成为一名程序开发，就可以成为一名“小程序员小程序员”。例如，设计师、学生、创业者、待业青年、。例如，设计师、学生、创业者、待业青年、“网虫网虫”、策划策划人员人员、编辑、草根站长等都可以转做程序员。、编辑、草根站长等都可以转做程序员。微微信小程序给企业提供了流量入口，企业可以通过小程序推广自信小程序给企业
14、提供了流量入口，企业可以通过小程序推广自己的产品。经过腾讯公司的大力扶持己的产品。经过腾讯公司的大力扶持，小，小程序已经成为各个企业非常程序已经成为各个企业非常看重的流量入口。看重的流量入口。1.1.61.1.6微信小程序带来的机会微信小程序带来的机会1.2.11.2.1基础技术准备基础技术准备 微微信小程序自定义了一套语言，称为信小程序自定义了一套语言，称为WXMLWXML（微信标（微信标记语言记语言），它），它的使用方法的使用方法类似于类似于HTMLHTML。另外，微信小程序还定义了自己的样式语言。另外，微信小程序还定义了自己的样式语言WXSSWXSS，兼容了，兼容了CSSCSS，并做，并
15、做了扩展了扩展；使用；使用JAVASCRIPTJAVASCRIPT来进行业务处理，来进行业务处理，兼容了大部分兼容了大部分JAVASCRIPTJAVASCRIPT功能，但仍有一些功能，但仍有一些功能功能无法使用，所以有一无法使用，所以有一定定HTMLHTML、CSSCSS、JAVASCRIPTJAVASCRIPT技术功底的人学习微信小程序开发会容易技术功底的人学习微信小程序开发会容易很多。很多。1.21.2微信小程序开发准备微信小程序开发准备STEP1STEP1：在在“微信公众平台微信公众平台”注册微信开发者账号。单击注册微信开发者账号。单击“立即注立即注册册”，在，在“注册注册”界面选择界面
16、选择“小程序小程序”，在，在“小程序注册小程序注册”界面根据界面根据提示填写相关信息完成注册提示填写相关信息完成注册。在在微信公众平台中，选择微信公众平台中，选择“小程序小程序”“”“小程序开发文档小程序开发文档”，如，如图图1.31.3（A A）所示，可以打开帮助文档界面，如图）所示，可以打开帮助文档界面，如图1.31.3（B B）所示。）所示。1.2.21.2.2开发准备开发准备图图1.3（a）开发文档开发文档图图1.3（b）帮助文档帮助文档 在在帮助文档里有介绍、设计、小程序开发、运营、数据、社区帮助文档里有介绍、设计、小程序开发、运营、数据、社区6 6个菜单，针对不同角色的用户提供了不
17、同内容的帮助文档个菜单，针对不同角色的用户提供了不同内容的帮助文档。开发开发人员经常会用到这里的简易教程、框架的使用、组件的介绍、人员经常会用到这里的简易教程、框架的使用、组件的介绍、APIAPI、工具以及腾讯云支持等内容、工具以及腾讯云支持等内容。STEP2STEP2：在文档工具里，根据自己的操作系统，下载微信小程序的开在文档工具里，根据自己的操作系统，下载微信小程序的开发工具，如图发工具，如图1.41.4所示。所示。图图1.4下载开发工具下载开发工具STEP3STEP3：按照提示完成开发工具的安装，安装按照提示完成开发工具的安装，安装完成后用微信扫描二维码登录。开发工具提供完成后用微信扫描
18、二维码登录。开发工具提供了小程序了小程序项目项目和公众号网页项目两个调试类型，和公众号网页项目两个调试类型，如图如图1.51.5所示。所示。图图1.5开发工具开发工具1.3.11.3.1创建项目创建项目 在在开发工具里单击开发工具里单击“小程序项目小程序项目”，进入到进入到“小程序项目小程序项目”界面，可以添加界面，可以添加一个一个新的新的项目。在这个界面里需要填写项目。在这个界面里需要填写项目目录、项目目录、APPIDAPPID和项目名称，如图和项目名称，如图1.61.6所示。所示。1.31.3微信小程序开发工具的使用微信小程序开发工具的使用图图1.6添加项目添加项目 获取获取微信小程序微信
19、小程序APPIDAPPID，需要在需要在“微信公众平台微信公众平台”中中登录登录1.2.21.2.2节中注册的账户，节中注册的账户，在在“设置设置”“开发设置开发设置”中，查看微信小程序中，查看微信小程序的的APPIDAPPID，如图如图1.71.7所示。所示。图图1.7获取获取AppID 输入输入APPIDAPPID后，在桌面上建立一个后，在桌面上建立一个“DEMO”DEMO”文件夹，并将其选择文件夹，并将其选择为项目目录，在项目名称中为项目目录，在项目名称中输入输入“DEMO”DEMO”，勾选，勾选“建立普通快速启动建立普通快速启动模板模板”选项（还可以选择选项（还可以选择“建立插件快速启
20、动模板建立插件快速启动模板”创建插件项目），创建插件项目），单击单击“确定确定”按钮即可，如图按钮即可，如图1.81.8所示。所示。图图1.8创建创建demo项目项目 创建创建项目后，进入到微信开发者工具界面，界面大致可以分为项目后，进入到微信开发者工具界面，界面大致可以分为6 6个区域：菜单栏区域，模拟器、个区域：菜单栏区域，模拟器、编辑器编辑器、调试器显示与隐藏区域，、调试器显示与隐藏区域，模拟器区域，编辑器区域，调试器区域，工具栏区域，如图模拟器区域，编辑器区域，调试器区域，工具栏区域，如图1.91.9所示。所示。1.3.21.3.2开发者工具界面开发者工具界面图1.9开发者工具界面 菜
21、单栏区域：包含项目、文件、编辑、工具、界面、设置、微信菜单栏区域：包含项目、文件、编辑、工具、界面、设置、微信开发者工具菜单。开发者工具菜单。模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试器区域的域、编辑器区域、调试器区域的显示显示与隐藏的便捷操作按钮。与隐藏的便捷操作按钮。模拟器模拟器区域：用来显示小程序项目的界面。区域：用来显示小程序项目的界面。编辑器编辑器区域：用来进行代码编写的区域。区域：用来进行代码编写的区域。调试器调试器区域：用来进行调试的区域。区域：用来进行调试的区域。工具栏工具栏区域：包含编译
22、、预览、远程调试、切后台、清缓存、上传、区域：包含编译、预览、远程调试、切后台、清缓存、上传、测试、腾讯云、详情工具栏按钮。测试、腾讯云、详情工具栏按钮。模拟器模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，面随着代码编写可以实时变化，方便小方便小程序的开发和调试。同时模拟器程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的终端设备终端设备，如，如IPHONE5IPHONE5、IPHONE6IPHONE6
23、等；设置模拟器区域的百分比大小；模等；设置模拟器区域的百分比大小；模拟设置拟设置WI-FIWI-FI、2G2G、3G3G等网络连接等网络连接情况情况，如图，如图1.101.10所示。所示。1.3.31.3.3模拟器区域模拟器区域图图1.10模拟器区域模拟器区域 编辑器编辑器区域分为两部分：一部分用区域分为两部分：一部分用来展示项目文件目录和文件结构；另一来展示项目文件目录和文件结构；另一部分用来进行代码编辑，部分用来进行代码编辑，如图如图1.111.11所示。所示。1.3.41.3.4编辑器区域编辑器区域图图1.11编辑器区域编辑器区域（1 1）在项目目录上单击鼠）在项目目录上单击鼠标右键可以
24、在硬盘打开文件标右键可以在硬盘打开文件目录，对文件目录重新命名，目录，对文件目录重新命名，删除目录，在该删除目录，在该目录目录下查找下查找指定内容、新建文件等，如指定内容、新建文件等，如图图1.121.12所示。所示。图图1.12文件操作文件操作（2 2）在代码编辑区域里编写代码，可以通过模拟器区域，实时预览）在代码编辑区域里编写代码，可以通过模拟器区域，实时预览编辑的情况。编辑的情况。修改修改WXSSWXSS、WXMLWXML文件文件，会刷新当前页面（，会刷新当前页面（PAGEPAGE），修改），修改JSJS文件或者文件或者JSONJSON文件，会重新编译小程序，如图文件，会重新编译小程序，
25、如图1.131.13所示。所示。图图1.13代码编写代码编写（3 3）在代码编写过程中，开发工具提供自动补全功能。在编辑）在代码编写过程中，开发工具提供自动补全功能。在编辑JSJS文件文件时，开发工具会帮助开发者补全时，开发工具会帮助开发者补全所有的所有的APIAPI，并给出相关的注释解释；，并给出相关的注释解释；编辑编辑WXMLWXML文件时，会帮助开发者直接写出相关的标签；编辑文件时，会帮助开发者直接写出相关的标签；编辑JSONJSON文件时文件时，会帮助开发者补全相关的配置，并给出实时的提示，如图会帮助开发者补全相关的配置，并给出实时的提示，如图1.141.14所示。所示。图图1.14自
26、动补全功能自动补全功能（4 4）开发工具提供自动保存功能，书写代码后，工具会自动帮助用）开发工具提供自动保存功能，书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修改改内容内容才会真实地写到硬盘上，并触发实时预览。才会真实地写到硬盘上，并触发实时预览。小小程序的常用调试工具有：程序的常用调试工具有：CONSOLECONSOLE、SOURCESSOURCES、NETWORKNETW
27、ORK、STORAGESTORAGE、APPDATAAPPDATA、WXMLWXML。除了除了这这6 6个个调试调试选项外，还有一些不常用的工具：选项外，还有一些不常用的工具：APPLICATIONAPPLICATION为记为记录加载的资源信息，录加载的资源信息，SECURITYSECURITY为安全和认证，为安全和认证，AUDITSAUDITS为性能为性能诊断和优化诊断和优化建议，建议，SENSORSENSOR用来选择模拟地理位置，用来选择模拟地理位置，TRACETRACE为性能监测数据，在这里不为性能监测数据，在这里不做详细介绍。做详细介绍。1.3.51.3.5调试器区域调试器区域（1 1
28、）CONSOLECONSOLE窗口用来显示小程序的错误输出信息和调试代码，除了窗口用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息，还可以进行可以输出错误信息，还可以进行代码代码编写和调试，如图编写和调试，如图1.151.15所示。所示。图图1.15Console功能功能（2 2）SOURCESSOURCES窗口用于显示当前项目的脚本文件，窗口用于显示当前项目的脚本文件，在在SOURCESSOURCES中开发中开发者看到的文件是经过处理之后的者看到的文件是经过处理之后的脚本脚本文件，开发者的代码都会被包裹文件，开发者的代码都会被包裹在在DEFINEDEFINE函数函数中，并且中，并
29、且对于对于PAGEPAGE代码，有代码，有REQUIREREQUIRE的的主动调用，如图主动调用，如图1.161.16所所示。示。图图1.16Sources功能功能（3 3）NETWORKNETWORK用来观察发送的请求和调用文件的信息，包括文件名称、用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等，如图路径、大小、调用的状态、时间等，如图1.171.17所示。所示。图图1.17Network功能功能（4 4）STORAGESTORAGE窗口用于显示当前项目，使用窗口用于显示当前项目，使用WX.SETSTORAGEWX.SETSTORAGE或者或者WX.SETS
30、TORAGESYNCWX.SETSTORAGESYNC后后的数据存储的数据存储情况情况，如图，如图1.181.18所示。所示。图图1.18Storage功能功能（5 5）APPDATAAPPDATA窗口用于显示当前项目当前时刻的具体数据，实时地反窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况。用户可以在馈项目数据情况。用户可以在此处编辑此处编辑数据，并及时地反馈到界面上，数据，并及时地反馈到界面上，如图如图1.191.19所示。所示。图图1.19AppData功能功能（6 6）WXMLWXML窗口用于帮助开发者窗口用于帮助开发者开发开发WXMLWXML转化转化后的界面。在这里可
31、以后的界面。在这里可以看到真实的页面结构以及结构对应看到真实的页面结构以及结构对应的的WXSSWXSS属性属性，同时可以修改对应，同时可以修改对应的的WXSSWXSS属性属性，如图，如图1.201.20所示。所示。图图1.20Wxml功能功能1 1编译操作编译操作 我们我们可以通过编译按钮或者使用可以通过编译按钮或者使用快捷键快捷键CTRL+BCTRL+B编译当前小程序的编译当前小程序的代码，并自动刷新模拟器代码，并自动刷新模拟器。为了方便调试为了方便调试，开发者还可以添加或选择已有的自定义编译条件，开发者还可以添加或选择已有的自定义编译条件进行编译和代码预览，如图进行编译和代码预览，如图1.
32、211.21所示。所示。1.3.61.3.6工具栏区域工具栏区域图1.21编译2 2预览预览 单击单击预览按钮，可以将小预览按钮，可以将小程序上传，生成二维码，通过程序上传，生成二维码，通过扫描二维码可以在手机上预览扫描二维码可以在手机上预览小程序，如图小程序，如图1.221.22所所示。示。图图1.22预览（本图中二维码只是示意，预览（本图中二维码只是示意，请扫描自己操作生成的二维码）请扫描自己操作生成的二维码）3 3前后台切换前后台切换 工具栏工具栏中的前后台切换按钮可以帮助开发者模拟一些客户端的操中的前后台切换按钮可以帮助开发者模拟一些客户端的操作环境。例如，在操作微信小程序过程中，突然
33、进来电话，如果接电作环境。例如，在操作微信小程序过程中，突然进来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台进入到进入到前台前台，如图，如图1.231.23所示。所示。图图1.23前后台切换前后台切换4 4清缓存清缓存 清清缓存包括清除数据缓存、清除文件缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除除登录状态、全部清除功能功能，如图，如图1.241.24所所示。示。图图1.24清缓存清缓存5 5上传、测试上传、测试 小小程序开发完
34、成后，需要上传到腾讯服务器进行测试，然后可以程序开发完成后，需要上传到腾讯服务器进行测试，然后可以获取测试报告，根据测试报告进行获取测试报告，根据测试报告进行相应的相应的修改，如图修改，如图1.251.25、图、图1.261.26所所示。示。图图1.25上传上传图图1.26测试报告申请测试报告申请1 1格式调整快捷键格式调整快捷键CTRL+SCTRL+S：保存文件。：保存文件。CTRL+CTRL+，CTRLCTRL+：代码行缩进。：代码行缩进。CTRL+SHIFTCTRL+SHIFT+，CTRL+SHIFTCTRL+SHIFT+：折叠打开代码块：折叠打开代码块。CTRL+CCTRL+C，CTR
35、L+VCTRL+V：复制粘贴，如果没有选中任何文字则复制粘贴一行。：复制粘贴，如果没有选中任何文字则复制粘贴一行。SHIFT+ALT+FSHIFT+ALT+F：代码格式化。：代码格式化。1.3.71.3.7常用快捷键常用快捷键ALT+UPALT+UP，ALT+DOWNALT+DOWN：上下移动一行。：上下移动一行。SHIFT+ALT+UPSHIFT+ALT+UP，SHIFT+ALT+DOWNSHIFT+ALT+DOWN：向上向下复制一行。：向上向下复制一行。CTRL+SHIFT+ENTERCTRL+SHIFT+ENTER：在当前行上方插入一行。：在当前行上方插入一行。CTRL+SHIFT+FC
36、TRL+SHIFT+F：全局搜索。：全局搜索。CTRL+BCTRL+B：可以编译当前代码，并自动刷新模拟器。：可以编译当前代码，并自动刷新模拟器。2 2光标相关快捷键光标相关快捷键CTRL+ENDCTRL+END：移动到文件结尾。：移动到文件结尾。CTRL+HOMECTRL+HOME：移动到文件开头。：移动到文件开头。CTRL+ICTRL+I：选中当前行。：选中当前行。SHIFT+ENDSHIFT+END：选择从光标到行尾。：选择从光标到行尾。SHIFT+HOMESHIFT+HOME：选择从行首到光标处。：选择从行首到光标处。CTRL+SHIFT+LCTRL+SHIFT+L：选中所有匹配。：选
37、中所有匹配。CTRL+DCTRL+D：选中匹配。：选中匹配。CTRL+UCTRL+U：光标回退。：光标回退。3 3界面相关快捷键界面相关快捷键CTRL+CTRL+：隐藏侧边栏。：隐藏侧边栏。CTRL+MCTRL+M：打开或者隐藏模拟器。：打开或者隐藏模拟器。在在创建项目之后，开发工具会添加默创建项目之后，开发工具会添加默认的目录和页面，在默认的页面上，可以认的目录和页面，在默认的页面上，可以看到有看到有“HELLO WORLDHELLO WORLD”文字，如图文字，如图1.271.27所示。所示。1.41.4沙场大练兵：沙场大练兵：Hello WorldHello World的创建的创建图图1
38、.27Hello World界面界面 下面下面，我们分析一下，我们分析一下HELLO WORLDHELLO WORLD是怎么创建出来的。是怎么创建出来的。（1 1）在）在PAGES/INDEX/INDEX.JSPAGES/INDEX/INDEX.JS文件里，文件里，PAGEPAGE的的DATADATA中提供数据源中提供数据源MOTTOMOTTO，DATADATA的数据可以动态地绑定的数据可以动态地绑定到到WXMLWXML页面中，如图页面中，如图1.281.28所示。所示。图图1.28motto数据源数据源（2 2）在）在PAGES/INDEX/PAGES/INDEX/INDEX.WXMLIND
39、EX.WXML文件里，通过双大括号（文件里，通过双大括号（）的）的方式，将方式，将MOTTOMOTTO绑定到页面里绑定到页面里，MOTTOMOTTO对应的值就可以在页面里显示出对应的值就可以在页面里显示出来，如图来，如图1.291.29所示。所示。图图1.29绑定绑定motto（3 3）在）在PAGES/INDEX/PAGES/INDEX/INDEX.WXSSINDEX.WXSS文件里，通过文件里，通过CLASSCLASS的方式给的方式给HELLO HELLO WORLDWORLD添加样式，距顶部的添加样式，距顶部的高度高度200PX200PX，如图，如图1.301.30所示。所示。图图1.3
40、0添加样式添加样式 本章本章内容主要认识微信小程序和开发工具的使用，重点掌握以下内容主要认识微信小程序和开发工具的使用，重点掌握以下内容内容。（1 1）做好微信小程序开发的准备工作，包括基础技术准备和开发账）做好微信小程序开发的准备工作，包括基础技术准备和开发账号、文档、开发工具的准备。号、文档、开发工具的准备。（2 2）学会微信小程序开发工具的使用，会添加项目、编辑代码、调）学会微信小程序开发工具的使用，会添加项目、编辑代码、调试代码等。试代码等。（3 3）记住微信小程序常用的一些快捷键，以提高开发效率。）记住微信小程序常用的一些快捷键，以提高开发效率。（4 4）理解微信小程序的开发流程。）理解微信小程序的开发流程。1.51.5小结小结
