uni-app基础入门_uniapp onload

目录

uni-app介绍

项目目录

全局外观配置

页面外观配置

配置tabbar

 Condition启动模式配置

组件的基本使用

 uni-app中的样式

基本数据绑定

v-bind动态绑定属性

v-for的使用

uni中的事件

uni中的生命周期

下拉刷新&上拉加载

发送get请求

数据缓存

图片的上传和预览  

条件注释实现跨端兼容

两种方式导航跳转和传参

组件的创建使用和组件的生命周期函数

 组件之间的通讯方式

uni-ui的基本介绍和使用

---

uni-app介绍

uni-app是一个vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS ,Android.H5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台,即使不跨断,uni-app,同时也是更好的小程序开发框架

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

• 页页面文件遵循 Vue单文件组件(SFC)规范
• 组件标签靠近小程序规范 参考 uxni-app组件规范
• 接口能力(JS API)靠近微信小程序规范,但需要将前缀wx 替换为uni 参考uni-app接口规范
• 数据绑定及事件处理同vue.js规范 同时补充了 app及页面生命周期
• 为兼容多端运行建议使用flex布局进行开发

项目目录

• pages:所有页面存放目录
• static:静态资源目录 例如图片等
• unpackage:打包之后的文件
• app.vue是我们的根组件,所有的页面都在App.vue下进行切换,是页面的入口文件,可以调用应用的生命周期函数
• main.js是我们的项目入口文件,主要是初始化vue实例并使用需要的插件
• manifest.json 文件应用配置文件,用于指定应用名称,图标权限等
• pages.json文件用来对 uni-app进行全局配置,决定页面文件路径,窗口样式,原生的导航栏,底部的原生tabber
• uni.scss. 文件的用途是为了方便整体控制应用的风格,比如按钮颜色,边框风格,uni.scss.预制了一批scss变量预制
• components 组件存放目录

全局外观配置

page.json-->globalStyle  文档参考uni-app官网

• navigationBarBackgroundColor :导航栏背景颜色（同状态栏背景色）仅支持16进制
• navigationBarTextStyle :导航栏标题颜色及状态栏前景颜色，仅支持 黑色白色
• navigationBarTitleText  导航栏标题文字内容 注意:页面的pages会覆盖全局的
• enablePullDownRefresh:是否开启下拉刷新，
• backgroundColor:下拉显示出来的窗口的背景色
• backgroundTextStyle;"下拉 loading 的样式，仅支持 dark / light
• onReachBottomDistance:页面上拉触底事件触发时距页面底部距离，单位只支持px，

页面外观配置

创建新的message页面

1. 右键pages新建message目录 在message目录下 新建vue文件 并选择基本模板
2. 在pages.json里面配置路径,pages数组中第一项表示应用启动页，
3. path 配置页面路径 style 配置页面窗口表现

页面配置项

h5 设置编译到 H5 平台的特定样式 Object

pullToRefresh 下拉刷新 color

{
		"path": "pages/message/message",
		"style": {
			"navigationBarTitleText": "信息页",
			"navigationBarBackgroundColor": "#007AFF",
			"h5":{
				"pullToRefresh":{
					"color":"#7D26CD"
				}
			}
		}
	},

配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置指定tab栏,以及 tab 切换时显示的对应页

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

属性说明

• color: tab 上的文字默认颜色
• selectedColor : tab 上的文字选中时的颜色
• borderStyle: tabbar 上边框的颜色，可选值 black/white
• list :tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
• position:可选值 bottom、top

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下

• pagePath 页面路径，必须在 pages 中先定义
• text  tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
• iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
• selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

	"tabBar":{
		"color":"#4CD964",
		"selectedColor":"#007AFF",
		"backgroundColor":"#8F8F94",
		"borderStyle":"white",
		"position":"top",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/image/car.png",
				"selectedIconPath":"static/image/car-active.png"
			},
			{
				"text":"信息页",
				"pagePath":"pages/message/message",
				"iconPath":"./static/image/home.png",
				"selectedIconPath":"static/image/home-active.png"
			}
		]
	}

 Condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明

list说明

• name:启动模式名称
• path:启动页面路径
• query :启动参数，可在页面的 onLoad 函数里获得

组件的基本使用

uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木,组合各种组件拼接成自己的小程序

