微信小程序

基础组成

1. 主要文件/文件夹说明

text

src/
├── pages/                  # 存放所有页面
├── utils/                  # 存放工具模块（如日期格式化）
├── app.js                  # 项目入口文件，调用 App() 启动小程序
├── app.json               # 全局配置文件
├── app.wxss               # 全局样式文件
├── project.config.json    # 项目配置文件（含编译配置、项目名、appid）
└── sitemap.json          # 配置小程序页面是否允许微信索引

2. project.config.json 配置项

setting：编译相关配置。
projectname：项目名称。
appid：小程序的账号ID。

3. 更改主页

调整 app.json 中 pages 数组的页面顺序，排在第一位的即为首页。

与Web的区别

1. WXML 与 HTML 的区别

标签不同：HTML 用 div、span、img、a；WXML 用 view、text、image、navigator。
属性节点不同：如 HTML 链接用 <a href="#">，WXML 用 <navigator url="/pages/...">。
支持类似 Vue 的模板语法：数据绑定、列表渲染、条件渲染。

2. WXSS 与 CSS 的区别

新增 rpx 尺寸单位：自动适配不同屏幕，无需手动换算。
提供全局与局部样式：app.wxss 全局生效，页面内的 .wxss 仅对当前页生效。
支持部分 CSS 选择器：.class、#id、元素、并集、后代、::after/::before 等。

3. JS 文件分类

app.js：入口文件，调用 App()。
页面的 .js：页面入口，调用 Page()。
普通的 .js：功能模块，封装公共函数/属性供页面使用。

宿主环境

1. 什么是宿主环境

程序运行所依赖的环境（如 Android、iOS）。
小程序宿主环境包含：通信模型、运行机制、组件、API。

2. 通信模型

主体：渲染层（WXML+WXSS）和逻辑层（JS）。
通信方式：均由微信客户端转发。
渲染层 ↔ 逻辑层
逻辑层 ↔ 第三方服务器

3. 运行机制

小程序启动：下载代码包 → 解析 app.json → 执行 app.js（创建实例）→ 渲染首页。
页面渲染：加载页面 .json → 加载 .wxml/.wxss → 执行页面 .js（创建页面实例）→ 渲染完成。

4. 组件

视图容器：
view：普通块级元素，用于布局。
scroll-view：可滚动视图区域。
swiper / swiper-item：轮播图。
基础内容：
text：文本，可长按选中（需加 selectable）。
rich-text：渲染 HTML 字符串（通过 nodes 属性）。
其他常用：
button：按钮，open-type 调用微信功能（客服、转发、授权等）。
image：图片，默认宽高 300×240px，mode 控制裁剪/缩放。
navigator：页面导航（类似 <a> 链接）。

5. API

事件监听 API：以 on 开头，监听事件（如 wx.onWindowResize）。
同步 API：以 Sync 结尾，直接返回结果（如 wx.setStorageSync）。
异步 API：通过 success/fail/complete 回调接收结果（如 wx.request）。

WXML

1. 列表渲染（wx:for）

基本用法：wx:for="" 循环渲染，默认索引为 index，当前项为 item。
指定 key：使用 wx:key="唯一标识" 提高渲染效率（如 wx:key="id"）。
自定义变量名（不常用）：
wx:for-index="idx" 指定索引变量名
wx:for-item="itemName" 指定当前项变量名

2. 数据绑定

定义数据：在页面的 .js 文件的 data 对象中定义。
使用数据：通过（Mustache 语法）绑定。
绑定内容：<view></view>
绑定属性：<image src=""></image>
支持运算：三元运算、算术运算等

3. 事件绑定

tap 事件（触摸点击）：bindtap="事件名"

btnTapHandler(e) { console.log(e) } // e 为事件参数对象

事件传参：通过 data-* 自定义属性传参

html

<button bindtap="btnHandler" data-info="{{2}}">传参</button>

获取：e.target.dataset.info

input 事件（文本框输入）：bindinput="事件名"

inputHandler(e) { console.log(e.detail.value) } // 获取最新输入值

数据同步：<input value="" bindinput="inputHandler">

4. 条件渲染

wx:if 系列：

html

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

block 包装多个组件：<block wx:if="true">...</block>（不会渲染为真实标签）
hidden：hidden="" 控制显示/隐藏（切换 display 样式）
wx:if vs hidden：
wx:if：动态创建/移除元素，适合条件复杂、切换不频繁的场景
hidden：切换样式（display: none/block），适合频繁切换的场景

