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 注意事项
了解上面的两点之后,我们就可以开始创建一个项目了,打开hbuilder X,左上角文件-新建-项目,可以选择uni-app的模板学习一下,看看uni-app的目录结构如何,下面是【购靓号】项目的目录结构

下面目录说明好好看一下

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.scss 是uni-app的样式包,大家随意放

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

uni-app介绍
uni-app组件
uni-app配置
uni-app接口
一定要注意每个组件和接口在平台的支持情况。

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

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

前往低代码交流专区

更多推荐