uni-app小结

创建与启动项目

1、使用HBuilderX编辑器 ，可以选择新建项目或者导入项目；

2、选择一个最常用的模板

3、启动项目，可以在多端运行，这里以浏览器为例。

简单使用

1、标签：uni-app语法更vue语法类似，为兼容到多端，uni-app只有一下常用的标签，类似于微信小程序，<view></view> 就类似于 <div></div> <text></text>用来书写文本，因此类似于<span></span>,图片就用<image></image>等等。
2、语法：

v-for、v-if、v-else、v-bind

模板语法 <text>{{title}}</text>
3、事件：vue所用到的事件在uni-app里都能用，说几个uni-app独有的事件

//tap手指触摸后马上离开
<view @tap="test" ></view>
//手指触摸后，超过350ms再离开（推荐使用longpress事件代替） 
<view @longpress="test" ></view>
//手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
<view @longtap="test" ></view>
//手指触摸动作被打断，如来电提醒，弹窗 
<view @touchcancel="test" ></view>
//手指触摸动作结束 
<view @touchend="test" ></view>
//手指触摸后移动
<view @touchmove="test" ></view>
//手指触摸动作开始 
<view @touchstart="test" ></view>

4、生命周期

uni-app看着一个应用，它有独特的应用生命周期和组件的生命周期

应用生命周期：这个是创建项目已经写好了的3个常用的应用生命周期

<script>
	export default {
		onLaunch: function() {
			//当uni-app初始化完成时触发（全局只触发一次）
		},
		onShow: function() {
			//当uni-app启动，或从后台进入前台显示
		},
		onHide: function() {
			//当uni-app从前台进入后台
		}
	}
</script>

组件的生命周期：vue里的生命周期在uni-app里也能用，这也是uni-app独特的生命周期

<script>
	export default {
		onLoad(e) {
			// 监听页面加载，其参数为上个页面传递的数据
			//访问e可得到页面间传递的参数
		},
		onShow(){
			// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		},
		onReady(){
			// 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		}
	}
</script>

5、数据缓存

//异步存储在本地缓存指定的key中
uni.setStorage({
    key: 'hello',
    data: 'test',
    success() {
        console.log('success');
    }
});
//相应就是 异步取出本地缓存指定的key的数据
uni.getStorage({
    key: 'test',
    success(res) {
        console.log(res.data);
    }
});
// 同步存取数据
uni.setStorageSync('test', 'hello');
uni.getStorageSync('test');

6、网络请求
这里使用uni-app内部封装的请求。

async test(){
//也可以使用解构的方式来接收
	const [, data] = await uni.request({
							    url: 'https://xxxxxx',
							    data: {
							        text: 'hello'
							    },
							    header: {
							        'custom-header': 'hello' //自定义请求头信息
							    },
							    success:res => {//回调函数
							    }
							});
}