WXSS

1. 什么是 WXSS

一套样式语言，用于美化 WXML 组件，类似于 CSS。
具备 CSS 大部分特性，同时针对小程序进行了扩充和修改。

2. 与 CSS 相比的扩展特性

rpx 尺寸单位（responsive pixel）
微信小程序独有的屏幕适配单位。
实现原理：将所有设备屏幕总宽度统一为 750rpx，自动适配不同屏幕大小。
@import 样式导入
可导入外联样式表。
语法格式：@import "样式文件相对路径";（注意结尾分号）

3. 全局样式 vs 局部样式

全局样式：定义在项目根目录的 app.wxss 中，作用于所有页面。
局部样式：定义在页面的 .wxss 文件中，仅作用于当前页面。

4. 样式优先级规则

就近原则：局部样式会覆盖全局样式。
前提条件：只有当局部样式的权重 ≥ 全局样式的权重时，覆盖才生效。

全局配置`app.json`

1. 常用配置项

配置项	作用
`pages`	记录当前小程序所有页面的存放路径
`window`	全局设置小程序窗口的外观
`tabBar`	设置小程序底部的 tabBar 效果
`style`	是否启用新版的组件样式

2. 窗口组成部分

导航栏区域（顶部）
背景区域（默认不可见，下拉时显示）
页面主体区域（显示 WXML 布局）

3. window 节点常用配置项

导航栏设置

"navigationBarTitleText": "标题"：设置导航栏标题
"navigationBarBackgroundColor": "#333"：设置导航栏背景颜色
"navigationBarTextStyle": "white"：设置导航栏标题颜色（仅支持 black / white）

下拉刷新设置

"enablePullDownRefresh": true：全局开启下拉刷新功能
"backgroundColor": "#efefef"：设置下拉刷新窗口背景色
"backgroundTextStyle": "light"：设置下拉刷新 loading 样式（仅支持 light / dark）

上拉触底设置

"onReachBottomDistance": 50：设置上拉触底的距离（单位 px，默认 50px，一般保持默认即可）

window 节点常用配置项

属性名	类型	默认值	说明
`navigationBarTitleText`	String	-	导航栏标题文字内容
`navigationBarBackgroundColor`	HexColor	#000000	导航栏背景颜色，如 #000000
`navigationBarTextStyle`	String	white	导航栏标题颜色，仅支持 `black` / `white`
`backgroundColor`	HexColor	-	窗口的背景色
`backgroundTextStyle`	String	dark	下拉 loading 的样式，仅支持 `dark` / `light`
`enablePullDownRefresh`	Boolean	false	是否全局开启下拉刷新
`onReachBottomDistance`	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

完整案例

json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "微信小程序",
    "navigationStyle": "default",
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "pageOrientation": "auto"
  }
}

TabBar

tabBar 是移动端应用中常见的导航组件，用于实现多个页面之间的快速切换。小程序中分为：

底部 tabBar
顶部 tabBar

注意：
最少配置 2个，最多配置 5个 tab 页签。
顶部 tabBar 不显示图标，只显示文本。

组成

backgroundColor：tabBar 背景色
borderStyle：上边框颜色（black / white）
color：文字默认（未选中）颜色
selectedColor：文字选中时的颜色
iconPath：未选中时的图标路径
selectedIconPath：选中时的图标路径

tabBar 节点配置项（app.json）

属性	类型	必填	默认值	描述
position	String	否	bottom	位置：bottom / top
borderStyle	String	否	black	上边框颜色：black / white
color	HexColor	否	-	文字默认颜色
selectedColor	HexColor	否	-	文字选中颜色
backgroundColor	HexColor	否	-	背景色
list	Array	是	-	tab 列表（2~5 项）

每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径（需在 pages 中定义）
text	String	是	tab 上显示的文字
iconPath	String	否	未选中图标路径（顶部 tab 不显示）
selectedIconPath	String	否	选中图标路径（顶部 tab 不显示）

案例

json

"tabBar": {
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "home",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home-active.png"
    },
    {
      "pagePath": "pages/list/list",
      "text": "list",
      "iconPath": "/image/user.png",
      "selectedIconPath": "/image/user-active.png"
    }
  ]
}

网络请求

一、请求限制

