之前在朋友的安利下了解到了uni-app,然后最近因为一些原因就想着学习一下,毕竟程序员还是要不断提升自己嘛。害~
首先,什么是uni-app呢
uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
简单来说就是一次开发,多端适配。
uni-app官网
创建第一个uni-app项目
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
这里我们使用官网推荐的HBuilderX来创建第一个项目。
HBuilderX可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
HBuilderX下载地址
好了,接下来就该正式创建项目了QAQ
- 点击左上角文件→新建→项目
- 选择uni-app类型,输入名称,选择uni-app项目模板,点击创建。
这样我们的第一个项目就建好啦 嘻嘻嘻
那么问题来了,这些项目目录分别代表什么呢?
项目目录 | 代表内容 |
---|---|
components | uni-app组件目录,存放着可复用组件 |
pages | 存放页面文件的目录 |
static | 静态资源目录 |
App.vue | 调用应用生命周期函数、配置全局样式、配置全局的存储globalData |
main.js | vue项目的入口文件 |
manifest.json | 应用的配置文件,用于指定应用的名称、图标、权限等 |
pages.json | 对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等 |
uni.scss | 为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置 |
我们可以在pages.json里面做一些全局的配置或者页面的一些配公共配置项。
新建页面都需要在pages.json里面的pages数组进行注册,不然会报错
/*
* json文件 格式应该为json格式 "key":"value" or "key":{} || []
*/
{
// 页面配置文
"pages": [
// 页面配置对象
{
// 配置碰面路径 第一项应为应用的入口文件
"path": "pages/index/index",
// 页面配置会覆盖全局的相同配置
// 具体配置项 https://uniapp.dcloud.io/collocation/pages?id=style
"style": {
"navigationBarTitleText": "我的第一个uni-app项目"
}
},
// 应用中新增/减少页面,都需要对 pages 数组进行修改
{
"path":"pages/login/Login",
"style": {
"navigationBarTitleText": "我的第二个页面"
}
}
],
// 全局配置文件
"globalStyle": {
// 导航栏字体颜色 仅支持white black
"navigationBarTextStyle": "white",
// 导航栏标题
"navigationBarTitleText": "我的第一个uni-app项目",
// 导航栏北京色 仅支持十六进制颜色
"navigationBarBackgroundColor": "#007AFF",
// 下拉出来的背景色
"backgroundColor": "#FFFFFF",
// 是否开启下拉刷新 默认false
"enablePullDownRefresh":true,
// 下拉loading样式 仅支持dark light
"backgroundTextStyle":"light",
// 窗口显示的动画效果 仅在app支持
"animationType":"pop-in",
// 动画持续时间
"animationDuration":300,
// 设置编译到app平台的特定样式 每个平台都有对应的特定样式配置
"app-plus":{
}
}
}
这样我们算是对uni-app有了一个基本的认识,有机会再继续分享我对uni-app的学习经验吧(实际上是好好再学习一下)