uni-app入门学习总结

马不停蹄的学习，总会没体力的时候，最近感觉学习慢慢力不从心，动力不足了，固然如此但未曾停止。
接下来向大家汇报近一个月学习uni-app的相关心得，首先作为安卓开发的我，开发过小程序，转为开发uni-app几乎毫无压力，尤其是官方文档相当完整的前提下，仅仅在某些css上不熟悉。

转载注明出处，CSDN第八篇

首先介绍一下uni-app，一套代码适配十个平台的开源框架，可开发Android，IOS，H5，微信，支付宝，百度，字节跳动，QQ，360等小程序，和华为或者联盟版的快应用。
uni-app是国人在vue的基础上的封装，封装的组件和微信小程序的几乎一模一样，它的官方文档也是相当完善。
安装很简单官网下载编辑器HBuilderX开发版，解压可用，创建项目选择uni-app，选择模板并预览一气呵成，模板基本就是一个完整的项目。

目录结构

common 可以用来存放一些公共css及js文件
component 可以存放我们自己封装的一些组件
static 用来存放我们的静态文件比如图片，icon之类的
hybrid 可以存放我们写的本地html文件
platforms 存放各平台专用页面的目录
pages 存放我们写的项目页面
main.js 初始化入口文件，创建vue实例，app实例，引用vuex
App.vue 用来配置app的全局样式以及监听应用的生命周期
manifest.json 配置应用的名字，图标等各种信息
pages.json 配置页面的路由、底部导航、顶部标题按钮搜索框等页面类信息

生命周期

onReady：页面初次渲染完成时触发 ，然后触发vue 的 mounted
onLoad：页面加载时触发，可以用来在页面之间传参，具体的一些处理会在以后的文章详细介绍。
onShow：页面显示时触发，当应用启动或从后台进入前台时触发。感觉相当于vue的 created
onHide：页面隐藏时触发，当应用从前台进入后台时触发。
onUnload：页面卸载时触发
onBackPress：页面返回时触发
下面这两个比较厉害了，自带下拉刷新和上拉加载！！！
onPullDownRefresh：用户下拉时触发，在pages.json中的页面的style中添加enablePullDownRefresh，刷新完uni.stopPullDownRefresh停止
onReachBottom：页面上拉触底时触发

基础组件

其实官方的组件介绍已经相当详细了，我本不用多说什么，这里就提一下有哪些控件吸引人吧，毕竟官方都写过的控件，就不用咱自己再去实现了。
swiper 用来写轮播图，swiper-item就是每一个图片，可以设置是否自动滚动，间隔时长，是否显示指示点，甚至可以改成竖向滚
navigator 跳转组件，相当于js中的uni.navigateTo方法，只要设置跳转的url即可点击跳转新页面
movable-area和movable-view，可拖动的范围和范围内可拖动的组件，可设置横向，竖向和横竖都可以。
其他的还有自带矢量图图标，日历，grid，list，但是说实话grid和list不太好用，最后我还是用css实现的。
这里也顺带说一下，自带的方法吧。
uni.setStorage和uni.getStorage 是存取本地数据
uni.request 是请求网络
uni.showLoading uni.showToast uni.showModel 分别是加载框，提示框和弹窗

点击触摸事件

点击事件 vue中是@click，而在uni-app中是@tap事件，其实两个都可以用，在@tap中传入一个方法，即可在点击的时候调用。
焦点事件 在web项目上，鼠标停留会触发焦点，也就是:hover，而在uni-app上只能是触摸触发hover-class，普通的是class
触摸事件 分为三步，手指按压@touchstart，手机移动@touchmove，手指抬起@touchend，在方法后加入stop.prevent后缀就可以拦截触摸事件，父组件就不会响应了，防止冲突。
我使用触摸的移动距离计算动态改变组件的top和left属性实现简单的拖动和复位。

动画

animation在页面onLoad生命周期里创建动画uni.createAnimation，使用一个变量接收
当播放动画时，使用animation设置动画的旋转，位移，透明，缩放，以step为每组动画的结尾，同时在step后设置该组动画的时长。
最后利用animation.export导出动画到一个data变量中，绑定该data的组件便会播放动画了(:animation={data})。

总结

总体来说，uni-app门槛很低，基本有个开发基础的就可以实现，但是要缩短开发时间，提高开发质量，还是需要多加练习，后期我的项目暂时会以前端为主，但我还是个新手，需要多学习。

文章中提高的触摸和动画都写了一个小demo，放在码云上了。
项目地址： https://gitee.com/sky-nine/yanshi.git.

我的目标是全栈，现在学的太广了，都不精，提升的路还有很远。