uni-app⼊门及uni-app项⽬⽬录介绍
uni-app项⽬路径介绍
介绍项⽬⽬录和⽂件作⽤
uni-app介绍
即使不跨端，uni-app同时也是更好的⼩程序开发框架。
具有vue和⼩程序的开发经验，可快速上⼿uni-app
为什么要去学习uni-app？
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种⼩程序的应⽤，不需要再去学习开发其他应⽤的框架，相对公司⽽⾔，也⼤⼤减少了开发成本。
环境搭建
安装编辑器HbuilderX
HBuilderX是通⽤的前端开发⼯具，但为uni-app做了特别强化。
下载App开发版，可开箱即⽤
安装开发者⼯具
利⽤HbuilderX初始化项⽬
点击HbuilderX菜单栏⽂件>项⽬>新建
选择uni-app，填写项⽬名称，项⽬创建的⽬录
运⾏项⽬
在菜单栏中点击运⾏，运⾏到浏览器，选择浏览器即可运⾏
在开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼩程序模拟器 -> 开发者⼯具，即可在开发者⼯具⾥⾯体验uni-app
在开发者⼯具⾥运⾏：进⼊hello-uniapp项⽬，点击⼯具栏的运⾏ -> 运⾏到⼿机或模拟器 -> 选择调式的⼿机
注意：
如果是第⼀次使⽤，需要先配置⼩程序ide的相关路径，才能运⾏成功
开发者⼯具在设置中安全设置，服务端⼝开启
介绍项⽬⽬录和⽂件作⽤
pages.json ⽂件⽤来对 uni-app 进⾏全局配置，决定页⾯⽂件的路径、窗⼝样式、原⽣的导航栏、底部的原⽣tabbar 等
manifest.json ⽂件是应⽤的配置⽂件，⽤于指定应⽤的名称、图标、权限等。
App.vue是我们的跟组件，所有页⾯都是在App.vue下进⾏切换的，是页⾯⼊⼝⽂件，可以调⽤应⽤的⽣命周期函数。
main.js是我们的项⽬⼊⼝⽂件，主要作⽤是初始化vue实例并使⽤需要的插件。
uni.scss⽂件的⽤途是为了⽅便整体控制应⽤的风格。⽐如按钮颜⾊、边框风格，uni.scss⽂件⾥预置了⼀批scss变量预置。unpackage就是打包⽬录，在这⾥有各个平台的打包⽂件
pages所有的页⾯存放⽬录
static静态资源⽬录，例如图⽚等
components组件存放⽬录
为了实现多端兼容，综合考虑编译速度、运⾏性能等因素，uni-app 约定了如下开发规范：
页⾯⽂件遵循
组件标签靠近⼩程序规范，详见
接⼝能⼒（JS API）靠近⼩程序规范，但需将前缀 wx 替换为 uni，详见
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页⾯的⽣命周期
为兼容多端运⾏，建议使⽤flex布局进⾏开发
全局配置和页⾯配置
通过globalStyle进⾏全局配置
⽤于设置应⽤的状态栏、导航条、标题、窗⼝背景⾊等。
属性类型默认值描述navigationBarBackgroundColor HexColor#F7F7F7导航栏背景颜⾊（同状态栏背景⾊）navigationBarTextStyle String white导航栏标题颜⾊及状态栏前景颜⾊，仅⽀持 black/white navigationBarTitleText String导航栏标题⽂字内容backgroundColor HexColor#ffffff窗⼝的背景⾊
backgroundTextStyle String dark下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh Boolean false是否开启下拉刷新，详见。
onReachBottomDistance Number50页⾯上拉触底事件触发时距页⾯底部距离，单位只⽀持px，详见创建新的message页⾯
右键pages新建message⽬录，在message⽬录下右键新建.vue⽂件，并选择基本模板
<template>
<view>
这是信息页⾯
</view>
</template>
<script>
</script>
<style>
</style>
通过pages来配置页⾯
属性类型默认值描述
path String配置页⾯路径
style Object配置页⾯窗⼝表现，配置项参考
pages数组数组中第⼀项表⽰应⽤启动页
"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
通过style修改页⾯的标题和导航栏背景⾊，并且设置h5下拉刷新的特有样式
"pages":[//pages数组中第⼀项表⽰应⽤启动页，参考：uniapp.dcloud.io/collocation/pages
{
"path":"pages/message/message",
"style":{
"navigationBarBackgroundColor":"#007AFF",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":true,
"disableScroll":true,
"h5":{
"pullToRefresh":{
"color":"#007AFF"
}
}
}
}
]
配置tabbar
如果应⽤是⼀个多 tab 应⽤，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显⽰的对应页。
Tips
当设置 position 为 top 时，将不会显⽰ icon
tabBar 中的 list 是⼀个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
属性说明：
属性类型必填默认值描述平台差异说明
color HexColor是tab 上的⽂字默认颜⾊
selectedColor HexColor是tab 上的⽂字选中时的颜⾊
backgroundColor HexColor是tab 的背景⾊
borderStyle String否black tabbar 上边框的颜⾊，仅⽀持 black/white App 2.3.4+ ⽀持其他颜⾊值list Array是tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String否bottom可选值 bottom、top top 值仅⼩程序⽀持其中 list 接收⼀个数组，数组中的每个项都是⼀个对象，其属性值如下：
属性类型必
填
图片编辑器app说明
pagePath String是页⾯路径，必须在 pages 中先定义text String是tab 上按钮⽂字，在 5+APP 和 H5 平台为⾮必填。例如中间可放⼀个没有⽂字的+号图标
iconPath String
否图⽚路径，icon ⼤⼩限制为40kb，建议尺⼨为 81px * 81px，当 postion 为 top 时，此参数⽆效，不⽀持⽹络图
⽚，不⽀持字体图标selectedIconPath String
否
选中时的图⽚路径，icon ⼤⼩限制为40kb，建议尺⼨为 81px * 81px ，当 postion 为 top 时，此参数⽆效
属性类型必
填说明
案例代码：
"tabBar": { "list": [ {
"text": "⾸页",
"pagePath":"pages/index/index", "iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png" }, {
"text": "信息",
"pagePath":"pages/message/message", "iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png" }, {
"text": "我们",
"pagePath":"pages/contact/contact", "iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png" } ] }
condition 启动模式配置
启动模式配置，仅开发期间⽣效，⽤于模拟直达页⾯的场景，如：⼩程序转发后，⽤户点击所打开的页⾯。属性说明：
属性类型是否必填
描述
current Number 是当前激活的模式，list节点的索引值
list
Array
是
启动模式列表
list说明：
属性类型是否必填
描述name String 是启动模式名称path String 是启动页⾯路径
query
String
否
启动参数，可在页⾯的 函数⾥获得
组件的基本使⽤
uni-app提供了丰富的基础组件给开发者，开发者可以像搭积⽊⼀样，组合各种组件拼接称⾃⼰的应⽤uni-app中的组件，就像 HTML 中的 div 、p 、span 等标签的作⽤⼀样，⽤于搭建页⾯的基础结构text ⽂本组件的⽤法001 - text 组件的属性
属性
类型
默认值
必填
说明
selectable boolean false否⽂本是否可选属性类型默认值必填说明
space string.否显⽰连续空格，可选参数：ensp、emsp、nbsp decode boolean false否是否解码
text 组件相当于⾏内标签、在同⼀⾏显⽰
除了⽂本节点以外的其他节点都⽆法长按选中
发布评论