开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> uniApp 学习笔记总结(一) -> 正文阅读

[移动开发]uniApp 学习笔记总结(一)

1. uniapp环境搭建

第一步：工具使用HBuilderX，该工具专门为uni-app做过特别强化。

第二步：安装微信开发者工具。

直接百度微信官方，进入微信小程序下载。

注意：

第一次运行微信小程序，需要让hbuilder找到微信开发者工具在哪，也就是配置微信开发者工具的安装路径。
再个就是记得打开服务端口。

对于运行到手机的注意事项：

usb连接手机，打开开发者选项里面的usb调试，小米要打开usb安装。
一些手机的开发选项需要特殊操作才能找到，什么点击版本参数7下啥的。

2. uni-app的开发目录结构

在这里插入图片描述

pages目录：存放页面的。

static目录：存放静态资源的。

unpackage目录：存放最终打包的存放位置。

App.vue文件：项目根组件。

main.js文件：项目的入口文件，也就是项目加载时，先加载main.js文件。

manifest.json文件：负责管理打包的一些配置，指定应用名称，图标，权限等。

pages.json文件：页面路由，负责设置整个项目的页面(pages)存放路径以及窗口外观(globalStyle)的。

uni.scss文件：配置一些颜色什么的。

uni-app的开发规范：(看起来就是Vue和小程序混合起来了)
在这里插入图片描述

3. pages.json下的 globalStyle 全局外观配置

3.1 导航栏样式配置

globalStyle就在pages.json中。

对应官方文档：https://uniapp.dcloud.io/collocation/pages.html#globalstyle

以下相关属性配置都能在官方看到。

导航栏属于下图红色框位置：
在这里插入图片描述

导航栏配置需要注意的是：

页面级的navigationBarTitleText会覆盖全局的navigationBarTitleText

3.2 下拉刷新页面效果

网页页面显示如下：
在这里插入图片描述
小程序页面如下：

“enablePullDownRefresh”: true 开启下拉刷新：
在这里插入图片描述

3.3 onReachBottomDistance页面上拉触底事件

onReachBottomDistance 这个配置适用于页面快到下面的时候，触发写一页等情况。

同样，对应官方文档：https://uniapp.dcloud.io/collocation/pages.html#globalstyle

4. pages.json下的页面配置

在这里插入图片描述

pages的页面配置：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		//新创建的message.vue，对应的添加上路径。
		"path": "pages/message/message",
		//可以配置style样式。
		"style":{
			"navigationBarTitleText":"信息页",
			"navigationBarBackgroundColor": "#2866f7",
			//根据官方可以专门设置h5内容。其他情况不受影响。
			"h5":{
				"pullToRefresh": {
					"color":"#333333"
				}
			}
		}
	},
	{
		"path": "pages/index/index"
	}
],

5. pages.json下的配置基本的tabbar

tabbar就是如下图一样：
在这里插入图片描述

在pages.json配置如下：

//设置导航栏
"tabBar":{
	//声明多个导航栏
	"list":[
		{
			"text":"首页", //名称
			"pagePath":"pages/index/index", //路径
			"iconPath":"static/logo.png", //图片路径
			"selectedIconPath":"static/1.jpg" //选择后图片路径
		},
		{
			"text":"琴谱",
			"pagePath":"pages/message/message",
			"iconPath":"static/logo.png",
			"selectedIconPath":"static/1.jpg"
		},
		{
			"text":"个人中心",
			"pagePath":"pages/user/user",
			"iconPath":"static/logo.png",
			"selectedIconPath":"static/1.jpg"
		}
	]
}

同样，对应官方文档：https://uniapp.dcloud.io/collocation/pages.html#tabbar

6. pages.json下的 condition启动模式配置

启动模式配置，也是针对Pages.json进行修改配置：

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

//condition启动模式配置
"condition":{
	//当前激活的模式，list节点的索引值
	"current":0,
	//启动模式列表
	"list":[
		{
			"name":"详情页",	//启动模式名称
			"path":"pages/detail/detail", //启动页面路径
			"query":"id=80"	//启动参数，进入页面时的onLoad 函数的参数就可以拿到该参数
		}
	]
}

