微信小程序的基础知识

一、小程序简介
1.1 小程序与普通网页开发的区别
小程序运行在微信环境中，与运行于浏览器环境的网页开发有所不同。其无法调用 DOM 和 BOM 的 API，但能借助微信提供的丰富 API，实现地理定位、扫码、支付等功能。开发模式上，小程序需申请开发账号，使用专门开发者工具创建和配置项目，与网页开发的浏览器 + 代码编辑器模式存在显著差异。

1.2 微信开发者工具的功能
微信开发者工具是小程序开发的得力助手，具备快速创建项目、查看编辑代码、调试功能以及预览和发布小程序等功能，为开发者提供了一站式的开发体验，大大提高了开发效率。

1.3 创建微信小程序的步骤
点击 “加号” 开启创建之旅，填写项目名称、选择空目录存放项目、填写 AppID（若无则可注册或使用测试号）、确定开发模式与后端服务，选择语言后点击确定，即可完成项目创建。之后，可在模拟器或真机上查看项目效果，开启小程序开发的探索之旅。

二、项目结构与代码构成
2.1 项目的基本组成结构
小程序项目由主体文件和页面文件构成。主体文件位于根目录，包括入口文件 app.js、全局配置文件 app.json 和全局样式文件 app.wxss（非必需）。页面文件存于 pages 目录，每个页面是一个文件夹，含.js（页面逻辑）、.wxml（页面结构）、.wxss（页面样式，非必需）和.json（页面配置，非必需）四个文件，且页面文件中的 wxss 和 json 可覆盖主体文件的相应配置。

2.2 小程序页面的组成部分
官方建议将小程序页面存于 pages 目录，以单独文件夹形式存在。每个页面由.js、.json、.wxml 和.wxss 四个基本文件组成，分别负责页面逻辑、配置、结构和样式，共同构建出完整的页面功能与展示效果。

2.3 JSON 配置文件的作用
JSON 在小程序中主要用于配置，有 app.json（全局配置）、project.config.json（项目配置）、sitemap.json（搜索配置）和页面文件夹中的.json（页面配置）四种类型。通过这些配置文件，可对小程序项目的不同层面进行精细设置，从整体架构到页面细节，掌控小程序的行为和外观。

2.4 app.json 文件详解
app.json 是小程序的全局配置核心，涵盖页面路径记录（pages）、窗口外观设置（window）、组件样式版本定义（style）以及 sitemap.json 位置指明（sitemapLocation）等功能。合理配置 app.json，可为小程序奠定统一的风格和基础功能框架。

2.5 project.config.json 文件功能
project.config.json 用于记录开发者对小程序开发工具的个性化设置，如编译相关配置、项目名称和小程序账号 ID 等信息。这些设置在不同开发环境中保持一致，确保开发过程的连贯性和便捷性。

2.6 sitemap.json 文件作用
sitemap.json 用于配置小程序页面的微信索引，以提升小程序在微信内的搜索可见性。开发者可通过设置规则，决定哪些页面允许或禁止被微信索引，从而优化小程序的搜索展示效果。

2.7 页面的.json 配置文件特点
页面的.json 配置文件可定制当前页面的窗口外观，其属性与 app.json 中的 window 属性相似，但无需指定 window 字段。页面配置会覆盖全局配置中的相同项，为单个页面提供个性化的外观设置。

2.8 新建小程序页面的方法
在 app.json 的 pages 数组中新增页面路径，小程序开发者工具将自动创建对应页面文件，包括.js、.json、.wxml 和.wxss 文件（.wxss 和.json 文件可按需生成）。此方法简便高效，便于快速构建小程序页面结构。

2.9 修改项目首页的方式
调整 app.json 中 pages 数组里页面路径的顺序，即可改变项目首页。小程序默认渲染数组中的第一个页面为首页，通过简单的路径调整，可灵活设置小程序的入口页面。

三、WXML 模板与 WXSS 样式
3.1 WXML 的含义与作用
WXML（WeiXin Markup Language）用于构建小程序页面结构，类似 HTML，但使用自定义组件标签，如 view、text、image、navigator 等。它通过独特的标签语言，搭建起小程序页面的框架，为用户呈现丰富的界面内容。

