uni-app基础入门

目录

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启动模式配置

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

属性说明

current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明

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

组件的基本使用

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

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

1.text文本组件的用法

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

属性

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选	App、H5、快手小程序
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

 space值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

2.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	手指松开后点击态保留时间，单位毫秒

 3.button组件的基本使用

属性

size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标

size 有效值

值	说明
default	默认大小
mini	小尺寸

type 有效值

值	说明
primary	微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default	白色
warn	红色

 4.images组件的基本使用

属性

src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式

mode 有效值：

缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

 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.利用插值表达式渲染基本数据

{{msg}}

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

	{{flag?'我是真的':'我是假的'}}

3.基本运算

		{{1+1}}

v-bind动态绑定属性

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

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

利用v-bind进行渲染

还可以缩写成:

v-for的使用

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

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

利用v-for进行循环

	
			序号:{{index}} 姓名:{{item.name}} 年龄:{{item.age}}
	

uni中的事件

事件绑定

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

	按钮

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

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

uni中的生命周期

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

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

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

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

nLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

 页面生命周期

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

注意

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

onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载

下拉刷新&上拉加载

在页面中定义下拉刷新

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

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

onPullDownRefresh

监听用户下拉动作，一般用于下拉刷新，参考示例

栗子 

			{{item}}

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

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

 栗子

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

发送get请求

uni.request(OBJECT)

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

配置对象参数

url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App不支持ArrayBuffer类型
header	Object	否		设置请求的 header，header 中不能设置 Referer。	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会尝试对返回的数据做一次 JSON.pars

success

Function

否

收到开发者服务器成功返回的回调函数

 栗子

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 对应的内容，这是一个异步接口。

配置对象参数

key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数

 栗子

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

 获取本地数据

huni.getStorage(OBJECT)

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

参数

key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

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

删除本地数据

uni.removeStorage(OBJECT)

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

参数

key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

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

同步

本地存储数据'

uni.setStorageSync(KEY,DATA)

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

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

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 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

参数

count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序

sourceType

Array

否

album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 栗子

	
		上传图片
		
	

预览

uni.previewImage(OBJECT)

预览图片。

参数

current	String/Number	详见下方说明	详见下方说明
urls	Array	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数

栗子

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结尾

平台标识

APP-PLUS	App
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-QQ	QQ小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

 组件条件注释  代码演示

        
		我只希望在h5页面显示
		

两种方式导航跳转和传参

1.利用navigator进行跳转

navigator详情文档 : 文档地址

参数

url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式

open-type有效值

navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能

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

跳转到普通页面

	跳转至登录页

跳转到tabbar页面

	 跳转到首页

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

跳转到普通页面

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

跳转到登录页
	methods:{
			show(){
				uni.navigateTo({
					url:'../login/login'
				})
			},

跳转到tabbar页面

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

	跳转到首页
    change(){
				uni.switchTab({
					url:'../index/index'
				})
			}

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

3.问号传参 :

同过onLoad(options)接收

	跳转至登录页
		onLoad(options){
			console.log(options)
		},

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

组件的创建

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

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

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

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

组件的生命周期函数

beforeCreate	在实例初始化之后被调用。数据,页面都没有
created	在实例创建完成后被立即调用。数据方法可以拿到,进行数据的初始化
beforeMount	在挂载开始之前被调用。页面还没有渲染,拿不到dom
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 已经有了dom元素可以操作dom
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。,清除定时器,等方法

 组件之间的通讯方式

1父组件给子组件传值

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

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

2.子组件向父组件传值

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

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

uni.$on(eventName,callback)

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

uni-ui的基本介绍和使用

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

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

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