✍前段时间从上家离职了，趁着有时间的空隙，专心去考驾照去了，最近考完了，该回来找工作了 , 也算是一边复习一边整理了。如果有不好或者有错误的地方请告知！希望可以与大家相互的交流学习！

1. 介绍

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。

2015 年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API，为小程序的诞生奠定了基础。

1.1 AppID

AppID 是小程序的唯一标识，相当于小程序平台的一个身份证。

获取方式：

1. 登录小程序后台
2. 在菜单"开发"-"开发设置"中查看小程序的 AppID

注意：如果没有 AppID，只能使用测试号进行开发，但部分高级 API 将无法使用。

1.2 安装开发工具

微信官方提供了专门的开发者工具，下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

支持 Windows、macOS 等操作系统，请根据你的系统选择相应版本下载安装。

1.3 创建你的第一个小程序

步骤：

1. 打开微信开发者工具
2. 点击"+"号进入创建小程序页面
3. 输入项目名称
4. 选择项目存放目录（必须是空目录）
5. 输入 AppID（或使用测试号）
6. 勾选"不使用云服务"（初学者建议）
7. 选择模板（建议选择"默认模板"）
8. 点击"确定"完成创建

2. 基本文件结构

一个小程序项目通常包含以下基本文件：

project
├── app.js       # 小程序逻辑文件
├── app.json     # 小程序全局配置
├── app.wxss     # 小程序全局样式
├── pages        # 页面目录
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils        # 工具类目录
    └── util.js

2.1 小程序全局配置 (app.json)

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

示例配置：

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab_home.png",
        "selectedIconPath": "images/tab_home_active.png"
      },
      {
        "pagePath": "pages/logs/index",
        "text": "日志",
        "iconPath": "images/tab_logs.png",
        "selectedIconPath": "images/tab_logs_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

配置说明：

• pages字段：描述当前小程序所有页面路径，数组第一项代表小程序的初始页面
• window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等
• tabBar字段：定义小程序底部 tab 栏的表现

更多配置选项参考：小程序全局配置文档

2.2 小程序页面配置 (xxxx.json)

每一个小程序页面也可以使用同名的.json文件来对本页面的窗口表现进行配置。页面中配置项会覆盖app.json的window中相同的配置项。

示例配置：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的页面",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true
}

更多配置选项参考：小程序页面配置文档

2.3 应用逻辑 (app.js)

每个小程序都需要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

示例代码：

// app.js
App({
  // 小程序初始化完成时触发，全局只触发一次
  onLaunch(options) {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || [];
    logs.unshift(Date.now());
    wx.setStorageSync('logs', logs);

    // 登录
    wx.login({
      success: (res) => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      },
    });
  },

  // 小程序启动或从后台进入前台显示时触发
  onShow(options) {
    console.log('场景值:', options.scene);
  },

  // 小程序从前台进入后台时触发
  onHide() {
    console.log('App Hide');
  },

  // 小程序发生脚本错误或 API 调用报错时触发
  onError(msg) {
    console.log(msg);
  },

  // 小程序要打开的页面不存在时触发
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/index/index',
    });
  },

  // 全局数据
  globalData: {
    userInfo: null,
    baseUrl: 'https://api.example.com',
  },
});

获取 App 实例：
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过getApp方法获取到全局唯一的 App 实例。

// xxx.js
const appInstance = getApp();
console.log(appInstance.globalData); // 获取全局数据

更多详情参考：App 参考文档

3. 小程序框架

小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。

• 逻辑层：负责数据处理，使用 JavaScript 编写
• 视图层：负责页面渲染，使用 WXML 和 WXSS 编写

3.1 响应的数据绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

示例：

<!-- WXML视图层 -->
<view>Hello {{name}}!</view>
<button bindtap="changeName">点击我!</button>

// JS逻辑层
Page({
  data: {
    name: 'Weixin',
  },
  changeName: function (e) {
    // 发送数据变更到视图层
    this.setData({
      name: 'MINA',
    });
  },
});

3.2 逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 编写，主要功能包括：

• 处理数据并发送给视图层，接收视图层的事件反馈
• 使用 App 和 Page 方法注册程序和页面
• 使用 getApp 和 getCurrentPages 方法获取 App 实例和当前页面栈
• 提供丰富的 API，如微信用户数据、扫一扫、支付等微信特有能力
• 提供模块化能力，每个页面有独立的作用域

重要限制：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window、document 等 DOM 操作 API。

3.3 页面注册

使用 Page 构造器注册页面

简单的页面可以使用 Page()进行构造，这是最常用的页面注册方式。

