微信小程序开发上手：什么是微信小程序？基于什么技术？如何开始开发？（1）

微信小程序是一种运行在微信生态内的轻量级应用形态。它不需要像传统 App 那样从应用商店下载安装，用户可以通过搜索、扫码、分享卡片、公众号菜单、聊天入口等方式直接打开使用。对于用户来说，小程序像是“即开即用”的服务入口；对于开发者来说，它是一套由微信提供运行环境、组件体系、API 能力、发布审核机制和生态入口的应用开发平台。

从定位上看，小程序并不是普通网页，也不是完整原生 App。它更像是介于 H5 页面和原生 App 之间的一种应用形态：开发体验接近前端，运行环境由微信托管，用户体验又比普通网页更接近 App。微信小程序框架通常被描述为由逻辑层 App Service和视图层 View两部分组成，视图层主要使用 WXML、WXSS，逻辑层主要使用 JavaScript，并通过数据绑定和事件系统连接二者。

一、什么是微信小程序？

简单说，微信小程序就是运行在微信内部的小型应用。它可以做电商商城、预约系统、点餐系统、会员系统、工具应用、内容社区、企业服务、校园服务、政务服务、IoT 控制面板等。

传统 App 需要下载安装、注册登录、占用较多存储空间，并且用户获取成本较高。H5 页面虽然打开方便，但体验、权限能力、微信生态能力、离线缓存、页面切换和系统集成通常不如小程序。小程序的价值就在于，它既保留了 Web 开发的轻量性，又获得了微信提供的一系列平台能力，例如登录、支付、分享、订阅消息、地图、扫码、相机、文件、蓝牙、云开发等。

可以把小程序理解成三层东西的结合：

第一层是应用形态。它面向用户，是一个可以打开、浏览、操作、购买、提交表单、参与互动的应用。

第二层是技术框架。它面向开发者，由 WXML、WXSS、JavaScript、JSON 配置、组件、API、生命周期等组成。

第三层是微信生态能力。它面向业务，包括微信登录、微信支付、分享传播、公众号联动、企业微信联动、视频号/直播/广告等生态入口。

二、微信小程序基于什么技术？

微信小程序的技术栈和传统前端非常接近，但它不是直接使用 HTML、CSS、DOM 和浏览器 API。微信为小程序定义了一套自己的开发模型。

小程序的页面结构使用WXML，它类似 HTML，但标签、语法和组件体系由微信小程序框架定义。页面样式使用WXSS，它类似 CSS，但增加了适合移动端适配的单位和部分限制。业务逻辑使用JavaScript，开发者通过 JS 编写数据处理、事件响应、接口调用和页面跳转逻辑。页面和全局配置使用JSON，用于声明页面路径、窗口样式、导航栏、tabBar、权限等。

因此，初学者可以这样理解：

WXML 负责“页面上有什么”。

WXSS 负责“页面长什么样”。

JavaScript 负责“页面怎么动、数据怎么变、点击后发生什么”。

JSON 负责“这个页面或应用如何配置”。

例如，一个商品列表页面中，WXML 定义商品图片、标题、价格、按钮的位置；WXSS 定义卡片间距、字体大小、颜色、布局；JavaScript 负责请求商品数据、处理点击购买按钮、跳转到详情页；JSON 可以配置这个页面的导航栏标题。

三、小程序和普通网页有什么区别？

很多前端开发者刚接触小程序时，会自然地把它和 H5 页面类比。这个类比有帮助，但不能完全等同。

普通网页运行在浏览器里，开发者可以直接使用 HTML、CSS、JavaScript、DOM、BOM、浏览器事件等能力。而微信小程序运行在微信提供的小程序环境里，开发者不能像网页那样随意操作 DOM，也不能直接调用所有浏览器 API。小程序通过自己的组件、API 和数据绑定机制来完成页面渲染和交互。

小程序的核心思想是：开发者修改数据，框架根据数据变化更新视图。也就是说，开发者更多关注数据状态，而不是直接操作页面节点。这和 Vue、React 等现代前端框架的思想有相似之处。

这个模型让小程序的结构更清晰，但也要求开发者改变一些传统 DOM 编程习惯。比如你不是先找到某个按钮节点再改它的文本，而是修改数据字段，让页面根据数据自动渲染。

四、小程序的基本工程结构

一个典型微信小程序项目通常包含全局文件、页面文件、组件文件、工具函数、静态资源等部分。

常见结构如下：

miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── pages/ │ ├── index/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── detail/ │ ├── detail.js │ ├── detail.json │ ├── detail.wxml │ └── detail.wxss ├── components/ │ └── product-card/ │ ├── product-card.js │ ├── product-card.json │ ├── product-card.wxml │ └── product-card.wxss ├── utils/ │ └── request.js └── assets/ └── images/

其中，app.js是小程序的全局逻辑入口，通常用于处理启动、登录态、全局数据等。app.json是全局配置文件，负责注册页面、配置窗口样式、tabBar、网络超时、分包等。app.wxss是全局样式文件，里面定义的样式可以影响全局页面。

每个页面通常由四个文件组成：.wxml、.wxss、.js、.json。其中.json不是每个页面都必须复杂配置，但页面级导航栏标题、组件引用等通常会写在这里。

五、核心概念：页面、组件、数据绑定、事件

学习小程序，最重要的是先掌握四个核心概念：页面、组件、数据绑定、事件。

页面是小程序的基本展示单位。一个页面通常对应一个业务场景，比如首页、商品详情页、购物车页、个人中心页。页面有自己的生命周期，比如加载、显示、隐藏、卸载。开发者可以在对应生命周期函数中请求数据、初始化状态或清理资源。

组件是可复用的 UI 和逻辑单元。比如商品卡片、搜索框、弹窗、地址选择器、底部操作栏都可以封装成组件。组件化可以让项目更清晰，也方便多人协作。

数据绑定是小程序开发的核心。页面 JS 文件中定义data，WXML 中使用模板语法展示数据。当 JS 中通过setData更新数据后，视图层会自动更新。

事件用于处理用户交互。比如点击按钮、输入文本、滑动列表、提交表单等，都可以绑定事件处理函数。

示例：

<!-- index.wxml --> <view class="container"> <text>{{title}}</text> <button bindtap="changeTitle">修改标题</button> </view>

// index.js Page({ data: { title: '你好，小程序' }, changeTitle() { this.setData({ title: '标题已更新' }) } })

这段代码说明了一个最基础的小程序交互过程：页面先显示title，用户点击按钮后触发changeTitle，逻辑层调用setData修改数据，视图随之更新。