uniapp 初体验

1、前言

移动端跨平台层出不穷，提高了效率，但性能一直是个诟病，回顾历史加载前端界面白屏体验差（尽管优化成h5资源压缩打包进apk本地加载，网络请求通过端上转发，再有5G的加持，性能勉强够打），为了追求更好的性能和快速开发，后来推出了Weex，React Native ,Flutter，uniapp。其中Flutter性能最佳，不过需要熟悉Dart语法，增加了学习成本，目前uniapp热度较高，今天着重介绍下uniapp.

2、uniapp 介绍

uniapp 是目前热度比较高的一款跨平台工具，引用一句官方的话讲，

开发一次，多端覆盖，也就是说采用uniapp方式开发功能，可以一次打出android，ios,web前段和多家小程序，这得益于uniapp底层会自动转换成各平台的代码。

3、开干准备

由于uniapp 采用vue开发，首先要求你有相应的vue基础
准备好官方开发工具HBuilderX

没错，就这2样你就能开发了，这里不需要你对webpack 理解多深，也不需要安装npm，得益于编辑器帮我们做了这些工作。下面对主要知识点简单介绍，有个印象。

3.1、flex布局属性介绍

属性	描述	常用参数
flex-direction	容器元素排列方向	row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）
flex-wrap	控制容器内的元素换行	nowrap（不换行）；wrap（换行）；wrap-reverse（反向换行）
justify-content	主轴对齐方式	flex-start(左对齐); flex-end(右对齐); center(居中);space-between (分居两端，中间空白）; space-around (等距对齐）
align-items	纵轴对齐方式	stretch（如果容器内元素未设置高度，则默认元素高度为容器高度）； flex-start（上对齐）； flex-end （下对齐）； center（居中）； baseline （如果容器中的元素中有文字，则按文字底部对齐）
order	控制排序	值越小越靠前
flex-grow	放大比例	类似 widget属性
flex-shrink	缩小比例	空间不足时，会缩小
flex-basis	计算多余空间	1和auto，也可以是其他数字

3.2、项目结构

3.3 、页面构成

uni-app中的页面，默认保存在工程根目录下的pages目录下。每次新建页面，均需在pages.json中配置pages列表。页面内容构成，分为3部分 <template> 、<script>和 <style>，跟前端和小程序响应式编程类似，（声明data数据，view中使用，会自动绑定刷新）

xml 复制代码

<template> //页面view绘制
	<view class="content">
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

<script>
	export default {
    		data() { //数据
    			return {
    				title: "Hello world",			
                                }
		},
		onLoad() {// 页面加载
		},
		onShow() {
		},
		methods: {
		}
	}
</script>

<style> //样式
	.content {
		width: 750rpx;
		background-color: white;
	}
</style>

3.4、页面生命周期

函数名	说明
onInit	监听页面初始化，早于onLoad
onLoad	监听页面加载，可用于获取网络数据和获取上个页面传递的数据
onShow	页面可见，获取数据
onReady	DOM 树($el)已可用
onHide	页面隐藏

3.5、全局收发消息.类似观察者模式

api	描述
uni.$emit(eventName,OBJECT)	发消息
uni.$on(eventName,callback)	收消息

例子

php 复制代码

//发送update 事件，内容后面的msg
	uni.$emit('update',{msg:'页面更新'})
//接收到update事件，内容是msg
uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

3.6、页面跳转

方法	描述
uni.navigateTo（url）	打开新界面
uni.navigateBack	返回
uni.switchTab	Tab 切换
uni.reLaunch	页面全部出栈，只留下新的页面

3.7、组件封装

组件一般放在 components文件夹下，类似RN ,声明 props属性以及类型（可以是组件和方法，父view传递进来）引入组件分3步，1导入 2注册 3使用

模版如下：

xml 复制代码

<template>
	<view>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>
复制代码