出于安全考虑，小程序对数据接口请求有两点限制：

只能请求 HTTPS 类型的接口
必须将接口域名添加到信任列表中

二、配置 request 合法域名

配置步骤：

登录微信小程序管理后台
开发 → 开发设置 → 服务器域名
修改 request 合法域名

注意事项：

域名只支持 https 协议
不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内最多可申请 5 次修改

三、GET 请求

javascript

wx.request({
  url: 'https://example.com/api',  // 请求地址
  method: 'GET',                    // 请求方式
  data: {                           // 发送到服务器的数据
    name: '张三',
    age: 18
  },
  success: (res) => {               // 请求成功回调
    console.log(res)
  }
})

四、POST 请求

javascript

wx.request({
  url: 'https://example.com/api',
  method: 'POST',                   // 修改为 POST
  data: {
    name: '张三',
    age: 18
  },
  success: (res) => {
    console.log(res)
  }
})

五、页面加载时自动请求数据

在页面刚加载时自动请求初始化数据，需要在 onLoad 生命周期中调用：

javascript

// home.js
Page({
  onLoad: function(options) {
    this.getInfo()  // 页面加载时自动调用
  },
  
  getInfo() {
    wx.request({
      url: 'https://example.com/api',
      method: 'GET',
      success: (res) => {
        console.log('请求成功', res)
        this.setData({ data: res.data })
      }
    })
  }
})

六、跳过 request 合法域名校验（开发调试用）

如果后端只提供了 http 协议接口，可以临时跳过域名校验： 设置方法： 微信开发者工具 → 详情 → 本地设置 → 勾选 「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」

注意： 此选项只能在开发和调试阶段使用，上线前必须关闭并配置合法域名。

六、关于跨域和 Ajax 的说明

概念	说明
跨域问题	只存在于基于浏览器的 Web 开发中，小程序宿主环境是微信客户端，不存在跨域问题
Ajax	核心技术依赖浏览器的 `XMLHttpRequest` 对象，小程序中不叫 Ajax，而是叫“发起网络数据请求”

常用事件

1. 常用事件列表

类型	绑定方式	事件描述
tap	`bindtap` 或 `bind:tap`	手指触摸后马上离开（类似 click）
input	`bindinput` 或 `bind:input`	文本框输入事件
change	`bindchange` 或 `bind:change`	状态改变时触发（如 checkbox、switch）

2. 事件对象属性列表

当事件回调触发时，会收到一个事件对象 event：

属性	类型	说明
`type`	String	事件类型
`timeStamp`	Integer	页面打开到触发事件的毫秒数
`target`	Object	触发事件的组件属性集合
`currentTarget`	Object	当前组件属性集合
`detail`	Object	额外信息
`touches`	Array	触摸点信息数组
`changedTouches`	Array	变化的触摸点信息数组

3. 事件绑定示例

html

<!-- wxml -->
<button bindtap="handleTap">点击我</button>
<input bindinput="handleInput" placeholder="输入内容" />
<switch bindchange="handleChange" />

javascript

// js
Page({
  handleTap(event) {
    console.log('点击事件', event)
  },
  
  handleInput(event) {
    console.log('输入内容：', event.detail.value)
  },
  
  handleChange(event) {
    console.log('切换状态：', event.detail.value)
  }
})

页面导航

1. 声明式导航（使用 `<navigator>` 组件）

跳转到 tabBar 页面：
- 必须设置 url="/pages/xxx/xxx" 和 open-type="switchTab"
跳转到非 tabBar 页面：
- 设置 url 和 open-type="navigate"（可省略）
后退导航：
- 设置 open-type="navigateBack" 和 delta（后退层级，默认1）

2. 编程式导航（使用 API）

跳转到 tabBar 页面：

wx.switchTab({ url: '/pages/message/message' })

跳转到非 tabBar 页面：

wx.navigateTo({ url: '/pages/info/info?name=sz&age=20' })

后退导航：
js
```
wx.navigateBack({ delta: 1 })
```

导航传参

声明式传参：

html

<navigator url="/pages/message/message?name=1s&age=20">跳转</navigator>

编程式传参：

wx.navigateTo({ url: '/pages/info/info?name=sz&age=20' })

接收参数：

onLoad(options) {
  console.log(options) // {name: "sz", age: "20"}
}

下拉刷新

