飞翔的鱼
wang jiaqi
2021-03-17

uni-app

# uni-app

# uni-app官网 https://uniapp.dcloud.io/resource

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

# 1.基本配置

# 1.1环境搭建

1.安装编辑器HbuilderX	
//https://www.dcloud.io/hbuilderx.html
2.安装微信开发者工具		 //https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
1
2
3

第一次使用

1.配置小程序ide的相关路径，才能运行成功
2.微信开发者工具在设置中安全设置，服务端口开启
1
2

# 1.2 项目目录

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage 就是打包目录，在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录，例如图片等

components 组件存放目录

# 1.3 全局配置和页面配置

# 通过globalStyle进行全局配置(pages.json)

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档 (opens new window)

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面生命周期 (opens new window)。
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期 (opens new window)
# 通过pages进行配置页面(pages.json)
属性 类型 默认值 描述
path String 配置页面路径
style Object 配置页面窗口表现，配置项参考 pageStyle (opens new window)

pages数组数组中第一项表示应用启动页

"pages": [ 
		{
			"path":"pages/message/message"
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	]
1
2
3
4
5
6
7
8
9
10
11
# 配置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": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# condition启动模式配置

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

属性说明：

属性 类型 是否必填 描述
current Number 是 当前激活的模式，list节点的索引值
list Array 是 启动模式列表

list说明：

属性 类型 是否必填 描述
name String 是 启动模式名称
path String 是 启动页面路径
query String 否 启动参数，可在页面的 onLoad (opens new window) 函数里获得

案例代码：

"condition":{
		"current":0,
		"list":[
			{
				"name":"详情页",
				"path":"pages/detail/detail",
				"query":"id=1"
			}
		]
}
1
2
3
4
5
6
7
8
9
10

# 2 基本API

# 2.1 text

# 001 - text 组件的属性
属性 类型 默认值 必填 说明
selectable boolean false 否 文本是否可选
space string . 否 显示连续空格，可选参数：ensp、emsp、nbsp
decode boolean false 否 是否解码
# 002 - 代码案例
<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>相当于行内元素</text>
</view>
1
2
3
4

# 2.2 view视图容器

# 001 - 组件的属性

# 002 - 代码案例
<view 
  hover-class='active' 
  hover-stop-propagation 
 :hover-start-time="2000" 
 :hover-stay-time='2000'
>
</view>
<style>
	.active{
		color: red;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# 2.3 button组件

# 001 - 组件的属性
属性名 类型 默认值 说明
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空，背景色透明
disabled Boolean false 是否按钮
loading Boolean false 名称是否带 loading t图标
  • button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个
# 002 - 案例代码
<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>
1
2
3
4
5

# 2.4 image组件

属性名 类型 默认值 说明 平台差异说明
src String 图片资源地址
mode String 'scaleToFill' 图片裁剪、缩放的模式

Tips

  • <image> 组件默认宽度 300px、高度 225px；
  • src 仅支持相对路径、绝对路径，支持 base64 码；
  • 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

# 2.5 样式及图标

样式

1.rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。
2.使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径
3.不能使用 * 选择器。
4.page 相当于 body 节点
1
2
3
4

图标

1. 字体文件小于 40kb，`uni-app` 会自动将其转化为 base64 格式；

2.字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
1
2
3
4
5

# 2.6 数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}
1
2
3
4
5
6
7
# 插值表达式的使用
<text>{{message}}</text>
1
# v-bind,v-for,v-if与vue中的使用一样

# 2.7 事件机制

事件传参
	1.不传参，默认为事件对象event
	2.传一个参数，参数本身
	3.传2个参数，第一个参数为参数本身，第二个参数为事件对象，通过$event传递
1
2
3
4

代码实例:

<button @click="tapHandle(a,$event)">点我啊</button>
1
methods: {
  tapHandle (a,event) {
    console.log(a,event)
  }
}
1
2
3
4
5

# 2.8 生命周期

# 应用的生命周期
函数名 说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发

App.vue

export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		onError:function(Error) {
			console.log(Error)
		}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 页面的生命周期

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

函数名 说明 平台差异说明 最低版本
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 (opens new window)
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。
onHide 监听页面隐藏
onUnload 监听页面卸载

# 2.9 下拉刷新

# 开启下拉刷新
第一步:pages.json中在pages的style配置enablePullDownRefresh
第二步：
	通过调用onPullDownRefresh方法来开启下拉刷新
    通过调用uni.startPullDownRefresh方法来开启下拉刷新
1
2
3
4

代码实例：

page.json

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}
1
2
3
4
5
6
# 监听下拉刷新

list.vue

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大数据']
    }
  },
  methods: {
    startPull () {
      //第二种方式
      uni.startPullDownRefresh()
    }
  },
    //第一种方式
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
      uni.stopPullDownRefresh()  //关闭下拉刷新
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 关闭下拉刷新