uni-app中的组件,就像html中的 div p span 等标签作用一样,用于搭建页面基本结构

1.text文本组件的用法

text组件相当于行内标签,在同一行显示,除了文本节点其他节点都无法长按选中

属性

 space值说明

2.view视图容器组件用法

view视图容器,类似于HTML中的div

属性

 3.button组件的基本使用

属性

size 有效值

type 有效值

 4.images组件的基本使用

属性

mode 有效值：

 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 项目相同，需要注意以下几点：

1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
2. 字体文件大于等于 40kb，，如开发者必须使用，则需自己将其转换为 base64 格式使用
3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

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

如何使用sass或者less

基本数据绑定

在视图中定义数据,和我们之前的vue一模一样,直接在data中定义数据即可

	export default{
		data(){
			return{
				msg: "hello-uni"
			}
		}
	}

插值表达式使用

1.利用插值表达式渲染基本数据

<view>{{msg}}</view>

2.在插值表达式中使用三元运算

	<view>{{flag?'我是真的':'我是假的'}}</view>

3.基本运算

		<view>{{1+1}}</view>

v-bind动态绑定属性

在data中定义一张图片,我们希望这张图片渲染在页面上

export default{
		data(){
			return{
				imgUrl:"https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF"
			}
		}
	}

利用v-bind进行渲染

		<image v-bind:src="imgUrl"></image>

还可以缩写成:

		<image :src="imgUrl"></image>

v-for的使用

data中定义一个数组,最终将数组渲染在页面上

	export default{
	data(){
		return{
			arr:[
				{name:'宋小宝',age:29},
				{name:'赵四',age:29},
				{name:'刘能',age:29},
				{name:'小沈阳',age:29},
			]
		}
	}

利用v-for进行循环

	<view v-for="(item,index) in arr" :key="index">
			序号:{{index}} 姓名:{{item.name}} 年龄:{{item.age}}
	</view>

uni中的事件

事件绑定

在uni中事件绑定和vue是一样的,通过v-on进行事件绑定 也可以简写为@

	<button  @click="show(10, $event)">按钮</button>

事件函数定义在methods中,事件传参:默认如果没有传递参数,事件函数第一个形参为事件对象,如果有形参传递事件对象用 $event 第二个参数为事件对象

	methods:{
			show(num,e){
			console.log('我被点击了', num,e)
		}

uni中的生命周期

应用的生命周期 定义在app.vue里面

生命周期的概念:一个对象从创建,运行,更新,销毁整个过程为生命周期

生命周期函数:在生命周期的每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期

uni-app支持如下应用生命周期

 页面生命周期

uni-app支持如下页面生命周期函数

注意

• onLoad可以接收上一个页面的参数
• onShow会触发多次,onLoad,onReady不会多次触发
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

下拉刷新&上拉加载

在页面中定义下拉刷新

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

栗子 

<view v-for="(item,index) in list" :key="index">
			{{item}}
</view>
export default {
		data() {
			return {
				list:['前端','JAVA','UI','大数据','测试']
			}
		},
    	onPullDownRefresh(){
			console.log('触发了页面刷新')
		setTimeout(()=>{
			this.list=[1,2,3,4]
			uni.stopPullDownRefresh()
		},2000)
		},
}

 监听下拉刷新

suni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

上拉加载

可以页面触底在请求一屏数据

 栗子

	onReachBottom() {
			this.list=[...this.list,[...'前端','JAVA','UI','大数据','测试']]
		}

发送get请求

uni.request(OBJECT)

发起网络请求。注意:在小程序中网路相关的api在使用前需要配置域白名单         

配置对象参数

 栗子

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = '请求成功';
    }
});

数据缓存

异步

本地存储数据

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

配置对象参数

 栗子

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('存储成功');
    }
});

 获取本地数据

huni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

参数

 栗子

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

删除本地数据

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

参数

 栗子

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('删除数据');
    }
});

同步

本地存储数据'

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

  获取本地数据

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

删除本地数据

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

图片的上传和预览      

上传

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

注意:count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

参数

 栗子

	<view>
		<button type="default" @click="change">上传图片</button>
		<image v-for="(item,index) in imgArr" :src="item"></image>
	</view>
 
<script>
	export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			change(){
			console.log('上传成功')
				uni.chooseImage({
				    count: 6, //默认9
				    success:res=> {
				    this.imgArr=res.tempFilePaths
				    }
				});
			}
		}
}
</script>

