目录

• • 基础概述
  • • 项目目录和文件作用
    • 优点和弊端
  • 相关功能
  • • 全局配置和页面配置
    • 组件的基本使用
    • uni-app中的样式
    • 数据绑定
    • 生命周期
    • 网络请求
    • 数据缓存
    • 条件注释和跨端兼容
    • 导航跳转
    • uni-app中的组件
    • 组件的通讯
    • uni-ui库的使用

前言：本来是准备好好准备考研的……结果WWDC大赛又给我整这一出，本来是打算直接使用Swift语言的……结果看着SwiftUI和MacPro我不知所措，本来是想开发一个小程序记录一下摘抄的文学名句的，结果莫名其妙看到uni-app打包成iOS APP……阴差阳错，那就学吧。

环境搭建：

• HBuilderX编辑器
• 微信开发者工具

相关资料

• uni-app官网
• uni-app学习视频

基础概述

项目目录和文件作用

• page.json：全局配置，指定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等

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

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

• main.js：项目入口文件，初始化

• uni.scss：控制应用风格

• unpackage：打包目录

• pages：所有的页面存放目录

• static：静态资源目录

• components：组件存放目录

为兼容多端运行，建议使用flex进行开发。

优点和弊端

优点

• uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。
• uni-app对前端开发人员比较友好，学习成本比较低
• uni-app使用HBX进行开发，HBX对于vue语法等支持可以说是比较完备了
• uni-app拓展能力强，封装了H5+,支持nvue，也支持原生Android，ios开发。可以将原有的移动应用和H5应用改成uni-app应用。
• uni-app是DCloud出品的

缺点

• uni-app问世的时间还比较短，有很多地方还不是完善
• 待定

相关功能

全局配置和页面配置

全局配置

page.json进行配置，相关属性可参考uni-app全局文件

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则 2.5.5+
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置
preloadRule	Object	否	分包预下载规则	微信小程序
workers(opens new window) String	否	Worker 代码放置的目录	微信小程序
leftWindow Object	否	大屏左侧窗口	H5
topWindow Object	否	大屏顶部窗口	H5
rightWindow Object	否	大屏右侧窗口	H5

页面配置

所有的页面应当放在pages目录

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path" : "pages/message/message"
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
    ],
}

tabbar

{
	"tabBar": {
		"list": [
			{
				"text": "",
				"pagePath": "./pages/message/message",
				"iconPath": "./static/logo.png"
			},
		],
	}
}

condition启动模式配置

启动模式配置，仅仅开发期间生效，用于模拟直达的场景。

属性说明

属性	描述
current	当前激活的模式，list节点的索引值
list	启动模式列表

list说明

属性	描述
name	启动模式名称
path	启动页面路径
query	启动参数，可在页面的onLoad函数里获得

组件的基本使用

text文本组件

view视图容器

button按钮组件

image组件

uni-app中的样式

• rpx即响应式px，一种根据屏幕宽度自适应的动态单位。
• 使用@import语句可以导入外联样式表
• 支持常用的选择器class、id、element等
• 在uni-app中不能使用*
• page相当于body
• 定义在App.vue中的样式为全局样式，作用于每一一个页面。 在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。
  - uni -app支持使用字体图标，使用方式与普通web项目相同

字体文件的引用路径推荐使用~@开头的绝对路径

数据绑定

在页面中需要定义数据，和vue一样，直接在data中定义数据即可。

<script>
	export default {
		data() {
			return {
				msg: "hello uni-app"，
				img: "http://...png"
			}
		},
		methods: {
			demo() {
				console.log("hello uni")
			}
		}
	}
</script>

插值表达式的使用

<view>{{msg}}</view>

v-bind动态绑定属性

<image v-bind:src="img"> </image>

注册事件

<button v-on:click="demo">push me</button>

传递参数

默认是传递event参数，即e

methods: {
	demo(e) {
		console.log("hello uni" + e)
	}
}

生命周期

应用的生命周期

函数名	说明
onLaunch	初始化完成触发
onShow	启动
onHide	从前台进入后台
onError	报错时

页面的生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的参数，参数类型为Object
onShow	监听页面显示，页面每次出现在屏幕上触发
onReady	监听页面初次渲染时完成
onHide	监听页面加载

组件的生命周期

其他可见官网，在此不做过多叙述

网络请求

POST请求

uni.request({
    url: 'https://www.example.com/request', 
    data: {
        text: 'uni.request'
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

数据缓存

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

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.setStorageSync(KEY,DATA)：将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

uni.getStorage(OBJECT)：从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

uni.removeStorage(OBJECT)：从本地缓存中异步移除指定 key。

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

条件注释和跨端兼容

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

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

在不同的文件中均可以使用注释跨端兼容

<!--#ifdef H5 -->

<!--#endif -->

值	生效条件
MP-WEIXIN	微信小程序
APP-PLUS	APP
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

导航跳转

利用navigator进行跳转

<navigator url="">
	<button>push me</button>
</navigator>

编程式跳转

<button v-bind:click="push">
	push me
</button>

<script>
	push() {
		uni.navigator() {
			url: ""
		}
	}
</script>

通过switchTab跳转到tabbar页面

<button v-bind:click="push">
	push me
</button>

<script>
	push() {
		uni.switchTab() {
			url: ""
		}
	}
</script>

uni-app中的组件

组件作为Vue中的一个重要的组成部分，其重要性不言而喻

在uni-app中，可以通过创建一个 后缀名为vue的文件，即创建一个组件成功， 其他组件可以将该组件通过import的方式导入，在通过components进行注册即可

components是一个自定义创建目录，使其更加符合工程规范。

<template>
	<test><test>
</template>

<script>
import "test.vue"

 components: {
 	testa: test
 }
 </script>

组件的通讯

父组件给子组件传值

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

</template>
	<view> {{msg}} </view>
<template>

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

传递者

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

<script>
	import "...test.vue"
	export default {
		data() {
			return {
				msg: "hello uni-app"
			}
		},
		components: {
			testa: test
		}
	}
</script>

子组件给父组件传参

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

传递参数

<template>
	<button @click="my"> </button>
</template>

<script>
	...
	methods: {
		my() {
			$emit("do", this.status)
		}
	}	
	...
</script>

接收参数

<template>
	<test @do="po"> </test>
</template>

<script>
	...
	methods: {
		po(param) {
			console.log(param)
		}
	}	
	...
</script>

兄弟组件传参

uni.$emit(eventName, OBJECT)：触发全局的自定义事件，附加参数都会传给监听器回调

uni.$on(eventName, callback)：监听全局的自定义事件，事件可以由uni.$emit触发，回调函数会接收所有传入事件触发函数的额外参数

<script>
	created() {  <!-- 组件的生命周期 -->
		<!-- 注册全局事件 -->
		uni.$on("updateNum", num => {
			this.num += num
		})
	}
</script>

uni-ui库的使用

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

下载压缩包

uni-ui特点

• 高性能
• 全端
• 风格扩展
• 与uniCloud协作
• 与uni统计自动集成实现免打点
• uni-ui符合全套DCloud组件规范

各取所需，各取所得！