零基础读完这篇,就能用 uni-app 开发小程序

很多人想学小程序，却被「微信原生 + Vue + 各端差异」搞晕。
uni-app 的核心价值就一句：用 Vue 写法，一套代码多端发布（含微信小程序）。

这篇文章把 uni-app 开发小程序需要的语法和用法尽量讲全。
认真读完 + 跟着写两个小页面，你就能独立开工。

一、先建立整体认知

1. uni-app 是什么？

基于Vue的跨端框架
页面一般是.vue单文件组件（SFC）
用pages.json配路由，用manifest.json配应用信息
调用能力用uni.xxxAPI（类似wx.xxx，但跨端统一）

2. 技术栈你要会什么？

必会	说明
HTML 模板	`view`、`text`、`image`等标签
Vue 基础	`data`、`methods`、指令、组件
JS	异步、对象、数组、模块化
CSS	布局、rpx 单位
小程序概念	页面栈、授权、登录（边做边学）

二、项目结构（先认识文件）

项目根目录/

├── pages/ # 页面目录

│ └── index/

│ └── index.vue

├── components/ # 公共组件

├── static/ # 静态资源

├── App.vue # 应用入口（全局样式、生命周期）

├── main.js # 入口 JS

├── pages.json # 页面路由配置（重要）

├── manifest.json # 应用配置（appid、权限等）

└── uni.scss # 全局 scss 变量

记住：pages.json= 路由表；每个页面 = 一个.vue文件。

三、页面标准结构（每个 .vue 都这样）

三块：

<template>：结构（注意小程序里多用view，少用div）
<script>：逻辑（Vue2 选项式最常见）
<style>：样式（建议加scoped）

四、模板语法（和 Vue 几乎一样）

1. 文本与表达式

2. 指令

指令	作用	示例
`v-if`/`v-else`	条件渲染	`v-if="show"`
`v-for`	列表渲染	`v-for="(item,i) in list" :key="item.id"`
`v-show`	显示隐藏（CSS）	`v-show="visible"`
`v-model`	双向绑定	`v-model="keyword"`
`v-bind`/`:`	动态属性	`:src="imgUrl"`
`v-on`/`@`	事件	`@click="submit"`

3. 常用标签（小程序/uni-app）

标签	用途
`view`	容器（类似 div）
`text`	文本
`image`	图片
`button`	按钮
`input`/`textarea`	输入
`scroll-view`	滚动区域
`swiper`	轮播
`navigator`	页面跳转

五、Script 核心语法

1. data / methods

2. 计算属性 computed

3. 侦听器 watch

4. 组件通信

父 → 子：props

// 子

子 → 父：$emit

六、生命周期（必背）

1. 应用级（App.vue）

2. 页面级（最常用）

示例：接参数

3. 组件级

七、pages.json（路由与窗口配置）

规则：

pages第一项 = 首页
tabBar页面要用uni.switchTab跳转
普通页用navigateTo/redirectTo

八、页面跳转语法（路由）

模板跳转：

九、样式语法（小程序重点）

1. rpx（自适应单位）

经验：1px ≈ 2rpx（在 iPhone6 基准下理解即可）

2. scoped 与 class

3. 常用布局

十、uni API 大全（按场景记）

1. 界面交互

2. 网络请求（开发最常用）

建议封装：

3. 本地存储

4. 上传下载

5. 位置 / 扫码 / 支付等

6. 登录（小程序）

十一、组件开发语法

1. 注册与使用

components/GoodsCard.vue：

页面里：

2. easycom（推荐）

符合命名规则可自动引入，例如components/goods-card/goods-card.vue可直接用<goods-card />。

十二、条件编译（跨端必学）

不同平台写不同代码：

常用平台标识：MP-WEIXIN、H5、APP-PLUS

十三、状态管理（项目变大后用）

小项目：data+ 父子通信够用。
中大型：用Pinia / Vuex。

// 简化理解：全局 store 存用户信息、token、购物车

十四、开发小程序完整流程（实战清单）

HBuilderX 或 CLI 创建 uni-app 项目
在manifest.json配置微信小程序 appid
在pages.json配页面和 tabBar
写页面：列表页 + 详情页
uni.request接接口
uni.setStorageSync存 token
登录页uni.login拿 code
运行到微信开发者工具调试
真机预览、上传提审

十五、新手最容易踩的坑

坑	正确做法
用 div 导致样式怪异	多用`view`
列表不写 key	`v-for`必须`:key`
tab 页用 navigateTo	改用`switchTab`
接口域名报错	微信后台配合法域名 + 开发阶段可勾选不校验
图片路径错	本地图放`static/`，网络图用完整 URL
数据更新了页面不变	检查是否直接改对象引用、数组要用响应式方式

十六、最小可运行示例（列表 + 跳转）

十七、学完这篇你应该掌握什么？

自检表：

会写.vue三段式结构
会用v-if / v-for / v-model / @click / :src
会配pages.json和 tabBar
会用页面生命周期onLoad/onShow
会用uni.navigateTo / switchTab
会用uni.request / showToast / setStorageSync
会写 props 和$emit组件通信
知道 rpx、条件编译、微信登录流程

全部打勾，你就可以开始做真实小程序项目了。

写在最后

uni-app 本质上是：

Vue 语法 + pages.json 路由 + uni API + 小程序标签规范。

不用一次背完所有 API，
先做出「列表页 → 详情页 → 登录 → 请求接口」四个页面，
语法会在实战里自然熟练。