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

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 约定了如下开发规范：

• 页面文件遵循 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 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

代码案例

<view>
  
  <text selectable='true'>来了老弟text>
view>

<view>
  
  <view>
    <text space='ensp'>来了  老弟text>
  view>
  <view>
    <text space='emsp'>来了  老弟text>
  view>
  <view>
    <text space='nbsp'>来了  老弟text>
  view>
view>

<view>
  <text>skybluetext>
view>

view视图容器组件的用法

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

组件的属性

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

  </view>
</view>

button按钮组件的用法

001 - 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

• button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

002 - 案例代码

<button size='mini' type='primary'>前端button>

<button size='mini' type='default' disabled='true'>前端button>

<button size='mini' type='warn' loading='true'>前端button>

image组件的使用

image

图片。

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式

Tips

• 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

• 支持基本常用的选择器class、id、element等

• 在 uni-app 中不能使用 * 选择器。

• page 相当于 body 节点

• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

• uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

  • 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

     @font-face {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    

• 如何使用scss或者less