Uni-App基础知识

Uni-App

Uni-App的基础

1.1.创建uni-app文件：

1.2.运行到微信小程序：

1.需要复制当前路径到HBuilder X目录下

2.需要配置微信小程序的安全:

报错的时候：

项目的目录和文件的使用

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

1.3globalStyle：

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）	APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）	仅 iOS 平台
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）	仅 iOS 平台

配置顶部导航：

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "首页",
		"navigationBarBackgroundColor": "#7B68EE",
		"backgroundColor": "#F8F8F8",
		"enablePullDownRefresh":true,
		"backgroundTextStyle":"light"
	}

配置tabbar：

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
• tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值、H5 3.0.0+
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

获取详情页的id

"condition":{
		"current":0,
		"list":[
			{
				"name":"详情页",
				"path":"pages/detail/detail",
				"query":"id=10"
			}
		]
	}

组件的使用

text：

属性说明

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

view

属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

图片的使用：

		<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170909%2F19f304df1ef648efb1c8366dc2e9f33f.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622249532&t=dfcf9f3dd633f309ba5b49746d8c3780" mode="aspectFit"></image>

v-for数据绑定：

<view class="" v-for="(item,index) in arr">
			<text>{{item.name}}</text>
			<text>{{item.sex}}</text>
		</view>

arr:[
					{id:1,name:'张三',sex:'男'},
					{id:2,name:'张三',sex:'男'},
					{id:3,name:'张三',sex:'男'}
				]

页面生命周期:

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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载

下拉刷新：

<view>
		<!-- 触发下拉刷新 -->
		<view v-for="item in list">
			{{item}}
		</view>
		<!-- 点击按钮下拉刷新 -->
		<button type="default" @click="onbutton">下拉刷新</button>
	</view>

<script>
	export default{
		data(){
			return{
				list:['前端','JAVA','UI']
			}
		},
		onPullDownRefresh(){
				setTimeout(()=>{
					this.list=['JAVA','UI','前端']
					uni.stopPullDownRefresh()
				},2000)
		},
		methods:{
			onbutton(){
				uni.startPullDownRefresh();
			}
		}
	}
</script>

上拉加载：

onReachBottom() {
			console.log('页面触底了'),
			this.list=[...this.list,...['JAVA','UI','111','111']]
		},

获取数据信息：get请求

<button type="default" @click="get">发送get请求</button>

methods:

get(){
				uni.request({
					url:"https://www.fastmock.site/mock/de2e4953b8cf7a36aadd3f16e4d66e46/lianxi/api/newlist",
					success(res) {
						console.log(res)
					}
				})
			}

数据缓存：

1.1uni.setStorage

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

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

1.2uni.getStorage

// 获取数据
			getStorage(){
				// uni.getStorage({
				// 	key:'id',
				// 	success(res) {
				// 		console.log('获取成功',res)
				// 	}
				// })  异步
				const res=uni.getStorageSync('id')
				console.log(res)
			},

1.3uni.removeStorage

// 移除ID数据
			removeId(){
				// uni.removeStorage({
				// 	key:'id',
				// 	success(){
				// 		console.log('删除成功')
				// 	}
				// })
				const res=uni.removeStorageSync('id')
				console.log(res)
			}

上传图片：

<button type="promary" @click="chooseIMG">上传图片</button>

chooseIMG(){
				uni.chooseImage({
					count:5,
					success:res=>{
						this.imgArr=res.tempFilePaths
					}
				})
			},

浏览图片：

<image :src="item" v-for="item in imgArr" mode="" @click="previewimg(item)"></image>

previewimg(current){
				uni.previewImage({
					current,
					urls:this.imgArr,
					loop:true,
					indicator:'default'
				})
			}

跳转页面：

<template>
		<view class="">
			<view class="">跳转页面</view>
			<navigator url="/pages/detail/detail?id=80&name='mo'">跳转到详情页</navigator>
			<navigator url="/pages/message/message" open-type="switchTab">跳转到tabbar页</navigator>
			<button type="default" @click="tiaozhuan">跳转</button>
			<button type="default" @click="tiaotab">跳转tabbar页面</button>
			<button type="default">跳转到详情页面id</button>
		</view>
</template>

<script>
	export default{
		methods:{
			tiaozhuan(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},
			tiaotab(){
				uni.switchTab({
					url:'/pages/message/message'
				})
			}
		}
	}
</script>

<style>
</style>

api的条件注释

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('微信小程序')
  //#endif
  //#ifdef H5
  console.log('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 */

uni中的导航跳转

利用navigator进行跳转

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转</button>
</navigator>

跳转到tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

利用编程式导航进行跳转

利用navigateTo进行导航跳转

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

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

组件的生命周期函数

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

组件的通讯

父组件给子组件传值

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

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

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

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>

子组件给父组件传值

通过$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',this.status)
			}
		}
	}
</script>

父组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>