夜雨聆风01 先说点大实话：这玩意儿到底是个啥
官方定义是这样的：uni-app 是一个使用 Vue.js 开发所有前端应用的框架。
翻译成人话就是——你写一套 Vue 代码，它帮你变出微信小程序、iOS App、安卓 App、H5 网页，还有支付宝、百度、抖音等等一堆平台的小程序。 同一套代码，不是你每个平台改一点那种伪跨端，是真的写一次到处跑。
我为啥觉得这东西适合咱们普通打工人？几个很实在的理由：
省时间省钱。 一个人干三个平台的活，交付速度直接翻倍。老板看你的眼神都会变温柔，亲测有效。
社区插件多到离谱。 图表、地图、IM 聊天、支付、登录……你想到的大部分功能，插件市场搜一下就有现成的，拿来改改就能用，不用从零造轮子。
学习成本低得感人。 只要你之前接触过 Vue（哪怕只是跟着视频敲过几个页面，data 和 methods 知道是啥），你就有入场券了。不用学新语法，不用学什么特殊哲学，Vue 那套东西原封不动搬过来就行。你的前置知识不会白费，这一点太重要了。
当然了，这东西不是万能药。复杂动画、重度3D游戏、对系统底层 API 调用特别频繁的应用，原生开发可能更合适。但对于绝大多数的项目、外包单子、个人产品、公司内部工具，uni-app 当前的性价比基本没什么对手。
02 工具先挑好：别在 IDE 上跟自己较劲
你用惯了 VS Code 的话，大可以继续用，装一堆插件也能搞。但我不建议你这么折腾。
用 HBuilderX。这是 uni-app 亲爹团队做的编辑器，亲儿子的待遇——编译优化、真机调试、打包服务全给你整合好了，点几下鼠标就能跑，不用折腾命令行和 webpack 配置。
怎么搞：
打开 dcloud.io，找 HBuilderX 下载入口 选你系统对应的版本，Windows 是 exe，Mac 是 dmg 参考官方教程装好(windows平台解压即可)，打开，画面有点“憨”，界面设计确实不如 VS Code 精致，但两个小时你就习惯了 图片1
多说一句：HBuilderX 的代码提示在写 uni-app 时出奇地好用，很多组件标签打一半它就给你补出来了，参数都不用你记。就冲这一点，值得忍它的颜值。
03 上个手：新建你的第一个 uni-app 项目
打开 HBuilderX，文件 → 新建 → 项目。
在弹出的面板里：
选 uni-app 项目名称随便填，比如 hello-uniapp模板选 默认模板
点创建，完事。
左边文件树突然冒出来一堆东西，你可能会有点慌。我第一次也这样。但其实你只要搞明白几个核心的家伙，后面就全顺了。
04 扒开看看：五个必须认识的大爷
我给你画个重点，这五个文件/文件夹搞懂了，项目结构就算过关了。
4.1 pages/ 文件夹
你所有的页面都蹲在这个目录里。每个页面是一个 .vue 文件，跟你以前写 Vue 组件一模一样。
默认模板给你建了一个 pages/index/index.vue，可以点开看一眼。你会发现几个眼熟但名字略有不同的标签：
<template> <view class="content"> <image class="logo" src="/static/logo.png"></image> <text class="title">Hello</text> </view></template><view>—— 就是 div，换个名字而已 <text>—— 就是 span <image>—— 就是 img
为什么要换名字？因为要跨端。不同平台对这些标签的实现不一样，uni-app 在编译时会自动把它们转成对应平台的底层组件。你写 <view>，到小程序里变成小程序的 view 组件，到 App 里变成原生渲染的 view，到浏览器里变成 div。思想没变，名字换了而已，三分钟就能适应。
4.2 pages.json
这个文件是老大，管着整个应用的结构。
里面都配些啥：
所有页面的路径和窗口样式（导航栏标题、背景颜色等等） 底部 Tab 栏怎么展示（几个按钮、图标长啥样、选中后啥颜色） 全局的下拉刷新、页面转场动画这些效果
打开看一眼默认配置：
{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"uni-app"}}],"globalStyle":{"navigationBarTextStyle":"black","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#F8F8F8"}}一个巨坑我必须提前跟你说：你如果在 pages 文件夹里手动新建了一个页面，必须来 pages.json 里也加上对应的路径，否则怎么跳转都打不开。 我见过至少五个人在这个坑里趴了半天，最后拍着键盘骂自己。HBuilderX 有一个快捷操作：在 pages 文件夹上右键 → 新建页面，它会自动帮你把 pages.json 也更新好，强烈建议用这个方式，省心。
4.3 manifest.json
应用的身份证，给打包和发布用的。
里面管的事儿：
App 图标和启动图 小程序的 appid H5 页面的标题和域名白名单 手机权限（摄像头、定位、相册这些）
前期基本不用管它，只有当你要打包发布、或者想改整个 App 名字的时候才过来翻牌子。先知道有这么个东西就行。
4.4 App.vue
应用根组件，整个应用最外层的容器。
这东西有两个实用场景：
- 写全局样式
：你在 <style>里写的样式会影响所有页面，比如统一字体、全局背景色 - 应用级生命周期
：它有一个 onLaunch钩子，应用启动时触发。你可以在这里检查用户登录状态、做一些初始化操作，比如：
exportdefault {onLaunch: function() {console.log('App Launch')// 这里可以检查登录、获取系统信息等 }}4.5 main.js
入口文件，一般不长。挂全局组件、注册全局过滤器、引入 Vue 插件这些事情在这里干。初期几乎不需要改它，知道它是入口就行。
这五位爷混个脸熟，项目结构这关你就过了。剩下的就是往里面填内容，那个过程还挺上瘾的。
05 跑起来：三种方式挨个试
光看代码太虚了，代码不跑起来跟没写一样。uni-app 支持三种常见的运行方式，我挨个说。
5.1 方式一：浏览器直接看
这是最快最方便的调试手段。
HBuilderX 顶部菜单：运行 → 运行到浏览器 → Chrome
编译几秒钟，浏览器自动弹出来，你的应用画面就在里面了。
这时候整个项目跑在 H5 模式，<view> 实际上被编译成了 div。虽然看着像个网页，但布局逻辑和交互行为跟其他平台是完全一致的。刚开始学，大部分 UI 调试都在浏览器里搞，改代码秒刷，效率最高。
注意：有一部分功能浏览器跑不出来，比如微信登录、支付、调用手机相机，这些必须在真机或模拟器里验证。心里有数就行。
5.2 方式二：微信开发者工具里跑
前置准备：提前装好微信开发者工具，打开后在 设置 → 安全 里把“服务端口”打开。
然后 HBuilderX：运行 → 运行到小程序模拟器 → 微信开发者工具
第一次它会让你指定微信开发者工具的安装路径，配一次就行了。之后每次点击，HBuilderX 会自动编译并把项目丢进微信开发者工具，生成小程序预览。
这一步很重要，因为像分享、获取用户信息、button 的开放能力这类功能，只有在微信生态里才有效果，浏览器里根本没反应。而且热更新同样有效，你在 HBuilderX 改代码保存，微信工具里立刻刷新。
5.3 方式三：直接装到手机里跑（这个最爽）
如果你只做一件事，那就做这个。看到自己写的代码在手机上像个真 App 一样跑起来，那种心理暗示非常强大。
安卓手机操作：
用数据线把手机连上电脑 打开手机的“开发者模式”和“USB 调试”（每个品牌打开方式不同，搜索“你的手机品牌 + 开发者选项”，一般都是去系统版本号那里狂点七下） 插上线之后手机会弹个“允许 USB 调试吗”，点确定 HBuilderX 点 运行 → 运行到手机或模拟器 → 运行到 Android App 基座
控制台开始编译，稍等一会儿，你的手机里会自动装上一个叫“HBuilder”的 App，你的项目代码就在里面跑起来了。改几行代码 Ctrl+S 保存，手机上秒级刷新，热更新，丝滑得不像话。
一个血泪教训我必须反复讲：数据线。 很多人插上线手机没反应，急得团团转，重启编辑器、重启电脑、重装驱动全试了一遍，最后换了一根线就好了。因为市面上很多 USB 线只能充电，不能传数据。找根原装的或者靠谱品牌的线，能解决 90% 的“手机连不上”问题。如果有条件，用手机自带的原装线，一步到位。
iPhone 手机操作：
稍微麻烦一点，需要：
电脑装好 iTunes 用数据线连上电脑 手机上点“信任此电脑” 在苹果开发者后台配置好证书（这个需要交 99 美元年费才能搞真机调试）
如果你刚入门、还没交苹果的保护费，先不用折腾 iOS 真机(土豪请随意)，用安卓或者微信开发者工具替代就行，代码是一样的，不影响学习。后面真要发 App Store 的时候再回来搞也不迟。
06 收个尾：今天你只需要做一件事
讲了一堆，核心任务就一个——把环境搭好，新建项目，然后浏览器、小程序工具、真机各跑一遍。
当你看到自己写的那几行代码出现在手机屏幕上、像一个真正的 App 一样被打开的时候，那种“这玩意儿真是我写的吗”的恍惚感和得意劲儿，非常上瘾。这也会给你很强的心理暗示：跨端开发好像也没那么玄乎嘛。
等你把这一步走通了，下一篇文章我带你搞点实际的，都是实打实的干货，不画饼。
搞起来，有问题请留言。
