如何快速入门uni-app，uni-app的学习路线及重要知识点！

骑猪看日落 2022-02-02 23:09 334阅读 0赞

###### uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者，或者创业公司来说就是开发神器，省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。 ######

> uni-app使用的是vuejs的语法，所以会vuejs的朋友就可以跳过学习语法这一步了，还不会vuejs的朋友也不要紧，可以先去vue官方文档看看，vue的文档可以说非常通俗易懂了，如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群：682783851。下面就假设大家都会vuejs了。

首先，我们已经知道uni-app是用来制作一个跨平台应用的，所以，在开始之前，我们一定要知道uni-app是如何打包到多个平台的，使用uni-app开发，我这里是建议大家使用官方的开发者工具的，官方工具也非常好用，对于一些配置项非常方便，可以省去很多麻烦，使用开发者工具我们就知道了，uni-app跨平台都是开发者工具来完成编译的。  
那么对于多个平台，是不是只需要看一端就行了呢？答案是否定的，uni-app对百分之90的样式是完全跨平台的，对于一些特殊的，因为每个平台要求不一样，所以我们要使用条件编译来做适配，另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译，重要点是一定要注意每个平台对组件或接口的兼容性。  
另外，需要注意的是uni-app中对vue语法的兼容性，[使用 Vue.js 注意事项][Vue.js]  
了解上面的两点之后，我们就可以开始创建一个项目了，打开hbuilder X，左上角文件-新建-项目，可以选择uni-app的模板学习一下，看看uni-app的目录结构如何，下面是【购靓号】项目的目录结构

![20190508104640110.png][]

下面目录说明好好看一下

> common 是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面  
> components是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数  
> pages 是uni-app放页面的文件夹，我们每次在这里面新建一个页面，hbuilder X都会在pages.json里面配置好。  
> static 是存放字体或图片的文件夹，一些静态资源都可以放这里面  
> store 是vuex状态管理，因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了  
> subpages 是因为内容过多，分的包，这里面新建的页面pages.json里面不会自动生成对应配置项  
> subpagesA 也是分的包，因为小程序限制，所以建议大家在一开始就考虑分包情况。免得后面又要整理  
> unpackage 里面的打包后的东西，我们可以不用管，h5打包后会放在这个里面的dist/build/h5里面  
> App.vue 可以说是入口文件，我们公共的css可以放这里面，应用启动需要做的事情也可以放这里面，但是这个里面是不能进行页面跳转的  
> main.js 是入口js文件，跟vue脚手架一样的，我们可以引入全局js，配置一些全局js函数等都可以在这里操作  
> manifest.json是uni-app的配置项，一般都是可视化配置，很少用到源码配置，大家基本看一看就知道了，不知道的加QQ群私聊群主：682783851  
> pages.json 就是页面配置文件了，你写的每一个页面都要在这里面配置，每个页面一些的特殊配置项也是在这里面写，[uni-app pages配置项][uni-app pages]  
> uni.scss 是uni-app的样式包，大家随意放

这个时候我们就可以开始开发页面了，直接在pages文件夹上右键就可以新建页面了，每一个页面都是vue文件，结构跟我们使用vue脚手架一样，写起来还是很舒服呀！  
上面是一个大概的讲述，具体的学习路线还是要依赖官方文档，大家可以根据下面流程学习

uni-app介绍

uni-app组件

uni-app配置

uni-app接口

###### 一定要注意每个组件和接口在平台的支持情况。 ######

官方文档非常详细，我们无需依赖其他书籍，有问题可以加QQ群，里面有很多学习资料，也可以提资源需求，还可以私聊群主解决问题，群主就是我，哈哈哈。  
另外，想看看uni-app做出来的跨平台应用是什么体验的小伙伴，可以看下面了，体验一下中大型项目的感觉，包含登录支付功能，还可以分享。

###### 下面是【购靓号】平台的跨平台应用，PC端可访问[购靓号][Link 1] 或复制打开链接https://www.golianghao.com。手机端可扫码体验 ######

![20190423160941299.jpg][]

[Vue.js]: https://uniapp.dcloud.io/use
[20190508104640110.png]: /images/20220203/6df3357b18b44e988b2916f494f40d8e.png
[uni-app pages]: https://uniapp.dcloud.io/collocation/pages
[Link 1]: https://www.golianghao.com
[20190423160941299.jpg]: /images/20220203/c45c6f52357640a2beb02c9527dedbad.png