启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
| 属性 |
类型 |
是否必填 |
描述 |
| current |
Number |
是 |
当前激活的模式，list节点的索引值 |
| list |
Array |
是 |
启动模式列表 |
list说明：
| 属性 |
类型 |
是否必填 |
描述 |
| name |
String |
是 |
启动模式名称 |
| path |
String |
是 |
启动页面路径 |
| query |
String |
否 |
启动参数，可在页面的 onLoad 函数里获得 |
1.什么是uni-app
uni-app 是一个使用 (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
-app的优点
3.项目目录及开发规范
开发规范主要事遵循小程序的规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
- 页面文件遵循 Vue 单文件组件 (SFC) 规范(opens new window)
- 组件标签靠近小程序规范，详见uni-app 组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
- 数据绑定及事件处理同 规范，同时补充了App及页面的生命周期
- 为兼容多端运行，建议使用flex布局进行开发
3.1.0.对css和js的引入
的引入：
js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录 import add from '@/common/'; // 相对路径 import add from '../../common/';
注意
- js 文件不支持使用/开头的方式引入
的引入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
<style>
@import "../../common/";
.uni-card {
box-shadow: none;
}
</style>
全局配置（文件中配置）
5.对页面的配置
通过pages来配置页面
| 属性 |
类型 |
默认值 |
描述 |
| path |
String |
配置页面路径 |
|
| style |
Object |
配置页面窗口表现，配置项参考 pageStyle |
pages数组数组中第一项表示应用启动页
注意：这里和路由不一样，想要显示页面，就要在中配置路径；
想要h5页面能够显示下拉刷新的效果，可以单独配置；
tops：
配置页面中的选项时，最后一个配置后面不能带“ ，”---否则会报错
"pages": [ //pages数组中第一项表示应用启动页，参考：/collocation/pages
{
"path":"./pages/message",
"style":{
"navigationBarTitleText":"message pages~",
"backgroundColor":"#007AFF",
"navigationBarBackgroundColor":"#aaaa00",
"enablePullDownRefresh":true,
"navigationBarTextStyle":"white",
"h5":{///单独配置h5页面的效果
"pullToRefresh":{
"color":"#007AFF"
}
}
}
},
6.配置tabBar
如果应用是一个多 tab (界面/页面)应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
Tips
- 当设置 position 为 top 时，将不会显示 icon（图片配置标签）
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
属性说明：
| 属性 |
类型 |
必填 |
默认值 |
描述 |
平台差异说明 |
| color |
HexColor |
是 |
tab 上的文字默认颜色 |
||
| selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
||
| backgroundColor |
HexColor |
是 |
tab 的背景色 |
||
| borderStyle |
String |
否 |
black |
tabbar 上边框的颜色，仅支持 black/white |
App 2.3.4+ 支持其他颜色值 |
| list |
Array |
是 |
tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
||
| position |
String |
否 |
bottom |
可选值 bottom、top |
top 值仅微信小程序支持 |
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 |
类型 |
必填 |
说明 |
| pagePath |
String |
是 |
页面路径，必须在 pages 中先定义 |
| text |
String |
是 |
tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
| iconPath |
String |
否 |
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
| selectedIconPath |
String |
否 |
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
案例代码：
"tabBar": {
"color":"#555500",
"selectedColor":"#007AFF",
"backgroundColor":"#aaff7f",
"borderStyle":"#a5a5a5",
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",注意目录前面没有“./”
"iconPath":"static/tabs/",
"selectedIconPath":"static/tabs/"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/",
"selectedIconPath":"static/tabs/"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/",
"selectedIconPath":"static/tabs/"
}
]
}
的启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
注意这个属性和与tabBar平级
属性说明：
| 属性 |
类型 |
是否必填 |
描述 |
| current |
Number |
是 |
当前激活的模式，list节点的索引值 |
| list |
Array |
是 |
启动模式列表 |
list说明：
| 属性 |
类型 |
是否必填 |
描述 |
| name |
String |
是 |
启动模式名称 |
| path |
String |
是 |
启动页面路径 |
| query |
String |
否 |
启动参数，可在页面的 onLoad 函数里获得 |
"condition":{
"current": 0,
"list":[{
"name":"详情页",
"path":"pages/datil",
"query":"123"
}
]
}
效果就会出现详情页来显示我们设置的特定组件：
文本组件
-------------样例：<text></text>
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| selectable |
boolean |
false |
否 |
文本是否可选 |
| space |
string |
. |
否 |
显示连续空格，可选参数： |
| decode |
boolean |
false |
否 |
是否解码 |
-
text组件相当于行内标签、在同一行显示，可以使用<view>换行 - 除了文本节点以外的其他节点都无法长按选中
<view>
<!-- 长按文本是否可选 -->
<text selectable='true'>来了老弟</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space='ensp'>来了 老弟</text>
</view>//ensp显示中文空格一般的大小
<view>
<text space='emsp'>来了 老弟</text>
</view>//显示的和中文空格一样
<view>
<text space='nbsp'>来了 老弟</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
<view>
<!-- 是否解码 -->
<text decode='true'> < > & '    </text>
</view>
组件
View 视图容器， 类似于 HTML 中的 div
属性说明
| 属性名 |
类型 |
默认值 |
说明 |
| hover-class |
String |
none |
指定按下去（移动端）的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-stop-propagation |
Boolean |
false |
阻止冒泡，{App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）} |
| hover-start-time |
Number |
50 |
按住后多久出现点击态，单位毫秒 |
| hover-stay-time |
Number |
400 |
手指松开后点击态保留时间，单位毫秒 |
:hover-start-time="2000"-----注意这里的“2000”本来是字符串，加上“：”后就可被识别为数组；
<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>
按钮组件
| 属性名 |
类型 |
默认值 |
说明 |
| size |
String |
default mini（小）、default |
按钮的大小 |
| type |
String |
default primary（看在哪运行）、default（白）、warn（红） |
按钮的样式类型 |
| plain （英文：无装饰的） |
Boolean |
false |
按钮是否镂空，背景色透明 |
| disabled |
Boolean |
false |
是否被禁用 |
| loading |
Boolean |
false |
名称是否带 loading t图标 |
-
button组件默认独占一行，设置size为mini时可以在一行显示多个
<button size='mini' type='primary'>前端</button> <button size='mini' type='default' disabled='true'>前端</button> <button size='mini' type='warn' loading='true'>前端</button>
11.image组件
| 属性名 |
类型 |
默认值 |
说明 |
平台差异说明 |
| src |
String |
图片资源地址 |
||
| mode |
String |
'scaleToFill' （aspectFit--保持横纵比&使短边显示出来） |
图片裁剪、缩放的模式 |
Tips
-
<image>组件默认宽度 300px、高度 225px； -
src仅支持相对路径、绝对路径，支持 base64 码； - 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。
-app中的样式
1. rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
2. 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
/@import url("./static/font/");（且想要引用这个资源必须用 lang=“scss”）
3. 支持基本常用的选择器class、id、element等
4. 在 uni-app 中不能使用 * 选择器。
5. page 相当于 body 节点
6. 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 中相同的选择器。
7. uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
-
- 字体文件小于 40kb，
uni-app会自动将其转化为 base64 格式； - 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。 （在csss里的引用：绝对路径）
- 字体文件小于 40kb，
例如：'~@/static/'
@font-face {
font-family: test1-icon;
src: url('~@/static/');
}
13.数据的绑定：
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
data () {
return {
msg: 'hello-uni'
}
}
}
插值表达式的使用
1. 利用插值表达式渲染基本数据
<view>{{msg}}</view>
2. 在插值表达式中使用三元运算
<view>{{ flag ? '我是真的':'我是假的' }}</view>
3.基本运算
<view>{{1+1}}</view>
-bind/v-for
在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default {
data () {
return {
img: '/image/monkey_02.jpg'
}
}
}
1.利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成:
<image :src="img"></image>
-for的使用
data中定以一个数组，最终将数组渲染到页面上
data () {
return {
arr: [
{ name: '刘能', age: 29 },
{ name: '赵四', age: 39 },
{ name: '宋小宝', age: 49 },
{ name: '小沈阳', age: 59 }
]
}
}
利用v-for进行循环
<view v-for="(item,i) in arr" :key="i">名字：{{}}---年龄：{{}}</view>
15.注册事件传递的参数
1.事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
<button @click="tapHandle">点我啊</button>
事件函数定义在methods中
methods: {
tapHandle () {
('真的点我了')
}
}
2.事件传参
- 默认如果没有传递参数，事件函数第一个形参为事件对象
// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
tapHandle (e) {
(e)
}
}
- 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
tapHandle (num) {
(num)
}
}
- 如果获取事件对象也想传递参数
// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
tapHandle (num,e) {
(num,e)
}
}
的生命周期
1.应用的生命周期（写在中）
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
| 函数名 |
说明 |
| onLaunch |
当 初始化完成时触发（全局只触发一次） |
| onShow |
当 启动，或从后台进入前台显示 |
| onHide |
当 从前台进入后台 |
| onError |
当 报错时触发 |
2.页面的生命周期 （写在每一个组件中）
onload 监听加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），
onShow 监听页面显示。页面每次出现在屏幕上都触发
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
注意页面的加载一次之后，会进入缓存区，再次进入时不会触发onload
注意这里生命周期和method同级；
17.下拉刷新
1.开启下拉刷新
在uni-app中有两种方式开启下拉刷新
- 需要在
里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh - 通过调用方法来开启下拉刷新
1.1通过配置文件开启
创建list页面进行演示
<template>
<view>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
}
}
</script>
<style>
</style>
通过文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
{
"path":"pages/list/list",
"style":{
"enablePullDownRefresh": true
}
}
1.2通过API开启
()
2.监听下拉刷新
通过onPullDownRefresh可以监听到下拉刷新的动作
onPullDownRefresh是另一个生命周期函数；
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
()
}
},
onPullDownRefresh () {
('触发下拉刷新了')
}
}
3.关闭下拉刷新
()
停止当前页面下拉刷新。
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
()
}
},
onPullDownRefresh () {
= []
setTimeout(()=> {
= ['前端','java','ui','大数据']
()这就属于调用API来关闭下拉刷新
}, 1000);
}
}
</script>
18.上拉加载（由下向上拉动）
上拉加载通过在文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
通过onReachBottom监听到触底的行为
onReachBootom---也是一个生命周期函数
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
('触底了')
= [...,...["JAVA","UI","etc"]]
每当页面加载到底部就会拼接上【“Java”，“UI”，“etc”】然后在显示出来；
}
}
</script>
<style>
view{
height: 100px;
line-height: 100px;
}
</style>
注意这里对文中“...，...[]”的用法：
iClick3() { let iArray = ['1', '2', '3']; console.log(['0', ...iArray, '4']); // 打印结果 ["0", "1", "2", "3", "4"] }
19.发送get请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
({///调用uni的API；
url: 'http://localhost:8082/api/getlunbo',
//注意这里的地址要加上协议；
success(res) {
(res)
}
})
}
}
}
</script>
20.数据的缓存
官方文档
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
({
key: 'id',
data: 100,
success () {
('存储成功')
}
})
}
}
}
</script>
<style>
</style>
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
代码演示
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
('id',100)
}
}
}
</script>
<style>
</style>
从本地缓存中异步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
({
key: 'id',
success: res=>{
=
}
})
}
}
}
</script>
从本地缓存中同步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = ('id')
(id)
}
}
}
</script>
从本地缓存中异步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
({
key: 'id',
success: function () {
('删除成功')
}
})
}
}
}
</script>
从本地缓存中同步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
('id')
}
}
}
</script>
21.图片的上传和预览
1.上传图片
方法从本地相册选择图片或使用相机拍照。
///注意例子中的this指向问题，下面的this指向是vuecomperment，而我们要的数据在回调函数的参数res中；
<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
({
count: 9,
success: res=>{注意这里this指向问题；
=
}
})
}
}
}
</script>
2.预览图片
结构
<view> <image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image> </view>
预览图片的方法
previewImg (current) {///接收传递过来的参数item：
({
urls: ,
current
})
}
22.条件编译/注释，跨段兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 加平台标识 开头，以 #endif 结尾。
平台标识
| 值 |
平台 |
参考文档 |
| APP-PLUS |
5+App |
HTML5+ 规范 |
| H5 |
H5 |
|
| MP-WEIXIN |
微信小程序 |
微信小程序 |
| MP-ALIPAY |
支付宝小程序 |
支付宝小程序 |
| MP-BAIDU |
百度小程序 |
百度小程序 |
| MP-TOUTIAO |
头条小程序 |
头条小程序 |
| MP-QQ |
QQ小程序 |
（目前仅cli版支持） |
| MP |
微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 |
1.组件的条件注释
代码演示
<!-- #ifdef H5 --> <view> h5页面会显示 </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view> 微信小程序会显示 </view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view> app会显示 </view> <!-- #endif -->
的条件注释
代码演示
onLoad () {
//#ifdef MP-WEIXIN
('微信小程序')
//#endif
//#ifdef H5
('h5页面')
//#endif
}
样式的条件注释
代码演示
/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
23.两种方式导跳转和传参
1.利用navigator进行跳转
navigator详细文档：文档地址
///注意下面的都是包含在nabigator下的标签，才能跳转
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover"> <button type="default">跳转到关于页面</button> </navigator>
跳转到tabbar页面
open-type="switchTab"
<navigator url="/pages/message/message" open-type="switchTab"> <button type="default">跳转到message页面</button> </navigator>
2.利用编程式导航进行跳转
导航跳转文档
1).利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
通过navigateTo方法进行跳转到普通页面
goAbout () {
({
url: '/pages/about/about',
})
}
2).通过switchTab跳转到tabbar页面
跳转到tabbar页面
<button type="primary" @click="goMessage">跳转到message页面</button>
通过switchTab方法进行跳转
goMessage () {
({
url: '/pages/message/message'
})
}
3).redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
({
url: '/pages/message/message'
})
}
3.导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
({
url: '/pages/about/about?id=80',
});
}
接收参数的页面
<script>
export default {
onLoad (options) {
(options)
}
}
</script>
24.组建的创建,使用和生命周期
1.组建的创建使用：
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
- 创建login组件，在component中创建login目录，然后新建文件
<template> <view> 这是一个自定义组件 </view> </template> <script> </script> <style> </style>
- 在其他组件中导入该组件并注册
import login from "@/components/test/" ///login是给这个组件起别名，
- 注册组件
components: {test}
- 使用组件
<test></test>
2.组件的生命周期函数
| beforeCreate |
在实例初始化之后被调用。详见 |
||
| created |
在实例创建完成后被立即调用。详见 |
||
| beforeMount |
在挂载开始之前被调用。详见 |
||
| mounted |
挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用 Vue官方文档 |
||
| beforeUpdate |
数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 |
仅H5平台支持 |
|
| updated |
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 |
仅H5平台支持 |
|
| beforeDestroy |
实例销毁之前调用。在这一步，实例仍然完全可用。详见 |
||
| destroyed |
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 |
25.组件间传值的方式
1.父组件给子组件传值
通过props来接受外界传递到组件内部的值
<template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
其他组件在使用login组件的时候传递值
///注意传值的自定义属性要写在子组件上；（这里的子组件就是test）
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
2.子组件给父组件传值
通过$emit触发事件进行传递参数
<template>
<view>
这是一个自定义组件 {{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',)
}
}
}
</script>
父组件定义自定义事件并接收参数
注意这里的自定义事件也是写在子组件下，这里的函数就算接收参数，也可以不写括号；
//在method中定义函数接收参数时括号里必须时“res”
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
(res)
}
},
components: {test}
}
</script>
26.组件的使用
-ui的使用
uni-ui文档
1、进入Grid宫格组件
2、使用HBuilderX导入该组件
3、导入该组件
import uniGrid from "@/components/uni-grid/" import uniGridItem from "@/components/uni-grid-item/"
4、注册组件
components: {uniGrid,uniGridItem}
5、使用组件
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
布局
Flex 布局教程：语法篇 - 阮一峰的网络日志
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
布局的基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2.容器的属性
2.1.-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
2.-direction
flex-direction属性决定主轴的方向（即项目的排列方向）
它可能有4个值。
|
主轴为水平方向，起点在左端。 |
|
主轴为水平方向，起点在右端。 |
|
主轴为垂直方向，起点在上沿。 |
|
主轴为垂直方向，起点在下沿。 |
2.-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
| nowrap |
（默认）：不换行。 |
|
| wrap |
：换行，第一行在上方。 |
|
| wrap-reverse |
：换行，第一行在下方。 |
|
2.-content属性
justify-content属性定义了项目在主轴上的对齐方式。
下面为属性的取值和效果：
2.-items属性
下面为图片的属性和效果：
2.项目的属性
--------里面一个个的小盒子的属性
|
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 |
|
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 |
|
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 |
|
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 |
|
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 |
|
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 |