🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

在微信小程序的开发过程中，数据管理与交互是实现功能的重要基础。微信小程序提供了一系列强大的数据API，帮助开发者轻松处理数据的存储、读取和管理。无论是用户信息、应用设置还是动态内容，合理使用数据API可以大幅提升小程序的用户体验和性能。

本文将系统介绍微信小程序的数据API，涵盖其基本概念和常用功能，包括本地存储、云开发及数据绑定等。我们将逐步深入，讲解如何利用这些API实现数据的高效管理，并通过实际案例展示如何在小程序中应用数据API来满足不同需求。

无论您是刚入门的小程序开发者，还是希望提升数据处理能力的经验者，这篇文章都将为您提供实用的指导和参考。让我们一起探索微信小程序的数据API，掌握管理和应用数据的最佳实践，推动您的开发之旅更进一步！

🚀一、数据API

下面是一个完整的微信小程序使用 localStorage 存储和读取用户登录信息的案例。这个案例包括用户登录、存储用户信息到 localStorage、以及从 localStorage 读取用户信息。

🔎1.新建一个小程序项目

首先，确保你已经在微信开发者工具中创建了一个新的小程序项目。

🔎2.项目目录结构

假设我们的项目目录结构如下：

/miniprogram
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   ├── index.wxss
│   ├── login
│   │   ├── login.js
│   │   ├── login.json
│   │   ├── login.wxml
│   │   ├── login.wxss

🔎3.app.js

在 app.js 中，我们可以添加一些全局的应用配置或监听器。

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
    userInfo: null
  }
})

🔎4.pages/login/login.wxml

创建一个简单的登录页面。

<!-- pages/login/login.wxml -->
<view class="container">
  <view class="form">
    <input type="text" placeholder="用户名" bindinput="onUsernameInput" />
    <input type="password" placeholder="密码" bindinput="onPasswordInput" />
    <button bindtap="login">登录</button>
  </view>
</view>

🔎5.pages/login/login.wxss

添加一些简单的样式。

/* pages/login/login.wxss */
.container {
  padding: 20px;
}

.form {
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 4px;
}

🔎6.pages/login/login.js

创建登录逻辑，并将用户信息存储到 localStorage 中。

// pages/login/login.js
Page({
  data: {
    username: '',
    password: ''
  },

  onUsernameInput(event) {
    this.setData({
      username: event.detail.value
    });
  },

  onPasswordInput(event) {
    this.setData({
      password: event.detail.value
    });
  },

  login() {
    const { username, password } = this.data;

    if (username && password) {
      // 模拟登录请求
      wx.request({
        url: 'https://example.com/api/login', // 替换为实际的登录接口
        method: 'POST',
        data: {
          username,
          password
        },
        success: (res) => {
          if (res.data.success) {
            // 登录成功，将用户信息存储到 localStorage
            wx.setStorageSync('userInfo', res.data.userInfo);

            // 跳转到首页
            wx.redirectTo({
              url: '/pages/index/index'
            });
          } else {
            wx.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          wx.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    } else {
      wx.showToast({
        title: '请输入用户名和密码',
        icon: 'none'
      });
    }
  }
});

🔎7.pages/index/index.wxml

首页展示用户信息。

<!-- pages/index/index.wxml -->
<view class="container">
  <text wx:if="{{userInfo}}">欢迎, {{userInfo.username}}</text>
  <button bindtap="logout">注销</button>
</view>

🔎8.pages/index/index.wxss

首页样式。

/* pages/index/index.wxss */
.container {
  padding: 20px;
}

button {
  padding: 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 20px;
}

🔎9.pages/index/index.js

编写读取用户信息和注销逻辑。

// pages/index/index.js
Page({
  data: {
    userInfo: null
  },

  onLoad() {
    // 从 localStorage 获取用户信息
    const userInfo = wx.getStorageSync('userInfo');
    this.setData({
      userInfo
    });
  },

  logout() {
    // 清除本地存储的用户信息
    wx.removeStorageSync('userInfo');

    // 跳转到登录页
    wx.redirectTo({
      url: '/pages/login/login'
    });
  }
});

🔎10.app.json

配置页面路径。

{
  "pages": [
    "pages/login/login",
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”