uni-app快速入门章法（一）

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续分享更多前端和AI辅助前端编码新知识~~

不定时写点笔记写点生活~写点前端经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域以及产品化思维找到突破口。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端最卷的开发语言一点不为过，三天一小更，五天一大更。。。一年一个框架升级~=嗯，要的就是这样感觉！与时俱进~ 接下来会逐步分享uni-app的一些开发经验。从文档到基础到实战以及遇到的问题~时间节点不限。

uniapp是什么?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

为什么要选择uni-app？

事关技术选型，就一句话：与时俱进，适配业务，权衡（综合）选择！（但是创业中小型公司uni-app是不二选择，节约成本和时间）

官方的一句话就是：uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

额外优点一套代码多端运行

快速上手

方式一：HBuilderX可视化（推荐）

HBuilderX：官方IDE下载地址，可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs
在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）

方式二：cli 方式创建uni-app

创建 vue3 项目

shell 复制代码

# js模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# ts模板
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

创建vue2项目

shell 复制代码

# 先安装脚手架
npm install -g @vue/cli
# 模板 对应HBuilderX最新正式版
vue create -p dcloudio/uni-preset-vue my-project

注意

Vue3/Vite版要求 node 版本 18+、20+
如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
- HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
- HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径
如想用其他ide开发uni-app，只能使用cli模式
如开发app和uniCloud，必须使用HBuilderX
cli和可视化创建项目的差异化具体参考：uniapp.dcloud.net.cn/quickstart-...

uni-app概念的转换

传统的h5只有1端，即浏览器。而uni-app可跨多端，虽仍属前端，与传统h5有不同。

以前网页大多是b/s，服务端代码混合在页面里；
现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。
运行环境从浏览器变成v8引擎
标准js语法和api都支持，比如if、for、settimeout、indexOf等。
但浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。
可能有些人以为js等于浏览器里的js。其实js是ECMAScript组织管理的，浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。
在uni-app的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用。如果你做过小程序开发，对此应当很了解。

跨端出现的问题

每个端有每个端的特点，有的能被抹平，有的不可能被抹平。
注意：跨端，不是把web的习惯迁移到全平台。而是按照uni的写法，然后全平台使用
uni-app 基于Vue 2.0实现，开发者需注意Vue 1.0 -> 2.0 的使用差异（目前支持vue3）
虽然使用vue，但在app和小程序里，不是spa而是mpa
位置坐标系统一为国测局坐标系gcj02，这种坐标系可以被多端支持。老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll，这种坐标系需要转换。新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响，一直是gcj02

跨端注意

H5 开发注意

小程序开发注意

官方FAQ

uniapp.dcloud.net.cn/faq.html

建议

初次踏入uni-app的小伙伴们先不要急躁写代码，最好的学习资料是官方文档，如果你不懂小程序开发也不懂vue即便你懂也希望你多看看文档，一些基础和差异性以及注意事项。现有issue之类的需要多关注，api 的调用遵循官方，组件库的搭配采用大众化避免小众坑多！！！希望接下来的每一篇都对您有一定的帮助！