微信开发者工具里可以手动改变编译模式：
在这里插入图片描述
页面参数如下图：

7. text组件的基本使用

uniapp的一些组件，就像HTML中的div，p，span等标签作用一样，用于搭建页面的基本结构。

可以说是组件是视图层的基本组成单元。

在这里插入图片描述

text组件案例如下：

<template>
	<view>
		<view>
			<text>
				唱歌跳舞打篮球
			</text>
		</view>
		<view>
			<!-- selectable文本可选 -->
			<text selectable>
				唱歌跳舞打篮球
			</text>
		</view>
		<view>
			<!-- space有多个值,如果不设置那么都会默认一个空格。 -->
			<text selectable space="ensp">
				唱歌      跳舞打篮球
			</text>
		</view>
		<view>
			<!-- decode 可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;。 -->
			<text selectable>
				&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
			</text>
		</view>
	</view>
</template>

<script>
</script>

<style>
</style>

8. view组件的基本使用

针对view的一些属性变化：

<template>
	<view class="box2" hover-class="box2-active">
		<!-- 
			hover-class: 指定按下去的样式类style。
			hover-stop-propagation: 就像js中阻止冒泡事件一样，主要针对嵌套css样式。
			hover-start-time: 按住后多久出现点击态，单位毫秒。
			hover-stay-time: 手指松开后点击态保留时间，单位毫秒。
		-->
		<view 
			class="box" 
			hover-class="box-active" 
			hover-stop-propagation
			:hover-start-time="2000"
			:hover-stay-time="2000"
		>我是一个大盒子</view>
	</view>
</template>

<script>
</script>

<style>
	.box{
		width: 100px;
		height: 100px;
		background: #4CD964;
	},
	.box-active{
		width: 100px;
		height: 100px;
		background: #007AFF;
	},
	.box2{
		width: 300px;
		height: 300px;
		background: #d9a319;
	},
	.box2-active{
		width: 300px;
		height: 300px;
		background: #ff0a22;
	}
</style>

9. button按钮组件的基本使用

button同上，很好理解直接看官方。

https://uniapp.dcloud.io/component/button.html

10. image图像组件的基本使用

图片src能拿到信息，可以是服务器相对路径，也可以是线上路径。

需要注意的是：uniapp的image图像有默认宽高，可以通过mode属性来改变。

https://uniapp.dcloud.io/component/image.html

11. uniapp样式学习 + scss + 字体图标

11.1 样式学习注意点

rpx：响应式px，一种根据屏幕宽度自适应的动态单位。

如果屏幕宽度发生变化rpx的数据也会随着变化。

@import url(“xxx”) 导入外联样式表信息。

在这里插入图片描述

uni-app支持基本常用的选择器，class类选择器，id选择器，element元素选择器等。

需要注意：在uni-app中不能使用 * 选择器！

page节点标签相当于body节点标签：
在这里插入图片描述

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

11.2 字体图标

一般找字体图标可以去阿里的iconfont网站，挺不错的。

在这里插入图片描述

11.3 scss的使用

在这里插入图片描述

注意不要混淆sass和scss：

Sass是以严格的缩进式语法规则来书写
SCSS的语法书写和CSS语法书写方式非常类似，带大括号分号。

uni.scss文件：
在这里插入图片描述
使用方式如下：

12. uniapp的数据绑定

和Vue一模一样。

插值语法， data函数是定义参数等等。
在这里插入图片描述

13. v-bind 和 v-for

和Vue一样，没什么难度。

<template>
	<view>
		<view>数据绑定</view>
		<view>{{msg}}</view>
		<view v-for="(item,index) in arr" :key="item.id">
			{{item.name}} , {{item.age}}
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				msg:"hello,wrold",
				arr:[
					{
						id:1,
						name:"zhangsan",
						age:19
					},
					{
						id:2,
						name:"zhangsan",
						age:20
					},
					{
						id:3,
						name:"zhangsan",
						age:30
					}
				]
			}
		}
	}
