微信小程序开发图解案例教程课件 第1章 认识微信小程序

第1章认识微信小程序2016年1月9日，腾讯公司启动了微信小程序产品的研发，并于2017年1月9日正式发布微信小程序产品。据腾讯披露，微信小程序日活账户数屡创新高。截至2025年5月，微信小程序用户规模已达到9亿多，月人均使用时长增长至1.7小时，月人均使用次数接近70次。不同于微信公众号，微信小程序被赋予了应用程序的能力，是一种无须安装即可使用的应用，实现了应用“触手可及”的梦想。用户扫一扫相应二维码或者进行搜索即可打开微信小程序。它也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。有了它，应用将无处不在，随时随地可用，无须卸载。经过几年的发展，如今各类微信小程序已呈井喷之势。各行各业的微信小程序纷纷投入运营，不仅成为各大企业引流的入口，更显著降低了企业开发原生App的高昂成本。下面就让我们一起来认识一下微信小程序吧！本章导读Thechapter’sintroduction目录导航1.1微信小程序介绍1.2微信小程序开发准备1.3微信小程序开发者工具的使用1.4沙场大练兵：HelloWorld的创建1.5小结1.1.1初识微信小程序微信小程序（简称小程序）是微信生态中的一种轻量级应用形态，它重塑了用户获取服务的路径：无须下载安装，在微信里通过扫码或者搜索小程序即点即用，真正实现“触手可及”的服务体验。腾讯公司推出了4种产品，分别有不同的功能。服务号：服务号为企业和组织提供强大的业务服务与用户管理能力，主要偏向于服务类交互，也就是我们常说的公众号，可以实现微信支付、定制菜单、多客服等功能。订阅号：为个人、媒体、企业、政府或其他组织提供的一种新的信息传播方式，主要功能是在微信侧给用户传达信息。企业微信（原企业号）：腾讯推出的专业办公管理工具，延续了微信一致的沟通体验，提供丰富、免费的办公应用，并与微信小程序、微信支付等无缝打通，助力高效协同办公。微信小程序：它是一种典型的开放产品，开发者可以快速构建并开发自己的微信小程序。1.1.2微信小程序的功能和特点分享功能（页面分享、分享对话、分享数据）。搜索和扫码功能。支付功能。媒体功能（相机和相册功能、音视频相关功能）。小游戏功能位置和地图功能。画布功能。网络和文件功能。设备功能（蓝牙、NFC、Wi-Fi等）。AI功能（人脸识别、AI推理等）。云开发功能。公众号和小程序关联功能。1.微信小程序的功能1.1.2微信小程序的功能和特点2．微信小程序的特点01OPTION02OPTION03OPTION04OPTION方便快捷：可以在微信内部直接使用，而无须下载、安装。轻量化：微信小程序相对于App来说更轻量化，占用空间更小，对手机性能和内存要求低。功能丰富：提供基本的UI组件、事件系统、网络请求和数据存储等常用功能，还提供了在线购物、点餐、出行、社交等各种需求功能。支付便捷：微信小程序可以和微信支付无缝对接。05OPTION06OPTION跨平台：支持在不同的平台上运行，便于用户使用。数据安全性高：采用了严格的安全机制，包括多层权限认证、加密传输等，保障用户数据的安全。1.1.3微信小程序的使用场景从微信小程序上线开始，各种小程序如雨后春笋般出现。那么小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。服务类目分为个人主体微信小程序开放的服务类目（服务类目相对少一些）、非个人主体微信小程序开放的服务类目（服务类目相对多一些）、境外主体微信小程序开放的服务类目。1.1.3微信小程序的使用场景