开启下拉刷新：
- 页面配置 .json 中设置 "enablePullDownRefresh": true
样式配置：
- backgroundColor：背景色
- backgroundTextStyle：加载点样式（dark / light）

监听事件：

onPullDownRefresh() {
  // 刷新数据
  wx.stopPullDownRefresh() // 停止刷新动画
}

上拉触底

监听事件：

onReachBottom() {
  // 加载更多数据
}

配置触发距离（默认50px）：
json
```
"onReachBottomDistance": 150
```

加载提示：

wx.showLoading({ title: '加载中...' })
wx.hideLoading() // 加载完成后关闭

节流处理：

data: { isLoading: false }
// 请求前设置为 true，请求完成后设置为 false

生命周期

应用生命周期（app.js）

函数	触发时机
`onLaunch`	小程序初始化完成（全局一次）
`onShow`	启动或从后台进入前台
`onHide`	从前台进入后台

页面生命周期（page.js）

函数	触发时机
`onLoad`	页面加载（一次）
`onShow`	页面显示
`onReady`	页面初次渲染完成（一次）
`onHide`	页面隐藏
`onUnload`	页面卸载（一次）

微信小程序 ​

基础组成 ​

1. 主要文件/文件夹说明 ​

2. project.config.json 配置项 ​

3. 更改主页 ​

与Web的区别 ​

1. WXML 与 HTML 的区别 ​

2. WXSS 与 CSS 的区别 ​

3. JS 文件分类 ​

宿主环境 ​

1. 什么是宿主环境 ​

2. 通信模型 ​

3. 运行机制 ​

4. 组件 ​

5. API ​

WXML ​

1. 列表渲染（wx:for） ​

2. 数据绑定 ​

3. 事件绑定 ​

4. 条件渲染 ​

WXSS ​

1. 什么是 WXSS ​

2. 与 CSS 相比的扩展特性 ​

3. 全局样式 vs 局部样式 ​

4. 样式优先级规则 ​

全局配置app.json ​

1. 常用配置项 ​

2. 窗口组成部分 ​

3. window 节点常用配置项 ​

window 节点常用配置项 ​

完整案例 ​

TabBar ​

组成 ​

tabBar 节点配置项（app.json） ​

每个 tab 项的配置选项 ​

案例 ​

网络请求 ​

一、请求限制 ​

二、配置 request 合法域名 ​

三、GET 请求 ​

四、POST 请求 ​

五、页面加载时自动请求数据 ​

六、跳过 request 合法域名校验（开发调试用） ​

六、关于跨域和 Ajax 的说明 ​

常用事件 ​

1. 常用事件列表 ​

2. 事件对象属性列表 ​

3. 事件绑定示例 ​

页面导航 ​

1. 声明式导航（使用 <navigator> 组件） ​

2. 编程式导航（使用 API） ​

导航传参 ​

下拉刷新 ​

上拉触底 ​

生命周期 ​

应用生命周期（app.js） ​

页面生命周期（page.js） ​

微信小程序

基础组成

1. 主要文件/文件夹说明

2. project.config.json 配置项

3. 更改主页

与Web的区别

1. WXML 与 HTML 的区别

2. WXSS 与 CSS 的区别

3. JS 文件分类

宿主环境

1. 什么是宿主环境

2. 通信模型

3. 运行机制

4. 组件

5. API

WXML

1. 列表渲染（wx:for）

2. 数据绑定

3. 事件绑定

4. 条件渲染

WXSS

1. 什么是 WXSS

2. 与 CSS 相比的扩展特性

3. 全局样式 vs 局部样式

4. 样式优先级规则

全局配置`app.json`

1. 常用配置项

2. 窗口组成部分

3. window 节点常用配置项

window 节点常用配置项

完整案例

TabBar

组成

tabBar 节点配置项（app.json）

每个 tab 项的配置选项

案例

网络请求

一、请求限制

二、配置 request 合法域名

三、GET 请求

四、POST 请求

五、页面加载时自动请求数据

六、跳过 request 合法域名校验（开发调试用）

六、关于跨域和 Ajax 的说明

常用事件

1. 常用事件列表

2. 事件对象属性列表

3. 事件绑定示例

页面导航

1. 声明式导航（使用 `<navigator>` 组件）

2. 编程式导航（使用 API）

导航传参

下拉刷新

上拉触底

生命周期

应用生命周期（app.js）

页面生命周期（page.js）