</script>

<style>
</style>

14. 事件绑定

事件绑定和vue一样。

$event的使用：

<template>
	<view>
		<!-- 如果有参数的情况下，要使用$event来操作 -->
		<button type="primary" @click="clickHandler(1,$event)">按钮</button>
	</view>
</template>

<script>
	export default {
		methods:{
			clickHandler(data,e){
				console.log("abc",data,e)
			}
		}
	}
</script>

<style>
</style>

15. uni-app的生命周期

生命周期，生命周期函数的概念：
在这里插入图片描述

15.1 uniApp应用的生命周期

官方网站

uni-app常见的生命周期函数：
在这里插入图片描述
平时进入项目时，也能看到控制台打印的一些信息，就对应上面的周期函数：

可以在App.vue组件下进行配置修改：

<script>
	export default {
		//一开始进入时触发，只触发一次。
		onLaunch: function() {
			console.log('App Launch')
		},
		//显示时，触发onShow(就是显示页面，切回页面时显示)
		onShow: function() {
			console.log('App Show')
		},
		//隐藏时，触发onHide(就是切出页面时等等情况)
		onHide: function() {
			console.log('App Hide')
		},
		//发生异常时，触发onError
		onError: function(err){
			console.log("出现异常了,err")
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

15.2 页面的生命周期

页面对应的生命周期函数：

最重要的是onLoad，能拿到上个页面传递的数据。
注意tabbar的页面展示过一次后就保留在内存中。再次切换tabbar页面，只会触发每个页面的onShow，不会再触发onLoad函数。

页面周期函数演示：

直接在页面组件里面演示。

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad(options) {
			console.log('页面加载了,对应传递过来的参数',options)
		},
		onShow() {
			console.log('监听页面显示')
		},
		onReady() {
			console.log('监听页面初次渲染完成')
		},
		onHide() {
			console.log('监听页面隐藏')
		},
		onUnload() {
			console.log('监听页面卸载')
		},
		methods: {
			
		}
	}
</script>

16. 针对页面的下拉刷新

第一步：开启下拉刷新。需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

第二步：onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），该函数的作用就是用来监听该页面用户下拉刷新事件。

第三步：对应的停止uni.stopPullDownRefresh() 和开始uni.startPullDownRefresh(OBJECT)下拉刷新的函数。

"pages": [ //pages数组中第一项表示应用启动页，参考：
	{
		"path":"pages/list/list",
		"style":{
			"enablePullDownRefresh": true
		}
	}
]

效果如下：

<template>
	<view>
		<view>这是列表页</view>
		<view v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['前端','JAVA','UI','测试','大数据']
			}
		},
		//一旦触发下拉刷新就会执行下面方法。
		onPullDownRefresh() {
			console.log('触发下拉刷新')
			setTimeout(()=>{
				this.list = ['前端2','JAVA2','UI2','测试2','大数据2']
				//停止下拉刷新
				uni.stopPullDownRefresh()
			},5000)	
			//上面虽然睡眠了，但是依然会继续执行下面的代码。
			console.log('验证代码继续执行')
		}
	}
</script>

<style>
</style>

17. 上拉加载

上拉触底后，会触发onReachBottom函数

//上拉触底后，执行onReachBottom函数
onReachBottom() {
	console.log('页面到底，执行onReachBottom函数')
}

可以在pages.json文件中，配置好距离：

"path":"pages/list/list",
"style":{
	"enablePullDownRefresh": true,
	"onReachBottomDistance": 2
}

一般上拉触发函数onReachBottom，用到分页上面如下：

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['前端','JAVA','UI','测试','大数据','前端','JAVA','UI','测试','大数据']
			}
		},
		//上拉触底后，执行onReachBottom函数
		onReachBottom() {
			console.log('页面到底，执行onReachBottom函数')
			//就像这样不断的添加新的页面。
			this.list = [...this.list,['前端2','JAVA2','UI2','测试2','大数据2']]
		}
	}
</script>

<style>
	.box-item{
		height: 100px;
		line-height: 100px;
	}
</style>