学习笔记（1）uni-app 介绍项目目录和文件作用

unpackage 就是打包目录，在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录，例如图片等

components 组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范

• 组件标签靠近小程序规范，详见uni-app 组件规范

• 接口能力（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 组件相当于行内标签、在同一行显示

• 除了文本节点以外的其他节点都无法长按选中

代码案例

来了老弟

来了 老弟

来了 老弟

来了 老弟

skyblue

view视图容器组件的用法

View 视图容器， 类似于 HTML 中的 div

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；