3.2 WXML 和 HTML 的区别
WXML 与 HTML 在标签名称、属性节点和模板语法上存在差异。WXML 的标签如 view、text 等不同于 HTML 的 div、span 等；属性节点设置方式有别；且 WXML 提供类似 Vue 的模板语法，支持数据绑定、列表渲染和条件渲染，为小程序开发带来更灵活高效的页面构建方式。

3.3 WXSS 的含义与作用
WXSS（WeiXin Style Sheets）用于描述 WXML 组件样式，类似 CSS。它在 CSS 基础上进行扩展和修改，为小程序的样式设计提供了更多功能和适应性，确保小程序在不同设备上呈现出一致且美观的样式效果。

3.4 WXSS 和 CSS 的区别
WXSS 新增 rpx 尺寸单位，可根据屏幕宽度自适应，解决了不同设备屏幕适配问题；提供全局和局部样式，便于整体和局部样式管理；仅支持部分 CSS 选择器，开发者需注意选择器的使用限制。这些区别使 WXSS 更贴合小程序开发需求。

3.5 小程序中的.js 文件分类
小程序中的.js 文件分为 app.js（小程序入口文件，调用 App () 函数启动小程序）、页面的.js 文件（页面入口，调用 Page () 函数创建运行页面）和普通的.js 文件（用于封装公共函数或属性，供页面调用）三类。它们各自承担不同职责，共同构建小程序的逻辑交互功能。

四、小程序宿主环境
4.1 宿主环境的含义
宿主环境是程序运行所依赖的环境，小程序的宿主环境是手机微信。脱离微信，小程序无法独立运行，微信为小程序提供了运行的基础和必要支持，使其能够在移动设备上展现强大功能。

4.2 小程序宿主环境的内容
小程序宿主环境涵盖通信模型、运行机制和组件 API。通信模型涉及渲染层（WXML 和 WXSS）与逻辑层（JS）之间的通信，以及逻辑层与第三方服务器的通信，均由微信客户端转发；运行机制包括小程序启动和页面渲染过程，确保小程序的顺畅运行；组件 API 由微信提供，开发者可调用这些 API 实现各种功能，如获取用户信息、进行本地存储和支付操作等。

4.3 通信模型解析
小程序通信主体为渲染层和逻辑层，WXML 模板和 WXSS 样式在渲染层工作，JS 脚本在逻辑层运行。两者之间以及逻辑层与第三方服务器之间的通信均依赖微信客户端转发，确保数据的有效传递和交互的顺畅进行。

4.4 运行机制详解
小程序启动时，先下载代码包，解析 app.json 配置文件，执行 app.js 创建实例，最后渲染首页。页面渲染过程包括加载解析页面配置、模板和样式，执行.js 文件创建页面实例。此运行机制保证小程序从启动到页面展示的高效性和稳定性。

4.5 组件分类与常用组件
小程序组件由宿主环境提供，分为视图容器、基础内容、表单组件、导航组件、媒体组件、map 地图组件、canvas 画布组件、开放能力和无障碍访问九大类。常用组件如 view（布局）、text（文本显示）、image（图片展示）、navigator（页面导航）、swiper 和 swiper-item（轮播图）、scroll-view（滚动视图）等，开发者可灵活组合这些组件构建多样化的小程序界面。

4.6 组件的使用示例
以常见组件为例，view 可通过 flex 布局实现页面结构划分；text 用于展示文本信息；image 能展示图片并通过 mode 属性控制裁剪缩放模式；navigator 实现页面跳转，可通过 url 和 open-type 属性指定跳转链接和方式；swiper 和 swiper-item 轻松打造轮播图效果，利用其属性定制轮播样式；scroll-view 提供滚动视图功能，可通过 scroll-x 和 scroll-y 属性实现横向和纵向滚动效果。这些组件的熟练运用，有助于构建出功能丰富、交互友好的小程序界面。

4.7 API 概述
小程序 API 由宿主环境提供，分为事件监听 API（以 on 开头，监听事件触发）、同步 API（以 Sync 结尾，通过函数返回值获取结果，出错抛异常）和异步 API（类似 jQuery 的 $.ajax，通过回调函数接收结果）。开发者利用这些 API 可便捷调用微信能力，如获取用户信息、进行本地存储和发起网络数据请求等，为小程序增添丰富功能。

