微信小程序入门学习教程，从入门到精通，微信小程序核心 API 详解与案例(13）

以下是根据你提供的"微信小程序核心API"内容整理的详细知识点、语法说明、具体案例代码（含详细注释），以及综合性案例。

---

微信小程序核心 API 详解与案例

---

一、获取设备与系统信息

1. 获取窗口信息 wx.getWindowInfo()

作用：获取当前窗口信息（如窗口宽度、高度、状态栏高度等）。

语法：

const info = wx.getWindowInfo()

返回值：Object，包含 windowWidth、windowHeight、statusBarHeight 等字段。

案例：

// pages/index/index.js
Page({
  onLoad() {
    const windowInfo = wx.getWindowInfo();
    console.log('窗口宽度:', windowInfo.windowWidth);
    console.log('窗口高度:', windowInfo.windowHeight);
    console.log('状态栏高度:', windowInfo.statusBarHeight);
  }
});

---

2. 获取设备信息 wx.getSystemInfoSync() / wx.getSystemInfo()

作用：获取设备系统信息（如品牌、型号、系统版本、屏幕尺寸等）。

• wx.getSystemInfoSync()：同步方法，直接返回结果。
• wx.getSystemInfo()：异步方法，需传入 success/fail 回调。

案例（同步）：

Page({
  onLoad() {
    try {
      const systemInfo = wx.getSystemInfoSync();
      console.log('设备品牌:', systemInfo.brand);
      console.log('设备型号:', systemInfo.model);
      console.log('系统版本:', systemInfo.system);
      console.log('屏幕宽度:', systemInfo.screenWidth);
      console.log('屏幕高度:', systemInfo.screenHeight);
    } catch (e) {
      console.error('获取系统信息失败:', e);
    }
  }
});

案例（异步）：

wx.getSystemInfo({
  success(res) {
    console.log('异步获取系统信息:', res);
  },
  fail(err) {
    console.error('获取失败:', err);
  }
});

---

3. 获取微信应用信息 wx.getAccountInfoSync()

作用：获取小程序账号信息（如 appId、版本号等）。

案例：

Page({
  onLoad() {
    const accountInfo = wx.getAccountInfoSync();
    console.log('小程序 appId:', accountInfo.miniProgram.appId);
    console.log('版本号:', accountInfo.miniProgram.version);
    console.log('环境:', accountInfo.miniProgram.envVersion); // develop / trial / release
  }
});

---

二、网络请求

1. 发送 HTTPS 请求 wx.request()

作用：发起 HTTPS 网络请求（GET/POST 等）。

注意：需在小程序管理后台配置合法域名。

语法：

wx.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  data: { key: 'value' },
  header: { 'content-type': 'application/json' },
  success(res) { console.log(res.data); },
  fail(err) { console.error(err); }
});

案例（获取天气数据）：

Page({
  data: { weather: null },
  onLoad() {
    wx.request({
      url: 'https://api.example.com/weather', // 替换为真实接口
      method: 'GET',
      data: { city: '北京' },
      header: {
        'Authorization': 'Bearer your_token_here'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          this.setData({ weather: res.data });
          console.log('天气数据:', res.data);
        } else {
          wx.showToast({ title: '请求失败', icon: 'none' });
        }
      },
      fail: (err) => {
        console.error('网络请求失败:', err);
        wx.showToast({ title: '网络错误', icon: 'none' });
      }
    });
  }
});

---

2. 文件上传与下载

上传文件 wx.uploadFile()

案例：

wx.chooseImage({
  success(res) {
    const tempFilePath = res.tempFilePaths[0];
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: tempFilePath,
      name: 'file', // 后端接收字段名
      formData: { userId: '123' },
      success(uploadRes) {
        if (uploadRes.statusCode === 200) {
          wx.showToast({ title: '上传成功' });
          console.log('服务器返回:', uploadRes.data);
        }
      },
      fail(err) {
        console.error('上传失败:', err);
      }
    });
  }
});

下载文件 wx.downloadFile()

案例：

wx.downloadFile({
  url: 'https://example.com/file.pdf',
  success(res) {
    if (res.statusCode === 200) {
      const filePath = res.tempFilePath;
      wx.openDocument({ filePath, success: () => console.log('打开成功') });
    }
  },
  fail(err) {
    console.error('下载失败:', err);
  }
});

---

三、路由与跳转

1. 小程序内页面跳转

• wx.navigateTo()：保留当前页面，跳转到新页面（最多10层）
• wx.redirectTo()：关闭当前页面，跳转到新页面
• wx.switchTab()：跳转到 tabBar 页面
• wx.navigateBack()：返回上一页

案例：

// 跳转到详情页，携带参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=测试',
  success() {
    console.log('跳转成功');
  }
});

// 返回上一页
wx.navigateBack({
  delta: 1 // 返回层数
});

