我们就用最接地气的方式，把它讲明白。

一、变量是什么？打个比方就懂了

想象一下，你有一个名叫“用户名”的盒子。当用户登录时，你把他的名字“张三”放进这个盒子。之后，无论在页面上显示欢迎语，还是提交订单，你只需要告诉小程序：“去‘用户名’那个盒子里拿数据”。这个盒子，就是变量。它的价值在于：一次存储，随处使用，修改起来也无比方便。

二、在小程序里，变量怎么用？（核心实操）

小程序变量主要活跃在四个地方，作用各不相同：

1. WXML 中的变量（展示数据）：这里是把盒子里的东西“展示”出来。用双大括号 {{ }} 包裹变量名。例如，你有一个变量 greeting: '你好，世界！'，在WXML中写 <text>{{greeting}}</text>，页面上就会显示“你好，世界！”。

2. JavaScript 中的变量（处理逻辑）：这里是“操作”盒子的核心战场。在JS文件（如页面的.js或全局app.js）中，你用 let、const 或 var 来声明和修改变量。

// 在Page的data中定义，用于页面显示
Page({
  data: {
    count: 0 // 这个count变量可以被WXML直接使用
  },
  // 在方法中修改变量
  increaseCount() {
    this.setData({
      count: this.data.count + 1 // 使用this.setData更新，视图会同步变化
    });
  }
})

关键点：直接修改 this.data.count 是无效的，必须用 this.setData() 方法，视图才会跟着更新。

3. WXSS 中的变量（统一样式）：为了让主题色、字号等保持一致，你可以在WXSS中定义“CSS变量”。

/* 在app.wxss中定义全局样式变量 */
page {
  --primary-color: #07c160; /* 定义一个主色调变量 */
  --font-size-large: 18px;
}

/* 在页面WXSS中使用 */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size-large);
}

这样，要改主题色时，只需修改 --primary-color 一处，所有用到的地方自动更新，维护效率大大提升。

4. 全局变量（跨页面共享）：有些数据（如用户登录状态）需要在多个页面使用。这时，你可以把它放在全局的 app.js 中。

// app.js
App({
  globalData: {
    userInfo: null,
    systemInfo: null
  }
})

// 在任何页面获取和设置
const app = getApp()
// 获取
console.log(app.globalData.userInfo)
// 设置
app.globalData.userInfo = {name: '李四'}

三、用好变量的实用技巧与避坑指南

1. 起个好名字：变量名要像盒子标签一样清晰，用 userAvatar 而不是 ua，用 productList 而不是 arr。一个月后你还能看懂。

2. 注意作用域：在函数内部用 let 声明的变量，外面访问不到。需要全局用的，就放到 data 或 globalData 里。

3. 性能优化：setData 是开销较大的操作，避免频繁调用或一次性传输过大数据（比如巨大的数组）。只设置真正变化的数据。

4. 数据驱动视图：这是小程序的核心思想。不要直接操作DOM，而是通过改变变量（数据），让小程序自动更新视图。你想让一个隐藏的弹窗显示，只需 setData({ showModal: true }) 即可。

四、扩展思考：变量如何连接小程序与云开发？

当你进阶使用小程序云开发时，变量更是桥梁。例如，你可以定义一个变量来接收云数据库查询的结果：

// 从云数据库获取数据，存入变量list
const db = wx.cloud.database()
db.collection('todos').get().then(res => {
  this.setData({
    list: res.data // 将查询结果赋值给list变量，页面列表自动渲染
  })
})

你看，变量 list 在这里承载了云端数据，让前后端数据流转变得清晰简单。

总结

微信小程序中的变量，远不止一个技术概念。它是你思维的延伸，是你控制程序逻辑、连接数据与界面的工具。从页面上的一个数字，到全局的用户信息，再到从云端拉取的海量数据，都是变量在背后默默工作。掌握它，就从“写死”静态页面，进阶到了创造动态交互体验的大门。现在，就去你的小程序里，创建几个“盒子”，试试看吧！