微信小程序是一个基于“去中心化”而存在的平台，它没有聚合的入口，其核心场景入口不断丰富，部分场景入口如下。微信群聊入口。微信聊天主页面下拉入口。App分享消息卡片。发现栏小程序主入口。发现栏小程序主入口搜索框的搜索结果页。单人聊天会话中的小程序消息卡片。小程序打开小程序。扫描二维码。小程序模板消息。公众号自定义菜单。公众号文章。公众号模板消息。微信钱包。从另一个小程序返回。长按图片识别小程序码。顶部搜索框搜索使用过的小程序列表。扫描小程序码。小程序profile页。顶部搜索框的搜索结果页。我的卡包。1.1.4微信小程序与App的关系除了微信小程序，企业巨头也纷纷推出小程序。例如，阿里巴巴公司推出了支付宝小程序，支付宝小程序整合了阿里巴巴丰富的运营工具，凭借强大的开放能力，帮助B端商户更好地运营；百度公司推出了百度智能小程序，凭借“搜索+信息流+AI”三驾马车的强力拉动，让其有能力扮演好百度实现新连接的“管道工”角色；抖音平台也推出了抖音小程序，抖音丰富的短视频内容和聚集红人的超强能力，天然契合游戏、泛娱乐和电商类小程序，抖音基于用户兴趣标签的内容推荐机制，又能保证这类小程序的分发和变现效率。原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小程序最大的优势。从这个角度来看，小程序是“跨平台”的。小程序经过几年的发展，逐渐成为与iOS、Android、公众号、网站并行的流量入口。各个企业在发布自己的产品的时候，往往会发布iOS版、Android版、H5版、网站PC版、公众号版、微信小程序版，都是作为产品流量的入口，并没有出现谁取代谁的现象。但是小程序可以快速构建出一个产品应用，门槛低、成本低、发布快是各大企业制作小程序的原因。目录导航1.1微信小程序介绍1.2微信小程序开发准备1.3微信小程序开发者工具的使用1.4沙场大练兵：HelloWorld的创建1.5小结1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML微信标记语言，它的使用方法类似于HTML语言。另外，微信小程序还定义了自己的样式语言WXSS，它兼容CSS样式，并在CSS样式的基础上做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用。所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。1.2.2开发准备在微信公众平台中，选择“小程序”→“小程序开发文档”，如图所示，可以打开帮助文档界面，如图所示。（1）在“微信公众平台”注册微信开发者账号。1.2.2开发准备根据自己的操作系统，下载微信小程序的开发工具，如图所示（因为开发工具版本更新很快，实际版本以具体情况为准）。（2）在文档工具里1.2.2开发准备安装完成后用微信扫描二维码登录。开发者工具提供了小程序、小游戏、多端应用、代码片段、公众号网页及其他选项，来辅助开发者创建项目，如图所示。（3）按照提示完成开发工具的安装目录导航1.1微信小程序介绍1.2微信小程序开发准备1.3微信小程序开发者工具的使用1.4沙场大练兵：HelloWorld的创建1.5小结1.3.1创建项目在开发工具里单击小程序图标，进入“创建小程序”界面，可以添加一个新的项目。在这个界面里需要填写项目名称、目录、AppID，如图所示。1.3.1创建项目获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2小节中注册的账户，在“开发管理”→“开发设置”中，查看微信小程序的AppID，如图所示。注意：不可直接使用服务号或订阅号的AppID，只能使用微信小程序的AppID。注意：如果要以非管理员微信号在手机上体验该小程序，还需要绑定开发者。即在“用户身份”→“开发者”模块，绑定需要体验该小程序的微信号。1.3.1创建项目输入AppID后，建立一个“demo”文件夹，并选择为项目目录，项目名称输入“demo”，开发模式选择“小程序”，后端服务可以选择“微信云开发”或者“不使用云服务”，设置完成后单击“确定”按钮，如图所示。1.3.2开发者工具界面创建项目后，进入微信开发者工具界面，如图所示。开发者工具界面大致可以分为5个区域：菜单栏区域、模拟器区域、编辑器区域、调试器区域和工具栏区域。1.3.3菜单栏区域菜单栏区域中的菜单集成了软件的一些常规操作和功能使用。“项目”菜单：包括新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目、关闭当前项目。这些命令都是对小程序项目或者代码片段进行管理使用的。“文件”菜单：包括新建文件、保存、保存所有、关闭文件。这些命令可以新建文件、关闭文件、保存文件。“编辑”菜单：是对代码进行管理的一个菜单，具有格式化代码等功能。“工具”菜单：包括编译、刷新、预览、清除缓存等功能。“界面”菜单：用于显示或者隐藏工具栏、模拟器、编辑器、目录树、调试器区域。“设置”菜单：包括通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。“帮助”菜单：包括文档搜索、进入开发者社区、打开开发者文档等。“微信开发者工具”菜单：包括对开发者工具进行升级、回退、退出等功能。1.3.4模拟器区域模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，方便小程序的开发和调试。在模拟器区域，可以模拟小程序在各个终端设备上的操作效果，也可以设置小程序运行的终端设备，还可以设置模拟器区域的百分比和Wi-Fi、2G、3G、4G、5G等网络情况，如图所示。1.3.5编辑器区域编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构，另一部分用来进行代码编辑，如下左图所示。在项目目录上单击鼠标右键可以新建文件、Page、Component或文件夹，也可以重命名或删除目录，还可以在目录下查找指定内容，如右图所示。01OPTION编辑器区域快捷操作1.3.5编辑器区域在代码编辑区域里编写代码，可以通过模拟器区域实时预览编辑的情况，如右图所示。修改WXSS、WXML文件，会刷新当前页面；修改TS文件或者JSON文件，会重新编译小程序。02OPTION1.3.5编辑器区域在代码编写过程中，开发工具提供自动补全功能，如右图所示。03OPTION开发工具提供自动保存功能。自动保存当前的代码编辑状态，直接关闭工具或者切换到别的项目并不会丢失已经编辑的文件内容。04OPTION1.3.6调试器区域用于帮助开发者开发Wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的WXSS属性，同时可以修改对应的WXSS属性，如图所示。（1）“Wxml”窗口小程序的常用调试工具有Wxml、Console、Sources、Network、AppData和Storage。用来显示小程序的错误输出信息和调试代码，还可以进行代码编写和调试，如图所示。（2）“Console”窗口1.3.6调试器区域（3）“Sources”窗口在Sources中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，有require的主动调用，如图所示。用来观察发送的请求和调用文件的信息，包括文件名称、调用的状态、大小、时间等，如图所示。（4）“Network”窗口1.3.6调试器区域用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况，如图所示。（6）“Storage”窗口用于实时反馈当前项目的数据情况。开发者可以在此编辑数据，并将其及时地反馈到页面上，如图所示。（5）“AppData”窗口1.3.7工具栏区域这3个按钮可以控制模拟器、编辑器、调试器区域的显示或者隐藏。（1）“模拟器”“编辑器”“调试器”按钮用于查看模拟器区域中指定区域代码的组织结构、组件使用、属性等。（2）“可视化”按钮通过该按钮可以进入小程序云开发控制台，进行小程序云开发。（3）“云开发”按钮第一种小程序模式，用于正常开发小程序项目；第二种插件模式，用于开发小程序插件；第三种多端应用模式，开发者可以一次编码，分别将其编译为小程序、Android应用以及iOS应用。（4）小程序模式1.3.7工具栏区域通过“编译”按钮或者按“Ctrl+B”组合键，编译当前代码，并自动刷新模拟器，同时鉴于开发者需调试不同场景中具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览，如图所示。（5）编译操作1.3.7工具栏区域可以将小程序上传并生成二维码，扫描该二维码可以在手机上预览小程序，如图所示。（6）“预览”按钮允许在真机上调试小程序。通过该按钮可以在发布之前查看小程序在真机上的运行效果，如图所示。（7）“真机调试”按钮预览手机页面1.3.7工具栏区域通过该按钮可进行清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除等操作，如图所示。（8）“清缓存”按钮开发完成后需要上传到腾讯服务器进行测试，如图所示。在手机上可以预览开发版本的小程序。（9）“上传”按钮可以将小程序代码上传到Git进行版本管理和多人协作开发。（10）“版本管理”按钮查看开发者工具基本配置信息、性能分析信息、本地设置信息等。（11）“详情”按钮目录导航1.1微信小程序介绍1.2微信小程序开发准备1.3微信小程序开发者工具的使用1.4沙场大练兵：HelloWorld的创建1.5小结1.4沙场大练兵：HelloWorld的创建在创建项目之后，开发工具会添加默认的目录和页面。在默认的页面上，可以看到有“HelloWorld”