微信小程序入门教程

1. 小程序概述

1.1 小程序与普通网页开发的区别

（1）运行环境不同：网页运行在浏览器环境中，小程序运行在微信环境中
（2）API 不同：
①由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。
②但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付
（3）开发模式不同
①网页的开发模式：浏览器 + 代码编辑器
②小程序有自己的一套标准开发模式：
a.申请小程序开发账号(到官网https://mp.weixin.qq.com/申请)
b.安装小程序开发者工具（推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html）
c.创建和配置小程序项目

1.2 新建小程序页面

（1）只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，如图所示：

1.3 修改项目首页

（1）只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染，如图所示：

2.小程序代码的构成

（1）pages 用来存放所有小程序的页面
（2）utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
（3）app.js 小程序项目的入口文件
（4）app.json 小程序项目的全局配置文件，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等
（5）app.wxss 小程序项目的全局样式文件
（6）project.config.json 项目的配置文件，用来记录我们对小程序开发工具所做的个性化配置
（7）sitemap.json 用来配置小程序及其页面是否允许被微信索引

2.1 小程序页面的组成部分

（1）小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

（2）其中，每个页面由 4 个基本文件组成，它们分别是：
①.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
②.json 文件（当前页面的配置文件，配置窗口的外观、表现等）
③.wxml 文件（页面的模板结构文件）
④.wxss 文件（当前页面的样式表文件）

2.2 小程序代码的构成-JSON 配置文件

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。小程序项目中有 4 种 json 配置文件，分别是：
a.项目根目录中的 app.json 配置文件
b.项目根目录中的 project.config.json 配置文件
c.项目根目录中的 sitemap.json 配置文件
d.每个页面文件夹中的 .json 配置文件

（1）app.json：是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。Demo 项目里边的 app.json 配置内容如下：
①pages：用来记录当前小程序所有页面的路径
②window：全局定义小程序所有页面的背景色、文字颜色等
③style：全局定义小程序组件所使用的样式版本
④sitemapLocation：用来指明 sitemap.json 的位置
（2）project.config.json 文件：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置
①setting：中保存了编译相关的配置
②projectname： 中保存的是项目名称
③appid：中保存的是小程序的账号 ID
（3）sitemap.json 文件：
①微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。
②当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
③注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
（4）页面的 .json 配置文件
小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。例如：

2.4 小程序代码的构成 - WXML 模板

（1）WXML 和 HTML 的区别
①标签名称不同
HTML （div, span, img, a）
WXML（view, text, image, navigator）
②属性节点不同

<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

③提供了类似于 Vue 中的模板语法
数据绑定、列表渲染、条件渲染

2.5 小程序代码的构成 - WXSS 样式

（1）WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。
（2）WXSS 和 CSS 的区别
①新增了 rpx 尺寸单位
a.CSS 中需要手动进行像素单位换算，例如 rem
b.WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
②提供了全局的样式和局部样式
a.项目根目录中的 app.wxss 会作用于所有小程序页面
b.局部页面的 .wxss 样式仅对当前页面生效
③WXSS 仅支持部分 CSS 选择器：.class 和 #id、element、并集选择器、后代选择器、
::after 和 ::before 等伪类选择器

2.6 小程序代码的构成 - JS 逻辑交互

（1）一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等等。
（2）小程序中的 JS 文件分为三大类，分别是：
①app.js：是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序
②页面的 .js 文件：是页面的入口文件，通过调用 Page() 函数来创建并运行页面
③普通的 .js 文件：是普通的功能模块文件，用来封装公共的函数或属性供页面使用

3.小程序的宿主环境

（1）手机微信是小程序的宿主环境
（2）小程序宿主环境包含的内容
①通信模型
②运行机制
③组件
④API

3.1 小程序的宿主环境 - 通信模型

（1）小程序中通信的主体是渲染层和逻辑层，其中：
①WXML 模板和 WXSS 样式工作在渲染层
②JS 脚本工作在逻辑层
（2）小程序中的通信模型分为两部分：
①渲染层和逻辑层之间的通信：由微信客户端进行转发
②逻辑层和第三方服务器之间的通信：由微信客户端进行转发

3.2 小程序的宿主环境 - 运行机制

（1）小程序启动的过程
①把小程序的代码包下载到本地
②解析 app.json 全局配置文件
③执行 app.js 小程序入口文件，调用 App() 创建小程序实例
④渲染小程序首页
⑤小程序启动完成
（2）页面渲染的过程
①加载解析页面的 .json 配置文件
②加载页面的 .wxml 模板和 .wxss 样式
③执行页面的 .js 文件，调用 Page() 创建页面实例
④页面渲染完成

3.3 小程序的宿主环境 - 组件

3.3.1 视图容器类组件

（1）view
①普通视图区域
②类似于 HTML 中的 div，是一个块级元素
③常用来实现页面的布局效果
（2）scroll-view
①可滚动的视图区域
②常用来实现滚动列表效果

（3）轮播图容器组件swiper和轮播图 item 组件 swiper-item
①实现如图的轮播图效果：

②swiper 组件的常用属性

3.3.2 基础内容组件

（1）text：文本组件，类似于 HTML 中的 span 标签，是一个行内元素。

• 可以通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：

（2）rich-text：富文本组件，支持把 HTML 字符串渲染为 WXML 结构

• 通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：
  

3.3.3 其他常用组件

（1）button
①按钮组件
②功能比 HTML 中的 button 按钮丰富
③通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

（2）image
①图片组件
②image 组件默认宽度约 300px、高度约 240px
③image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

（3）navigator
①页面导航组件
②类似于 HTML 中的 a 链接

3.3.4 小程序的宿主环境-API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。小程序官方把 API 分为了如下 3 大类：
（1）事件监听 API
①特点：以 on 开头，用来监听某些事件的触发
②举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
（2）同步 API
①特点1：以 Sync 结尾的 API 都是同步 API
②特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
③举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
（3）异步 API
①特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
②举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

4.WXML模板语法

4.1 WXML 模板语法 - 数据绑定

（1）数据绑定的基本原则
①在 data 中定义数据

②在 WXML 中使用数据

（2）Mustache 语法的主要应用场景如下：
①绑定内容

②绑定属性

③运算（三元运算、算术运算等）

4.2 WXML 模板语法 - 事件绑定

（1）什么是事件：事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

（2）事件对象的属性列表

（3）target 和 currentTarget 的区别
①target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：

②点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。此时，对于外层的 view 来说：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

4.2.1 小程序中常用的事件

（1）bindtap：可以为组件绑定 tap 触摸事件，语法如下：

（2）在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

（2）事件传参：可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

①info 会被解析为参数的名字
②数值 2 会被解析为参数的值
③在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

（3）bindinput：在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

4.3 WXML 模板语法 - 条件渲染

（1）wx:if

（2）结合 <block> 使用 wx:if
①如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block> 标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性，示例如下：

②注意： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
（3）hidden
在小程序中，直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏：

（4）wx:if 与 hidden 的对比
①运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
②使用建议
频繁切换时，建议使用 hidden
控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

4.4 WXML 模板语法 - 列表渲染

（1）wx:for
①可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

②默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
③手动指定索引和当前项的变量名

（2）wx:key 的使用
类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下：

5.WXSS 模板样式

（1）WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。
（2）WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：
①rpx 尺寸单位
②@import 样式导入

5.1 rpx 尺寸单位

（1）rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
①在较小的设备上，1rpx 所代表的宽度较小
②在较大的设备上，1rpx 所代表的宽度较大

5.2 @import 样式导入

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

5.3 全局样式和局部样式

（1）全局样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
（2）局部样式：在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

6.全局配置(app.json)

（1）小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
①pages：记录当前小程序所有页面的存放路径
②window：全局设置小程序窗口的外观
③tabBar：设置小程序底部的 tabBar 效果
④style：是否启用新版的组件样式

（2）小程序窗口的组成部分

6.1 window 节点常用的配置项

6.2 tabBar

（1）什么是 tabBar
①tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
a.底部 tabBar
b.顶部 tabBar
②注意：
tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时，不显示 icon，只显示文本
（2）tabBar 的 6 个组成部分

（3）tabBar 节点的配置项

（4）list中每个 tab 项的配置选项

（5）实例
①通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：

其中，home 是首页，message 是消息页面，contact 是联系我们页面。

②打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点
③tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象
④在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

• pagePath 指定当前 tab 对应的页面路径【必填】
• text 指定当前 tab 上按钮的文字【必填】
• iconPath 指定当前 tab 未选中时候的图片路径【可选】
• selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

7.页面配置

（1）页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
（2）页面配置和全局配置的关系
①小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
②注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
（3）页面配置中常用的配置项

8.网络数据请求

（1）出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
①只能请求 HTTPS 类型的接口
②必须将接口的域名添加到信任列表中

（2）发起 GET 请求

（3）发起 POST 请求

（4）跳过 request 合法域名校验
①如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

②注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！
（5）跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。
（6）在页面刚加载时请求数据
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在当前页面的.js文件中 onLoad 事件调用获取数据的函数，示例代码如下：

7.视图与逻辑

7.1 页面导航

小程序中实现页面导航的两种方式
（1）声明式导航
①在页面上声明一个 <navigator> 导航组件
②通过点击 <navigator> 组件实现页面跳转
（2）编程式导航
调用小程序的导航 API，实现页面的跳转

7.1.1 页面导航 - 声明式导航

（1）导航到 tabBar 页面
①tabBar 页面指的是被配置为 tabBar 的页面。
②在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 switchTab

③示例代码如下：

（2）导航到非 tabBar 页面
①非 tabBar 页面指的是没有被配置为 tabBar 的页面。
②在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 navigate

③示例代码如下：

④注意：为了简便，在导航到非 tabBar 页面时，open-type=“navigate” 属性可以省略。
（3）后退导航
①如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

• open-type 的值必须是 navigateBack，表示要进行后退导航
• delta 的值必须是数字，表示要后退的层级

②示例代码如下：

③注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。
④tabBar 页面是不能实现后退的效果的，只能在非tabBar 页面实现后退

7.1.2 页面导航 - 编程式导航

（1）导航到 tabBar 页面
①调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：

②示例代码


（2）导航到非 tabBar 页面
①调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：

②示例

（3）后退导航
①调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

②示例：

7.1.3 页面导航 - 导航传参

（1）声明式导航传参
①navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用 ? 分隔
• 参数键与参数值用 = 相连
• 不同参数用 & 分隔

②代码示例如下：

（2）编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

（3）在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：

7.2 页面事件

7.2.1 页面事件 - 下拉刷新事件

（1）下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
（2）启用下拉刷新有两种方式：
①全局开启下拉刷新
在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
②局部开启下拉刷新
在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
③在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
（3）配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：
①backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
②backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
（4）监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1，在触发页面的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下：

（5）当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：

7.2.2 页面事件 - 上拉触底事件

（1）上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。一般用于数据分页操作。把页面做的足够长，就可以实现上拉触底效果了。
（2）在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

（3）配置上拉触底距离
①上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
②可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
③小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

8.生命周期

（1）我们可以把每个小程序运行的过程，概括为生命周期：
①小程序的启动，表示生命周期的开始
②小程序的关闭，表示生命周期的结束
中间小程序运行的过程，就是小程序的生命周期
（2）在小程序中，生命周期分为两类，分别是：
①应用生命周期
特指小程序从启动 -> 运行 -> 销毁的过程
②页面生命周期
特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

8.1 生命周期函数

（1）生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
（2）生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
（3）注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

8.2 生命周期函数的分类

（1）小程序中的生命周期函数分为两类，分别是：
①应用的生命周期函数：特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
②页面的生命周期函数：特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
（2）小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

（3）小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：

9.WXS脚本

（1）WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。小程序中 wxs 的典型应用场景就是“过滤器”。

9.1 内嵌 wxs 脚本

（1）wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 Javascript 代码可以编写在 html 文件中的 <script> 标签内一样。
（2）wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在 wxml 中访问模块中的成员
（3）实例：

9.2 外联的 wxs 脚本

（1）定义外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。在utils文件夹下写，示例代码如下：

（2）使用外联的 wxs 脚本
①在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs> 标签添加 module 和 src 属性，其中：

• module 用来指定模块的名称
• src 用来指定要引入的脚本的路径，且必须是相对路径

②示例代码如下：

9.3 WXS 的特点

（1）为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上，wxs 和 JavaScript 是完全不同的两种语言！
（2）不能作为组件的事件回调

（3）隔离性：
隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：

• wxs 不能调用 js 中定义的函数
• wxs 不能调用小程序提供的 API

10.自定义组件

（1）新建components文件夹，新建组件文件夹(如test1)
（2）在test1文件夹上，鼠标右击，点击新建Component
（3）输入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss
（4）注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：

10.1 引用组件

组件的引用方式分为“局部引用”和“全局引用”
（1）局部引用：组件只能在当前被引用的页面内使用，在哪个页面的 .json文件中引用，就在哪个页面的 .wxml文件中使用
（2）全局引用：在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。在任意页面都可以使用

10.1.1 局部引用组件

10.1.2 全局引用组件

10.2 组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：
（1）组件的 .json 文件中需要声明 “component”: true 属性
（2）组件的 .js 文件中调用的是 Component() 函数，页面是Page()函数
（3）组件的事件处理函数需要定义到 methods 节点中，页面的事件处理函数跟data平级即可

10.3 组件样式隔离

（1）默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示：

①组件 A 的样式不会影响组件 C 的样式
②组件 A 的样式不会影响小程序页面的样式
③小程序页面的样式不会影响组件 A 和 C 的样式
（2）好处：
①防止外界的样式影响组件内部的样式
②防止组件的样式破坏外界的样式
（3）组件样式隔离的注意点：
①app.wxss中定义的全局样式在组件中使用是无效的
②只有class选择器会有样式隔离效果，id选择器、样式选择器、标签选择器不受样式隔离的影响。
建议：在组件和引用组件的页面中使用class选择器，不要使用id、属性、标签选择器
（4）修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：
①styleIsolation 的可选值

②可以在组件的 .js文件/ .json中配置

10.4 自定义组件 - 数据、方法和属性

（1）data 数据
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：

（2）methods 方法
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

（3）properties 属性
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

（4）data 和 properties 的区别
在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：
①data 更倾向于存储组件的私有数据
②properties 更倾向于存储外界传递到组件中的数据

（5）使用 setData 修改 properties 的值
由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：

10.5 数据监听器

（1）数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

（2）数据监听器的基本用法
①组件的 UI 结构如下：

②组件的 .js 文件代码如下：

（3）监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

10.6 自定义组件 - 纯数据字段

（1）概念：纯数据字段指的是那些不用于界面渲染的 data 字段。
（2）应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
（3）好处：纯数据字段有助于提升页面更新的性能。
（4）使用规则
在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：

10.7 自定义组件 - 组件的生命周期

10.8 自定义组件 - 插槽

（1）在自定义组件的 wxml 结构中，可以提供一个 <slot> 节点（插槽），用于承载组件使用者提供的 wxml 结构。slot只是一个占位，让使用者来决定这里填充什么。

10.8.1 单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位，这种个数上的限制叫做单个插槽。

10.8.2 多个插槽

在小程序的自定义组件中，需要使用多 <slot> 插槽时，可以在组件的 .js 文件中进行启用。