Uni-app的学习
我是个小白,之前都是做后台管理和杂七杂八的东西,当东家丢我一个要求兼容所有移动端时,我人是傻的
然后去百度,发现了这么个神奇的玩意,一开始还很慌,但看到是基于vue的,瞬间底气十足奥,东家也很好,给了我学习时间(带薪学习),就很人性,啥也不说,直接对着官网撸!
什么是uni-app
uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序详情看官网链接: link
uni-app支持的通用css单位包括px、upx、vh、官网推荐rpx代替upx。
upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
如何创建
因为uni-app是基于vue开发的框架,vue脚手架是必备的
分为两种创建方式
1.可以通过cli(vue create -p dcloudio/uni-preset-vue my-project)命令进行安装,其中my-project名字自己定义
2.可以通过HBuilderX新建
文件目录
1.components 文件是存放组件的地方,组件都是根据项目需求自己对代码进行抽离。
2.icon 文件不是项目自动生成的,是自己建立的,用于引用图标库
3.pages 文件是存放页面的,和微信小程序里面的一样
4.static 文件是存放项目中的图片(一般都是底部导航图片)
5.manifest.json 是配置文件,主要配置APP、 H5 、各类小程序
6.pages.json 是配置页面底部导航栏和页面。其中底部导航栏是通过tabbar配置,最多只能配五个
7.uni.scss 是存放公共的样式。
不同的模块得到的文件一样不同(我这个就是uni-ui项目),虽然都是些废话,但的确和小程序很像,上手起来很快
生命周期
uni-app是基于vue的框架,所以vue的生命周期,在uni中一样能使用,除此之外,还拥有自身的生命周期以供使用,常用的onLoad,onShow,onReady,onHide等,更多可以参考官网link
项目运行(常用)
- 微信小程序端
配置小程序AppID
点击最上面工具栏选择运行
选择运行到小程序模拟器
选择微信小程序开发工具
2.浏览器端
这些是最基础的,至少能跑了