-
接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
-
数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
-
为兼容多端运行,建议使用flex布局进行开发
全局配置和页面配置
通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。
通过pages来配置页面
pages数组数组中第一项表示应用启动页
“pages”: [ 、
{
“path”:“pages/message/message” //启动页
},
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “uni-app” //导航栏标题
}
}
]
通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式
“pages”: [ //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 按数组的顺序排序。
属性说明:
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
案例代码:
“tabBar”: {
“list”: [
{
“text”: “首页”, //tab 上按钮文字
“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”
}
]
}
组件的基本使用
text文本组件的用法
-
text
组件相当于行内标签、在同一行显示 -
除了文本节点以外的其他节点都无法长按选中
代码案例
view视图容器组件的用法
View 视图容器, 类似于 HTML 中的 div
组件的属性
总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包