uni.stopPullDownRefresh()

# 2.10 上拉加载

1.通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
2.通过onReachBottom监听到触底的行为
1
2
"style":{				
	"onReachBottomDistance":100				
}
1
2
3
onReachBottom(){
	console.log('触底了')
},
1
2
3

# 3 网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

发送post请求

# 4 数据缓存

uni.setStorage		//将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
uni.setStorageSync	//将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
uni.getStorage		//从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync	//从本地缓存中同步获取指定 key 对应的内容。
uni.removeStorage	//从本地缓存中异步移除指定 key。
uni.removeStorageSync //从本地缓存中同步移除指定 key。
1
2
3
4
5
6
7

代码实例：

uni.setStorage({
    key:"user",
    data:"hello",
    success() {
        console.log("存储成功")
    }
})
1
2
3
4
5
6
7

# 5 上传、预览图片

uni.chooseImage		//上传图片
uni.previewImage	//预览图片
1
2
# 上传图片

案例代码

<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 () {
				uni.chooseImage({
					count: 9,
					success: res=>{
                        //通过tempFilePaths获取图片路径
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 预览图片

结构

<view>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
1
2
3

预览图片的方法

previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
}
1
2
3
4
5
6

# 6 条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 加平台标识 开头，以 #endif 结尾。
1

平台标识

值 平台 参考文档
APP-PLUS 5+App HTML5+ 规范 (opens new window)
H5 H5
MP-WEIXIN 微信小程序 微信小程序 (opens new window)
MP-ALIPAY 支付宝小程序 支付宝小程序 (opens new window)
MP-BAIDU 百度小程序 百度小程序 (opens new window)
MP-TOUTIAO 头条小程序 头条小程序 (opens new window)
MP-QQ QQ小程序 （目前仅cli版支持）
MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
# 组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
1
2
3
4
5
# api的条件注释

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('微信小程序')
  //#endif
}
1
2
3
4
5

样式的条件注释

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */
1
2
3
4
5
6
7
8

# 7 导航跳转

# 7.1 利用navigator进行跳转

navigator详细文档：文档地址 (opens new window)

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>
1
2
3

跳转到tabbar页面

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

# 7.2 利用编程式导航进行跳转

导航跳转： https://uniapp.dcloud.io/api/router?id=navigateto

利用navigateTo进行导航跳转

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

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

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

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}
1
2
3
4
5

通过switchTab跳转到tabbar页面

跳转到tabbar页面

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

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}
1
2
3
4
5

redirectTo进行跳转

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

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}
1
2
3
4
5
6
7
8

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}
1
2
3
# 导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}
1
2
3
4
5

接收参数的页面

<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}
</script>
1
2
3
4
5
6
7

#

# 8 组件的创建

# 基本使用
1.创建组件
2.引入组件
3.注册组件
4.使用组件
1
2
3
4
# 生命周期函数
beforeCreate 在实例初始化之后被调用。详见 (opens new window)
created 在实例创建完成后被立即调用。详见 (opens new window)
beforeMount 在挂载开始之前被调用。详见 (opens new window)
mounted 挂载到实例上去之后调用。详见 (opens new window) 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 (opens new window)
beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 (opens new window) 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 (opens new window) 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。详见 (opens new window)
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 (opens new window)
# 父组件给子组件传值

子组件

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

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

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

父组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 子组件给父组件传值

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

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		}，
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

<template>
	<view>
		<test @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},		
		components: {test}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 兄弟组件通讯

a.vue

//全局定义
created() {
    uni.$on('函数名',()=>{})
}
1
2
3
4

b.vue

//调用定义的函数
uni.$emit('函数名')
1
2

# 9 uni-ui的使用

uni-ui文档 (opens new window)

1、进入Grid宫格组件

2、使用HBuilderX导入该组件

3、导入该组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
1
2

4、注册组件

components: {uniGrid,uniGridItem}
1

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>
1
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2021/07/01, 20:33:02
vue
性能优化

← 性能优化→

最近更新
01
数组常用方法
 05-21
02
边框
 04-30
03
js1
 04-29
更多文章>
Theme by Vdoing | Copyright © 2021-2021 本博客仅仅作为自己日常学习记录笔记使用
×