// index.js
Page({
  data: {
    text: '这是页面数据',
  },

  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    // 页面创建时执行，options包含页面路径参数
  },

  // 生命周期函数--监听页面显示
  onShow: function () {
    // 页面出现在前台时执行
  },

  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    // 页面首次渲染完毕时执行
  },

  // 生命周期函数--监听页面隐藏
  onHide: function () {
    // 页面从前台变为后台时执行
  },

  // 生命周期函数--监听页面卸载
  onUnload: function () {
    // 页面销毁时执行
  },

  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
  },

  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
    // 页面触底时执行
  },

  // 用户点击右上角分享
  onShareAppMessage: function () {
    // 页面被用户分享时执行
    return {
      title: '自定义分享标题',
      path: '/page/index',
    };
  },

  // 页面滚动触发事件的处理函数
  onPageScroll: function (e) {
    // 页面滚动时执行，e.scrollTop获取滚动条位置
  },

  // 页面尺寸改变时触发
  onResize: function () {
    // 页面尺寸变化时执行
  },

  // Tab点击时执行
  onTabItemTap(item) {
    console.log(item.index, item.pagePath, item.text);
  },

  // 自定义方法
  viewTap: function () {
    this.setData(
      {
        text: '设置一些数据用于更新视图',
      },
      function () {
        // setData完成后的回调函数
      }
    );
  },

  // 自定义数据（非响应式）
  customData: {
    hi: 'MINA',
  },
});

使用 Component 构造器构造页面

对于复杂的页面，可以使用 Component 构造器来构造页面，这提供了更好的代码组织和复用能力。

Component({
  data: {
    text: '这是页面数据',
  },
  methods: {
    // 生命周期函数--监听页面加载
    onLoad: function (options) {
      // 页面创建时执行
    },

    // 页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh: function () {
      // 下拉刷新时执行
    },

    // 自定义方法
    viewTap: function () {
      this.setData({
        text: '更新数据',
      });
    },
  },
});

3.4 页面路由

小程序框架维护了所有页面的栈结构，提供了多种路由方式：

1. 小程序启动 (appLaunch)

• openType: appLaunch
• 说明: 每个小程序实例启动时的第一个路由事件，只能由小程序冷启动触发
• 特点: 页面栈为空，会创建指定页面并推入页面栈

2. 打开新页面 (navigateTo)

• openType: navigateTo
• 触发方式:
  • 调用 API wx.navigateTo, Router.navigateTo
  • 使用组件 <navigator open-type="navigateTo"/>
  • 用户点击视频小窗
• 限制: 目标必须为非 tabBar 页面
• 效果: 将新页面推入页面栈

3. 页面重定向 (redirectTo)

• openType: redirectTo
• 触发方式:
  • 调用 API wx.redirectTo, Router.redirectTo
  • 使用组件 <navigator open-type="redirectTo"/>
• 限制: 目标必须为非 tabBar 页面
• 效果: 替换当前栈顶页面

4. 页面返回 (navigateBack)

• openType: navigateBack
• 触发方式:
  • 调用 API wx.navigateBack, Router.navigateBack
  • 使用组件 <navigator open-type="navigateBack"/>
  • 用户按返回按钮或触发系统返回动作
• 效果: 弹出并销毁栈顶的若干个页面

5. Tab 切换 (switchTab)

• openType: switchTab
• 触发方式:
  • 调用 API wx.switchTab, Router.switchTab
  • 使用组件 <navigator open-type="switchTab"/>
  • 用户点击 Tab Bar 中的 Tab 按钮
• 限制: 目标必须为 tabBar 页面
• 效果: 清空页面栈并切换到指定 tab 页面

6. 重加载 (reLaunch, autoReLaunch)

• openType: reLaunch, autoReLaunch
• 触发方式:
  • (reLaunch) 调用 API wx.reLaunch, Router.reLaunch
  • (reLaunch) 使用组件 <navigator open-type="reLaunch"/>
  • (autoReLaunch) 用户从扫码或分享等场景重新进入小程序
• 特点: 可以指定任意页面作为目标页面
• 效果: 销毁所有页面并载入新页面
• 注意: 不会重新启动 AppService，全局状态不会被重置

7. 关闭小窗页面 (dismissPip)

• openType: dismissPip
• 说明: 关闭一个正处于小窗模式的页面

3.5 页面路由监听

开发者可以通过以下方式监听页面路由变化：

// 在App.js中监听全局路由
App({
  onLaunch(options) {
    // 小程序初始化
  },
  onShow(options) {
    console.log('路由信息:', options);
    console.log('场景值:', options.scene);
  },
});

// 在页面中监听路由变化
Page({
  onLoad(options) {
    // 获取页面参数
    console.log('页面参数:', options);
  },
  onShow() {
    // 页面显示
  },
  onHide() {
    // 页面隐藏
  },
});

4. 补充说明

4.1 场景值

场景值用来描述用户进入小程序的路径，开发者可以通过下列方式获取场景值：

• 对于小程序，可以在 App 的 onLaunch 和 onShow，或 wx.getLaunchOptionsSync 中获取场景值
• 对于小游戏，可以在 wx.getLaunchOptionsSync 和 wx.onShow 中获取场景值

常见场景值：

• 1001: 发现栏小程序主入口
• 1011: 扫描二维码
• 1012: 长按图片识别二维码
• 1013: 手机相册选取二维码
• 1044: 小程序模板消息

4.2 注意事项

1. 页面栈限制：小程序最多只能有 10 层页面栈，超过后 navigateTo 不能再跳转新页面
2. Tab 页面限制：switchTab 只能跳转到 tabBar 页面，且会关闭所有非 tabBar 页面
3. 路由参数：navigateTo 和 redirectTo 允许传递参数，但参数值必须是字符串
4. 组件使用：对于复杂页面，建议使用 Component 构造器，它提供了更好的组件化支持

---

本文档基于微信小程序官方文档整理，更多详细内容请参考微信官方文档