uni-app初步

一、uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、

Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

二、页面简介

1、uni-app项目中，一个页面就是一个符合Vue规范的.vue文件。

2、App.vue

是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页

面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

强调：

（1）App.vue是uni-app应用的根组件，不包含<template>即本身不显示页面

（2）整个应用的生命周期只能在App.vue中监听，在其他页面（组件）中监听不到

3、新建页面

（1） uni-app中的页面，通常会保存在工程根目录下的pages目录（文件夹）下。

（2）每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，

uni-app会在编译阶段进行忽略。

（3）通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在

pages.json中完成页面注册，开发更方便。

强调：

（1）第一步：在pages文件夹（目录）下创建子文件夹（子目录），在子目录下创建.vue文件

（2）第二步：在pages.json文件中的"pages"下创建对应的路径

pages.json文件中的"pages"属性是一个数组，该数组中有多个对象，每个对象对应一个页面

该数组中的第一个对象默认为首页

4、删除页面：注意删除步骤

（1）删除.vue文件

（2）删除pages.json -> pages列表项中的配置

强调：

(1)如先删除.vue文件，而不删除pages.json -> pages中对应的路径信息，编译报错

（2）若先删除pages.json -> pages中对应的路径信息，而不删除.vue文件，编译不报错，即.vue文件被忽略

5、应用首页

uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

6、页面生命周期函数

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

强调:

（1）在uni-app中一个.vue文件是一个页面，同时也是一个vue组件。因此在.vue文件中既可以实现页面的钩子

函数，也可以实现vue组件的钩子函数

7、应用生命周期：只能在App.vue文件中进行监听，在其他页面中无法监听

三、pages.json配置

pages.json文件用来对uni-app进行全局配置，可以在配置项设置默认页面的窗口、设置页面路径及窗口、

设置组件自动引入规则、设置底部tab已经分包加载配置等。

1、globalStyle和pages

（1）globalStyle：用于全局设置应用的状态栏、导航条、标题、窗口背景色等

（2）pages：可以配置应用由哪些页面组成。pages节点接收一个数组，数组中的每一项都是一个对象。

属性	类型	描述
path	String	配置页面路径
style	Object	配置页面窗口的表现（样式、文本等）

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "仿智行12306"
			 }
		 }
          ],
	"globalStyle": {
		"navigationBarTextStyle": "white",  -->导航栏标题颜色及状态栏前景色，仅支持black/white
		"navigationBarTitleText": "智行12306", -->导航栏标题文本
		"navigationBarBackgroundColor": "#5495E6",  -->导航栏背景色
		"backgroundColor": "#F8F8F8" -->下拉显示出来的窗口背景色
	}
}

注意：

（1）pages节点的第一项为应用入口页（首页）

（2）应用中新增/减少页面时都需要对pages数组进行修改

（3）文件名不需要写扩展名，框架会自动寻找路径下的页面资源

（4）当style配置项与globalStyle配置项相同时，会覆盖globalStyle配置项

2、自定义导航栏

（1）如果要自定义导航栏，则需要将原生导航栏隐藏。在pages.json文件中配置如下：

注意：如果没有原生导航栏，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的，即全屏可写内容。uni-app提供了状态栏高度的CSS变量“--status-bar-height”,如果需要把状态栏的位置从前景部分显示出来，可写一个占位的view，高度设置为CSS变量

<template>
	<view>
		<view class="status_bar"></view> -->状态栏部分
		<view class="nav-bar">
			  uni-app首页
		</view>
		<view class="bg"></view>
	</view>
</template>

<script></script>

<style>
	.bg {
		width: 200rpx;
		height: 200rpx;
		background-image: url("../../static/logo.png");
		background-size: 100%;
	}

	.status_bar{
		height: var(--status-bar-height);  -->CSS变量
		width: 100%;
		background-color: #3cc51f;
	}
	.nav-bar{
		width: 100%;
		height: 80rpx;
		background-color: #3cc51f;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

3、tabBar：如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及在tab切换时显示对应页

（1）tabBar配置项说明

属性	类型	说明
color	HexColor	tab上的文字默认颜色
selectedColor	HexColor	tab上的文字选中时的颜色
borderStyle	String	tab上边框的颜色，可选值为black何white
backgroundColor	HexColor	tab的背景色
list	Array	tab的列表

（2）list属性说明

属性	类型	说明
pagePath	String	页面路径，必须在pages中先定义
text	String	tab上的按钮文字
iconPath	String	图片路径，icon大小限制为40KB，建议尺寸为81px * 81px
selectedIconPath	String	选中时的图片路径，icon大小限制为40KB，建议尺寸为81px * 81px

强调：

（1）若pages数组的第一项，与tabBar的list数组的第一项不一致，tabBar就不会显示

（2）静态资源的存放位置：存放在项目下的static文件夹中

4、subPackages分包加载

分包加载配置是小程序的分包加载机制，因小程序有体积和资源加载限制，优化小程序的下载和启动速度。主

包主要用于放置默认启动页面（tabBar页面），以及一些所有分包都需要用到的公共资源（js脚本）；而分包则根

据pages.json的配置进行划分

假设支持分包的uni-app目录结构如下：

subPackages节点接收一个数组，数组中的每一项都是应用的子包，其属性是

属性	类型	是否必填	说明
root	String	是	子包的根目录
pages	Array	是	子包由哪些页面组成

"subPackages": [
		{
			"root": "pagesA",
			"pages": [
				{
					"path": "list/list",
					"style": { }
				}
			]
		},
		{
			"root": "pagesB",
			"pages": [
				{
					"path": "detail/detail",
					"style": { }
				}
			]
		}
	],
	"preloadRule":{
		"pagesA/list/list":{
			"network": "all",
			"packages": ["__APP__"]
		},
		"pagesB/detail/detail":{
			"network": "all",
			"packages": ["pagesA"]
		}
	}

preloadRule可以支持分包预载，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续

分包页面时的启动速度。

字段	类型	是否必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的root或name。APP表示主包
network	String	否	wifi	在指定网络下预下载，可选值为all（不限网络）、wifi（仅Wi-Fi下预下载）

四、manifest.json配置

可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等

1、配置AppId

在开发微信小程序时，有些功能必须用自己的AppId，如授权登录、获取手机号、支付等。打开mainifest.json文件，找到以下代码并修改为自己的AppId

2、配置代理解决跨域问题

选择“源码视图”选项卡，在源码视图中配置的代码如下：