2. 小程序应用间跳转 wx.navigateToMiniProgram()

案例：

wx.navigateToMiniProgram({
  appId: '目标小程序的 appId',
  path: 'pages/index/index?param=123',
  extraData: { from: 'sourceApp' },
  envVersion: 'release', // develop / trial / release
  success(res) {
    console.log('跳转成功');
  },
  fail(err) {
    console.error('跳转失败:', err);
  }
});

---

四、界面交互与反馈

1. 页面弹框

• wx.showToast()：显示轻提示
• wx.showModal()：显示模态弹窗
• wx.showLoading() / wx.hideLoading()：显示/隐藏加载提示

案例：

// 轻提示
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});

// 模态确认框
wx.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

2. 下拉刷新

需在页面 JSON 中开启 enablePullDownRefresh: true，并在 JS 中监听 onPullDownRefresh

pages/index/index.json：

{
  "enablePullDownRefresh": true
}

pages/index/index.js：

Page({
  onPullDownRefresh() {
    console.log('触发下拉刷新');
    // 模拟数据刷新
    setTimeout(() => {
      wx.stopPullDownRefresh(); // 停止刷新动画
      wx.showToast({ title: '刷新完成', icon: 'none' });
    }, 1500);
  }
});

---

五、多媒体

调用摄像头/录音/音频播放等（简要示例）

拍照：

wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['camera'], // 仅拍照
  success(res) {
    console.log('拍照成功:', res.tempFilePaths[0]);
  }
});

播放音频：

const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.play();
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});

---

六、文件系统

保存/读取本地文件

保存临时文件到本地：

wx.downloadFile({
  url: 'https://example.com/test.txt',
  success(res) {
    wx.saveFile({
      tempFilePath: res.tempFilePath,
      success(saveRes) {
        console.log('保存成功，路径:', saveRes.savedFilePath);
        // 可存入缓存供后续使用
      }
    });
  }
});

---

七、设备传感器调用

获取加速度 wx.onAccelerometerChange()

案例：

Page({
  onShow() {
    wx.startAccelerometer({ interval: 'normal' });
    wx.onAccelerometerChange((res) => {
      console.log('X:', res.x, 'Y:', res.y, 'Z:', res.z);
    });
  },
  onHide() {
    wx.stopAccelerometer(); // 页面隐藏时关闭
  }
});

---

八、本地数据缓存

wx.setStorageSync() / wx.getStorageSync()

案例：

// 保存用户信息
wx.setStorageSync('userInfo', {
  name: '张三',
  age: 25
});

// 读取
try {
  const userInfo = wx.getStorageSync('userInfo');
  if (userInfo) {
    console.log('用户信息:', userInfo);
  }
} catch (e) {
  console.error('读取缓存失败:', e);
}

异步方式：

wx.setStorage({
  key: 'token',
  data: 'abc123xyz',
  success() {
    console.log('token 已保存');
  }
});

---

九、综合性案例：用户登录 + 数据请求 + 缓存 + 跳转

场景：启动时检查登录状态，若无 token 则跳转登录页；若有则请求用户信息并展示。

app.js：

App({
  onLaunch() {
    const token = wx.getStorageSync('token');
    if (!token) {
      wx.redirectTo({ url: '/pages/login/login' });
    }
  }
});

pages/login/login.js：

Page({
  login() {
    // 模拟登录请求
    wx.request({
      url: 'https://api.example.com/login',
      method: 'POST',
      data: { username: 'user', password: '123' },
      success(res) {
        if (res.data.token) {
          wx.setStorageSync('token', res.data.token);
          wx.setStorageSync('userInfo', res.data.user);
          wx.switchTab({ url: '/pages/home/home' }); // 跳转 tabBar 页面
        } else {
          wx.showToast({ title: '登录失败', icon: 'none' });
        }
      }
    });
  }
});

pages/home/home.js：

Page({
  data: { user: null },
  onLoad() {
    const user = wx.getStorageSync('userInfo');
    this.setData({ user });
  },
  logout() {
    wx.removeStorageSync('token');
    wx.removeStorageSync('userInfo');
    wx.redirectTo({ url: '/pages/login/login' });
  }
});

---

本章小结

微信小程序提供了丰富且易用的 API，涵盖：

• 设备与系统信息：用于适配不同机型
• 网络能力：支持安全 HTTPS 请求、文件上传下载
• 路由跳转：灵活控制页面栈与跨小程序跳转
• UI 交互：弹窗、加载、下拉刷新提升用户体验
• 多媒体与传感器：增强应用交互性
• 本地缓存：实现离线数据存储与用户状态保持

合理组合这些 API，可构建功能完整、体验流畅的小程序应用。

---

如需进一步扩展（如 WebSocket、地图、支付等），可继续深入官方文档。