五、模板语法
5.1 数据绑定
数据绑定遵循在 data 中定义数据，在 WXML 中使用的原则。通过 Mustache 语法（双大括号）将 data 中的数据绑定到页面，可实现动态内容和属性绑定，还支持三元运算和算术运算等。这种灵活的数据绑定方式，使页面展示与数据紧密相连，提升了小程序的动态交互性。

5.2 事件绑定
事件是渲染层与逻辑层的通讯方式，常用事件如 tap（触摸点击）、input（文本输入）和 change（状态改变）等。事件回调函数接收事件对象，包含事件类型、时间戳、触发组件和当前组件属性值等信息。通过事件绑定，小程序能够响应用户操作，实现丰富的交互功能，如按钮点击、表单提交等。

5.3 条件渲染
条件渲染通过 wx:if 和 hidden 实现元素的显示与隐藏控制。wx:if 根据条件动态创建和移除元素，适合控制条件复杂的场景；hidden 通过切换样式（display: none/block）实现显示隐藏，适用于频繁切换的情况。开发者可根据实际需求选择合适的条件渲染方式，优化小程序的性能和用户体验。

5.4 列表渲染
wx:for 用于根据数组循环渲染组件结构，可手动指定索引和当前项变量名，提高代码可读性。同时，建议使用 wx:key 为列表项指定唯一 key 值，以提升渲染效率。列表渲染在展示列表数据时非常实用，如商品列表、新闻列表等，为用户呈现丰富多样的信息。

六、全局配置与页面配置
6.1 全局配置文件及常用配置项
app.json 是小程序的全局配置文件，常用配置项包括 pages（记录页面路径）、window（设置窗口外观）、tabBar（配置底部 tabBar 效果）和 style（启用新版组件样式）等。通过合理配置这些项，可统一小程序的整体风格和行为，为用户提供一致的体验。

6.2 window 节点常用配置项
window 节点的常用配置项如 navigationBarTitleText（导航栏标题文字）、navigationBarBackgroundColor（导航栏背景颜色）、navigationBarTextStyle（导航栏标题颜色）、backgroundColor（窗口背景色）、backgroundTextStyle（下拉 loading 样式）、enablePullDownRefresh（是否开启全局下拉刷新）和 onReachBottomDistance（页面上拉触底距离）等，细致地控制着小程序窗口的各个方面，从标题栏到背景，从交互操作到视觉效果。

6.3 tabBar 配置
tabBar 用于实现多页面快速切换，分为底部和顶部 tabBar（顶部不显示 icon），可配置背景色、选中与未选中图标路径、文字颜色等。开发者可根据小程序功能和设计需求，灵活配置 tabBar，优化用户导航体验，使页面切换更加便捷高效。

6.4 页面配置文件的作用与关系
每个页面的.json 配置文件用于定制当前页面的窗口外观和效果。当页面配置与全局配置冲突时，根据就近原则，页面配置优先，确保单个页面的个性化展示需求得到满足，同时保持小程序整体风格的一致性。

6.5 页面配置中常用的配置项
页面配置常用项与 window 节点部分配置项相似，如 navigationBarBackgroundColor、navigationBarTextStyle、navigationBarTitleText、backgroundColor、backgroundTextStyle、enablePullDownRefresh 和 onReachBottomDistance 等，用于精细调整单个页面的显示效果和交互行为，满足不同页面的独特设计要求。

七、网络数据请求与页面导航
7.1 小程序中网络数据请求的限制
出于安全考虑，小程序只能请求 HTTPS 类型接口，且必须将接口域名添加到信任列表。开发者需确保接口的安全性和合法性，遵守小程序的网络请求规则，以保障小程序的数据交互安全稳定。

7.2 配置 request 合法域名
在微信小程序管理后台的开发设置中，可修改 request 合法域名。域名需支持 https 协议、经过 ICP 备案且不能使用 IP 地址或 localhost，每月仅可申请 5 次修改。合理配置合法域名，是小程序与后端服务器正常通信的关键步骤。

7.3 发起 GET 和 POST 请求
使用 wx.request () 方法可发起 GET 和 POST 请求。在请求时，需指定接口地址（基于 https 协议）、请求方式、发送数据（如有）以及成功和失败回调函数。通过这些请求方法，小程序可与后端服务器进行数据交互，获取所需信息，实现丰富的功能，如加载数据、提交表单等。

