下载安装编译器略过,根据步骤慢慢安装就行。
首先认识uniapp项目结构
── pages # 存放所有的页面
── static # 存放静态资源,比如图片/视频/字体/图标等
── App.vue # 项目根组件,页面都是在App.vue下进行切换的,可调用应用的生命周期
── manifest.json # 应用的配置文件,用于指定应用的名称/图标/权限等
── pages.json # 全局配置,决定页面文件的路径/窗口样式/原生的导航栏/底部的原生 tabbar 等
── uni.scss # 本文件里预置了一批 scss 变量预置,如按钮颜色/边框风格,
从pages.json
"pages": [ // pages 是一个数组,第一项就是启动页
{
"path": "pages/index/index",
"style": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "hello-uni",
"navigationBarBackgroundColor":"#2B9939"
}
}
]
pages.json 有提供 tabBar 配置,如果需要多个 tab ,那么可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。不仅可以快速开发导航,而且能够提升性能。因为底层原生引擎在启动时无需等待 js 引擎初始化,可直接读取 pages.json 中配置的 tabBar 信息,渲染原生 tab。
-
pagePath 是页面路径
-
iconPath 配置未选中的图标
-
selectedIconPath 配置选中后显示的图标
-
使用了 tabBar 后,页面跳转得用 switchTab,不能用 redirectTo 和 navigateTo 了。
出错点: 每个界面都要配置pages
遗漏点: 配置成功之后,运用内置网页,达到导航效果,但是运行到微信小程序,没有效果
uni第一节结束,开始搬砖~