微信小程序：从一次点击到一次上线

微信小程序不是“缩小版网页”，而是运行在微信生态里的轻应用。它无需下载安装，即用即走，却能调用摄像头、定位、支付、蓝牙等能力。理解它的关键，不是背 API，而是抓住五个词：双线程、WXML/WXSS/JS/JSON、setData、生命周期、发布审核。

一、小程序是什么

小程序是微信提供的一种应用形态。用户通过扫码、搜索、分享或公众号进入，用完即走，不占桌面图标。对开发者来说，它有一套独立框架：

• 用 WXML 描述结构；
• 用 WXSS 描述样式；
• 用 JavaScript 写逻辑；
• 用 JSON 做配置。

它看起来像前端，但运行机制与浏览器不同。

二、双线程模型：为什么不能直接操作 DOM

小程序采用双线程架构：

• 渲染层：负责显示 WXML 和 WXSS，运行在 WebView 中；
• 逻辑层：负责业务逻辑，运行在 JSCore 中；
• 两者通过 Native 层通信。

这意味着，逻辑层不能直接操作 DOM。想让页面变化，必须调用 setData，把数据从逻辑层发送到渲染层。 所以小程序的开发思维是：数据驱动视图，而不是手动改页面。

三、项目骨架

一个最小小程序通常包含：

app.js        全局逻辑
app.json      全局配置
app.wxss      全局样式
pages/
  index/
    index.wxml
    index.wxss
    index.js
    index.json

app.json 决定页面路径和窗口样式，例如：

{
  "pages": ["pages/index/index"],
  "window": { "navigationBarTitleText": "计数器" }
}

每个页面由四个文件组成，分别负责结构、样式、逻辑和页面配置。

四、四类文件分工

• WXML：类似 HTML，但只能用微信提供的组件，如 view、text、button；
• WXSS：类似 CSS，支持 rpx 单位，750rpx 等于屏幕宽度；
• JS：用 Page() 注册页面，用 App() 注册应用；
• JSON：配置导航栏、页面路径、组件引用等。

它们的关系可以概括为： WXML 是骨架，WXSS 是皮肤，JS 是大脑，JSON 是说明书。

五、一个计数器：少量代码看清核心

下面这个页面，点击按钮后数字加一。它包含了数据绑定、事件和 setData。

<!-- pages/index/index.wxml -->
<view class="box">
  <text>计数：{{count}}</text>
  <button bindtap="add">+1</button>
</view>

// pages/index/index.js
Page({
  data: { count: 0 },
  add() {
    this.setData({ count: this.data.count + 1 })
  }
})

/* pages/index/index.wxss */
.box {
  padding: 40rpx;
  text-align: center;
}

这里发生了三件事：

1. data 中的 count 被绑定到 WXML；
2. 用户点击按钮，触发 add 事件；
3. setData 更新数据，渲染层自动刷新。

这就是小程序最核心的工作方式。

六、生命周期：页面何时加载、显示、销毁

页面常用生命周期包括：

• onLoad：页面加载，只执行一次，适合接收参数；
• onShow：页面显示，每次进入都可能触发；
• onReady：页面首次渲染完成；
• onHide：页面隐藏；
• onUnload：页面卸载。

应用级别还有 onLaunch、onShow、onHide。 理解生命周期，才能知道数据该在哪里请求、定时器该在哪里清理、状态该在哪里保存。

七、常用能力与云开发

小程序提供大量 API：

• wx.request：发起网络请求，需要配置合法域名；
• wx.login：获取登录凭证 code；
• wx.navigateTo：跳转页面；
• wx.showToast：轻提示；
• wx.getLocation：获取位置；
• wx.scanCode：扫码。

如果想少写后端，可以用云开发：云函数、云数据库、云存储。 它适合快速做 MVP，但也要注意权限控制和数据安全。

八、性能与体验

小程序包体有大小限制，主包通常限制在 2MB 左右，整体可通过分包扩展。因此要：

• 少用大图，优先压缩；
• 及时清理定时器和监听；
• setData 只传变化的数据，不要传大对象；
• 长列表使用分页或虚拟列表；
• 频繁更新的动画尽量交给 WXS 或 CSS。

体验上，还要注意加载态、空状态、错误提示和授权引导。

九、发布流程

上线一个小程序，通常要经过：

1. 注册小程序账号，获取 AppID；
2. 用微信开发者工具创建项目；
3. 开发、预览、真机调试；
4. 上传代码；
5. 提交审核；
6. 审核通过后发布。

审核会关注类目、内容合规、隐私协议和用户授权。 不要把 AppSecret 放在前端，也不要用小程序做违规内容。

十、结语

微信小程序看似简单，实则是一套完整的应用框架。 它用双线程保证安全与体验，用 setData 连接逻辑与视图，用生命周期管理页面状态，用审核机制控制生态质量。

如果只记一句话： 小程序不是写页面，而是用数据驱动页面，在微信生态里完成一次轻量服务。

从计数器开始，到支付、地图、云开发，路径很长，但核心始终是那五个词： 双线程、四类文件、setData、生命周期、发布审核。