预览

uni.previewImage(OBJECT)

预览图片。

参数

栗子

<image v-for="(item,index) in imgArr" :src="item" @click="previewImage(item)"></image>
previewImage(current){
				console.log(current)
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
					indicator:'number'
				})
			}

条件注释实现跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台以#ifdef加平台标识开头,以#endif结尾

平台标识

 组件条件注释  代码演示

        <!-- #ifdef H5-->
		<view>我只希望在h5页面显示</view>
		<!-- #endif -->

两种方式导航跳转和传参

1.利用navigator进行跳转

navigator详情文档 : 文档地址

参数

open-type有效值

redirect:销毁当前页面,在跳转到下一个页面

跳转到普通页面

	<navigator url="../login/login">跳转至登录页</navigator>

跳转到tabbar页面

	<navigator url="../index/index" open-type="switchTab"> 跳转到首页</navigator>

2.利用编程式导航进行跳转

跳转到普通页面

uni.navigateTo 保留当前页面跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

<button @click="show">跳转到登录页</button>
	methods:{
			show(){
				uni.navigateTo({
					url:'../login/login'
				})
			},

跳转到tabbar页面

uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

	<button type="default"@click="change">跳转到首页</button>
    change(){
				uni.switchTab({
					url:'../index/index'
				})
			}

uni.redirectTo:关闭当前页面，跳转到应用内的某个页面。

3.问号传参 :

同过onLoad(options)接收

	<navigator url="../login/login?id=80&age=19">跳转至登录页</navigator>
		onLoad(options){
			console.log(options)
		},

组件的创建使用和组件的生命周期函数

组件的创建

在uni-app中可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以通过import的方式导入,在通过components进行注册即可

创建luser组件,在component中创建user目录,然后新建user.vue

<template>
	<view class="box">
		这是user组件
	</view>
</template>
 
<script>
</script>
 
<style>
</style>

在其他组件中导入该组件并注册

	import user from "../../component/user.vue"
	components:{
			user
		},

组件的生命周期函数

 组件之间的通讯方式

1父组件给子组件传值

通过props来接收外界传递到组件内部的值

<template>
	<view>
		我是user组件 
		这是父组件传递到来的{{title}}
	</view>
</template>
 
<script>
	export default{
		data(){
			return{
				
			}
		},
		props:["title"],
	}
</script>

其他组件使用user组件的时候传递值

<template>
	<view>	
	111111
	<user :title="title" ></user>
	</view>
 
</template>
 
<script>
	import user from "../../component/user.vue"
	export default{
		components:{
			user
		},
		data(){
			return{
				title:'hello',
			}
		}
	}
</script>

2.子组件向父组件传值

通过$emit触发事件传递参数

<template>
	<view>
		我是user组件 
		<button type="default" @click="sendNum">给父组件传值</button>
	</view>
</template>
 
<script>
	export default{
		data(){
			return{
				num:3
			}
		},
	
	methods:{
		sendNum(){
			console.log('给父组件传值')
			this.$emit('myEven',this.num)
		}
	},
	}
</script>

父组件执行自定义事件接收参数

<template>
	<view>	
	111111
	<user @myEven="getNum"></user>
	这是子组件传递过来的数据{{num}}
	</view>
 
</template>
 
<script>
	import user from "../../component/user.vue"
	export default{
		components:{
			user
		},
		data(){
			return{
				num:0
			}
		},
		methods:{
			getNum(num){
				console.log(num)
				this.num=num
			}
		}
		
	}

3.兄弟组件传值

uni.$emit("updataNum",10)  触发全局的自定义事件，附加参数都会传给监听器回调函数。

<template>
	<view>
		这是a组件<button type="default" @click="addNum">修改b组件的数据</button>
	</view>
</template>
 
<script>
	export default {
 
		data() {
			return {
				
			}
		},
		methods:{
			addNum(){
				uni.$emit("updataNum",10)
			}
		}
	}
</script>

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

<template>
	<view>
		这是b组件的数据{{num}}
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				num:0
			};
		},
		created(){
			uni.$on("updataNum",num=>{
				this.num+=num
			
			})
		}
	}
</script>

uni-ui的基本介绍和使用

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

hbuilder引入文件 import导入 components注册 cv属性