微信小程序入门教程

大家好，欢迎来到IT知识分享网。

文章目录

1. 小程序概述
- 1.1 小程序与普通网页开发的区别
- 1.2 新建小程序页面
- 1.3 修改项目首页
2.小程序代码的构成
- 2.1 小程序页面的组成部分
- 2.2 小程序代码的构成-JSON 配置文件
- 2.4 小程序代码的构成 – WXML 模板
- 2.5 小程序代码的构成 – WXSS 样式
- 2.6 小程序代码的构成 – JS 逻辑交互
3.小程序的宿主环境
- 3.1 小程序的宿主环境 – 通信模型
- 3.2 小程序的宿主环境 – 运行机制
- 3.3 小程序的宿主环境 – 组件
4.WXML模板语法
- 4.1 WXML 模板语法 – 数据绑定
- 4.2 WXML 模板语法 – 事件绑定
- - 4.2.1 小程序中常用的事件
- 4.3 WXML 模板语法 – 条件渲染
- 4.4 WXML 模板语法 – 列表渲染
5.WXSS 模板样式
- 5.1 rpx 尺寸单位
- 5.2 @import 样式导入
- 5.3 全局样式和局部样式
6.全局配置(app.json)
- 6.1 window 节点常用的配置项
- 6.2 tabBar
7.页面配置
8.网络数据请求
7.视图与逻辑
- 7.1 页面导航
- 7.2 页面事件
- - 7.2.1 页面事件 – 下拉刷新事件
  - 7.2.2 页面事件 – 上拉触底事件
8.生命周期
- 8.1 生命周期函数
- 8.2 生命周期函数的分类
9.WXS脚本
- 9.1 内嵌 wxs 脚本
- 9.2 外联的 wxs 脚本
- 9.3 WXS 的特点
10.自定义组件
- 10.1 引用组件
- - 10.1.1 局部引用组件
  - 10.1.2 全局引用组件
- 10.2 组件和页面的区别
- 10.3 组件样式隔离
- 10.4 自定义组件 – 数据、方法和属性
- 10.5 数据监听器
- 10.6 自定义组件 – 纯数据字段
- 10.7 自定义组件 – 组件的生命周期
- 10.8 自定义组件 – 插槽
- - 10.8.1 单个插槽
  - 10.8.2 多个插槽

1. 小程序概述

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

1.2 新建小程序页面

1.3 修改项目首页

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

2.小程序代码的构成

2.1 小程序页面的组成部分

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

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

2.2 小程序代码的构成-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 模板

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

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

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

3.小程序的宿主环境

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

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

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

3.3.1 视图容器类组件

3.3.2 基础内容组件

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

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

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

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

3.3.3 其他常用组件

3.3.4 小程序的宿主环境-API

4.WXML模板语法

4.1 WXML 模板语法 – 数据绑定

②在 WXML 中使用数据

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

②绑定属性

4.2 WXML 模板语法 – 事件绑定

②点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 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 模板语法 – 条件渲染

②注意： <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 模板语法 – 列表渲染

5.WXSS 模板样式

5.1 rpx 尺寸单位

5.2 @import 样式导入

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

5.3 全局样式和局部样式

6.全局配置(app.json)

6.1 window 节点常用的配置项

6.2 tabBar

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

7.页面配置

8.网络数据请求

7.视图与逻辑

7.1 页面导航

7.1.1 页面导航 – 声明式导航

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

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

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

②示例代码如下：

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

7.1.2 页面导航 – 编程式导航

②示例代码

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

②示例

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

7.1.3 页面导航 – 导航传参

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

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

7.2 页面事件

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

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

8.生命周期

8.1 生命周期函数

8.2 生命周期函数的分类

（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 脚本

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