uni-app学习笔记

项目目录结构

• components：组件目录
• hybrid：存放本地网页的目录
• pages：业务页面文件存放的目录
• platforms：存放各平台专用页面的目录
• static：存放应用引用静态资源
• wxcomponents：存放小程序组件的目录
• App.vue：应用配置，用来配置App全局样式以及监听
• main.js：Vue初始化入口文件
• mainifest.json：配置应用名称、appid、logo、版本等打包信息
• pages.json：配置页面路由、导航条、选项卡等页面类信息
  • 页面的style会覆盖globalStyle中相同的配置项

杂记

• tabBar显示一次后页面内容会保存到内存中，如刷新内容需要在onShow里配置
• rpx：750*元素在设计稿中的宽度/设计稿基准宽度
  • rpx是与屏幕相关的单位，屏幕越宽值越大，高度也会随之变大
  • rpx不支持动态横竖屏切换
• 数据遍历时，可用时间戳来表示数组的唯一标识new Date().getTime()
• 通过转换对象的形式来拷贝数组

  let list = JSON.parse(JSON.stringify(this.list))
  

基础组件

• view —> div ( 块级元素占据一行)
• text —> span ( 绗内元素 )
• image —> img

生命周期函数

uni-app完全支持vue生命周期钩子

应用生命周期

• onLauch：应用初始化完成触发，全局只触发一次
• onShow：应用启动或从后台进入前台触发
• onHide：应用从前台进入后台触发
• onError：应用报错时触发

页面生命周期

• onLoad：监听页面加载
  • 接受上个页面传递的参数
  • 请求后台接口
  • 渲染前的操作
• onShow：监听页面显示，只要页面出现就会触发
• onReady：监听页面初次渲染完成
  • 获取节点信息
• onHide：监听页面隐藏
• onUnLoad：监听页面卸载

页面间跳转执行函数 A页面 B页面

---

路由操作

组件

navigator：<navigator url=''>跳转</navigator>

api

• uni.navigateTo：保留当前页面，跳转到应用内某一页面
• uni.navigateBack：返回原页面

// uni.navigateTo
open () {
	uni.navigateTo({
		url: '../index3/index3'
	})
}

// uni.navigateBack
back () {
	uni.navigateBack({
		delta: 2 // 返回的页面数
	})
}

• uni.redirectTo：关闭当前页面，打开某一页面
  • url非tabBar路径

标准js和浏览器js的区别：

• 非H5端不支持window、document等浏览器的jsAPI
• 所有平台均支持标准js

布局

• 一行排列

display: flex;
align-items: center;

• 一行排列，空间撑开
• 方案一：

<view class="left">左边</view>
<view class="right">右边</view>

.left { width: 100%; }
.right {
	display: flex;
	flex-shrink: 0; // flex-shrink属性定义项目的缩小比例
}

• 方案二

<view class="left">左边</view>
<view class="right">右边</view>

.left { width: 40%; }
.right {
	display: flex;
	flex： 1;
}

• 设置伪类绝对定位时，应加bottom: 0;才能自动撑开高度