uniapp快速入门

一、什么是uniapp

Uniapp是一款基于Vue.js框架的开发平台，允许开发者使用Vue语法进行跨平台应用的开发，支持应用编译成H5、小程序、APP等多种平台。Uniapp具有开发简单、调试便捷、开发效率高等优点，因此逐渐成为了跨平台开发的热门选择之一。

• uni-app官方文档地址

二、uniapp的环境准备

uni-app [uni-æp]，dcloud官方开发工具HBuilder X，小程序端运行需要微信开发者工具，APP端运行可安装各类模拟器，如本文档中使用的网易mumu，按以下的说明安装即可

1.安装HBuilder X（App开发版）

• 安装开发环境HBuilder X下载地址

2.申请dcloud开发者账号

• 打包发布应用需要在开发者中心创建应用，每个应用对应一个appid，也可在HBX中生成
• 申请dcloud开发者账号地址

3.微信开发者工具

• 微信官方文档
• 微信公众平台账号注册地址

4.配置微信开发者工具路径

5.安装android模拟器

常用的有genymotion、网易mumu、夜神等。
网易mumu下载地址

6.配置adb路径及AVD端口号

• 不同虚拟器的端口号不同，常用的Genymotion为5555，夜神62001/52001，雷神和腾讯游戏助手也是5555，网易mumu为7555，根据自己安装的模拟器配置相应的端口即可。
• 对于adb路径，默认安装路径则无需设置，若自定义安装，需要配置目录为模拟器bin目录下的adb_server。
• 最新win11有wsa可以使用，win10页出现了第三方工具安装wsa。

三、创建第一个uniapp项目

通过上面的环境配置，接下来我们就可以开始创建第一个uniapp项目了。

1.使用HbuilderX初始化项目

1. 点击HbuilderX菜单栏文件>项目>新建
2. 选择uni-app，填写项目名称，项目创建的目

2.运行项目

• 在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行。
• 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
• 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机。

注意：如果是第一次使用微信开发者工具，需要先配置小程序ide的相关路径，才能运行成功。同时微信开发者工具在设置中安全设置，服务端口开启。

3.介绍目录及作用

• pages文件夹存放页面
• static内的文件不会进行编译，不要放js文件，可放到common中（注意体积限制）
• unpackage文件夹存放打包的文件
• components文件夹存放各种组件
• App.vue代表应用，包括应用层的生命周期方法，全局样式等
• pages.json整个应用的页面集合，第一项为启动页，可配置页面路由及样式和标题
• manifest.json应用配置，包括图标配置、启动界面配置、权限配置及其他开发配置
• main.js应用入口文件

四、uni-app 的使用

1.pages.json 配置

globalStyle

• 用于设置应用的状态栏、导航条、标题、窗口背景色等。
• globalStyle文档链接

注意

• 支付宝小程序使用titleImage时必须使用https的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果。
• globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题。
• 使用 maxWidth 时，页面内fixed元素需要使用–window-left,–window-right来保证布局位置正确。
• dynamicRpx vue3 nvue页面已移除此配置，升级为横竖屏切换自动rpx，如果不需要可以使用 px。

pages

1. pages节点的第一项为应用入口页（即首页）
2. 应用中新增/减少页面，都需要对 pages 数组进行修改
3. 文件名不需要写后缀，框架会自动寻找路径下的页面资源

开发目录为：

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
1
2
3
4
5
6
7
8
9
10

• 则需要在 pages.json 中填写

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

注意：

• 当设置 position 为 top 时，将不会显示 icon。
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

示例：

"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"
			},
			{
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

五.uni-app生命周期

1.uni-app应用生命周期：

• uni-app 支持如下应用生命周期函数：

应用生命周期文档链接

示例代码

<script>
	// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意 :

1. 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
2. 以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
3. 应用启动参数，可以在API uni.getLaunchOptionsSync获取，详见链接
4. onlaunch里进行页面跳转，如遇白屏报错，请参考链接 不能写模板。
5. onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

2.uni-app页面生命周期：

六.网络请求

在uni中可以调用uni.request方法进行请求网络请求（需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。）

• get请求：

uni.request({
	url: `${url}`,
	success(res) {
		console.log(res)
	}
})

1
2
3
4
5
6
7

• post请求：

uni.request({
	header: {
		'Content-Type': 'application/x-www-form-urlencoded'  
	}, 
	url: `${url}`,
	method: 'POST',
	data: {
		data
	},
	dataType:'json',
	success: (res) => {

	} 
}); 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

说明：

• 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化

七. vue和nvue的区别

• vue是真正跨端通用的，采用webview渲染。
• nvue只针对app，h5和小程序不能用，采用weex渲染，因原生渲染性能更好，可用在某些强调性能的场景。
• 开发时，template和js部分是一样的，但css不一样，nvue只能使用flex布局。

1.vue文件结构

2.pages.json页面配置

八.总结

1. uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
2. 即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app。
3. 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。