7.4 在页面刚加载时请求数据
在页面的 onLoad 事件中调用获取数据的函数，可实现页面刚加载时自动请求初始化数据。这确保用户进入页面时能及时获取最新信息，提升用户体验，如在新闻详情页加载文章内容、在商品列表页获取商品数据等场景中广泛应用。

7.5 跳过 request 合法域名校验（仅开发阶段）
若后端仅提供 http 协议接口，开发者可在微信开发者工具中临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名校验。但此选项仅限开发与调试阶段使用，上线前务必确保域名配置正确，以保障小程序的安全性和稳定性。

7.6 关于跨域和 Ajax 的说明
小程序宿主环境为微信客户端，不存在跨域问题，其网络数据请求与基于浏览器的 Ajax 请求不同，被称为 “发起网络数据请求”。开发者在开发过程中，无需担心跨域限制，专注于利用小程序的网络请求功能实现与服务器的数据交互。

7.7 页面导航的方式与实现
页面导航分为声明式导航（使用 navigator 组件）和编程式导航（调用导航 API）。声明式导航通过在页面上声明 navigator 组件，指定 url 和 open-type 属性实现页面跳转，可导航到 tabBar 页面（open-type 为 switchTab）或非 tabBar 页面（open-type 为 navigate 或省略），还支持后退导航（open-type 为 navigateBack）并可传参。编程式导航通过调用 wx.switchTab（导航到 tabBar 页面）、wx.navigateTo（导航到非 tabBar 页面）和 wx.navigateBack（后退导航）等方法，也可实现页面跳转和参数传递。两种导航方式各有优势，开发者可根据实际需求灵活运用，构建流畅的用户导航流程。

7.8 导航传参与参数接收
声明式导航和编程式导航均可传参，参数通过 url 传递，格式为 “? 参数键 = 参数值 & 参数键 = 参数值...”。在接收导航参数时，可在目标页面的 onLoad 函数中通过 options 对象获取传递过来的参数。参数传递和接收功能使页面之间能够共享信息，实现数据的有效传递和交互，如在页面跳转时传递用户 ID、商品 ID 等关键信息。

八、页面事件与生命周期
8.1 下拉刷新事件
下拉刷新可通过全局（在 app.json 中设置 enablePullDownRefresh 为 true）或局部（在页面.json 配置文件中设置）开启。配置下拉刷新窗口的样式可通过 backgroundColor 和 backgroundTextStyle 实现。在页面.js 文件中，通过 onPullDownRefresh () 函数监听下拉刷新事件，处理数据重置等操作后，需调用 wx.stopPullDownRefresh () 停止刷新效果。下拉刷新功能提升了用户获取最新数据的便捷性，广泛应用于资讯类、社交类等小程序中。

8.2 上拉触底事件
上拉触底通过 onReachBottom () 函数监听，可在函数中实现加载更多数据的逻辑。上拉触底距离可通过 onReachBottomDistance 属性在全局或页面配置文件中设置，默认距离为 50px。为避免频繁请求数据，可通过节流阀机制控制上拉触底请求。上拉触底功能常用于长列表页面，如商品列表、聊天记录列表等，为用户提供流畅的浏览体验。

8.3 生命周期的概念与分类
小程序生命周期分为应用生命周期（小程序启动到销毁的过程）和页面生命周期（每个页面的加载到卸载过程）。生命周期函数是小程序框架提供的内置函数，在特定时间点自动执行，如应用的 onLaunch（初始化完成）、onShow（启动或从后台进入前台）、onHide（从前台进入后台）函数，以及页面的 onLoad（加载）、onShow（显示）、onReady（初次渲染完成）、onHide（隐藏）、onUnload（卸载）函数。理解生命周期有助于开发者在合适时机执行初始化、数据更新、资源清理等操作，优化小程序性能和用户体验。

8.4 生命周期函数的作用与使用场景
生命周期函数允许开发者在特定阶段执行操作。例如，在应用的 onLaunch 函数中进行全局初始化，如获取用户信息、初始化数据缓存等；在页面的 onLoad 函数中初始化页面数据、接收导航参数；在 onShow 函数中更新页面数据显示；在 onReady 函数中操作与页面初次渲染完成相关的逻辑；在 onHide 函数中暂停或保存页面状态；在 onUnload 函数中进行资源清理、取消订阅等操作。合理运用生命周期函数，