在移动应用开发的过程中,跨平台的开发已经变得越来越普遍,这是由于跨平台可以极大减少开发周期,有利于实现快速迭代和更新。vue官方出品,基于Vue.js的跨端开发框架uni-app应运而生,并且现在已经被广泛应用于开发高性能的移动端应用,包括OS、Android、H5、小程序等多个平台的应用程序。
首先需要安装开发环境:开发者需要安装开发工具和相应的开发环境。
uni-app开发环境的搭建学习uni-app的第一步,当然是搭建开发环境。如果你已经掌握了Vue.js开发的基础,那么搭建起uni-app的开发环境也是非常简单的。
要进行uni-app的开发,首要的任务就是搭建开发环境。安装好了Node.js和HBuilderX之后,Node.js是我们运行uni-app项目必不可少的环境,而HBuilder X则是一个具有完整开发生态圈的开发工具,可以快速创建uni-app项目,并且提供完整的工程构建、代码高亮、代码补全、调试器、模拟器、正式版签名和打包等一系列功能。
本人使用HBuilderX来作为开发工具。
DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架uni-app多端开发,开发一次同时生成App、小程序、H5https://www.dcloud.io/通过HBuilder X的工具箱中的“创建项目”功能,我们就可以快速地创建出一个uni-app项目,并且通过调整组件和样式来构建我们的应用程序。
打开HBuilderX,鼠标选择上方的文件点击,选择新建
然后选择项目
然后就出现这样的一个页面,输入项目名称(不可以输入中文),选择vue版本,点击创建就创建好了
创建完项目后一般会自动创建一下几个目录,我来给大家介绍下它们的作用
1.pages:一般用于存放页面。
2.static:用于存放静态页面,一般是图片。
3.App.vue:是vue页面资源的第一个加载项目,所有的页面都是在这个里面切换的。
4.index.html:首页入口文件。
5.main.js:项目入口文件,主要作用是初始化vue实例并使用需要的插件。
6.manifest.json:用于写应用名称,应用描述,版本号,权限等等。
7.pages.json:用来写页面文件的路径和导航栏标题文本,导航栏标题背景颜色,导航栏标题背景颜色等等。
8.uni.scss:方便整体控制应用样式,里面有许多颜色样式,和图片尺寸。
uniapp的生命周期
1.onLaunch:应用启动时触发,全局只触发一次
2.onShow:应用启动或从后台切换到前台时触发
3.onHide:应用从前台切换到后台时触发
4.onError:应用发生脚本错误时触发
5.onPageNotFound:应用页面找不到时触发
6.onUniNViewMessage:监听原生组件发送的消息
7.onPullDownRefresh:页面下拉刷新时触发
8.onReachBottom:页面滚动到底部时触发
9.onShareAppMessage:右上角分享按钮点击时触发
10.onTabItemTap:tabBar 点击时触发
11.onNavigationBarButtonTap:导航栏按钮点击时触发
12.onResize:页面尺寸变化时触发
这些生命周期函数可以在页面级别和组件级别各自存在,执行时机略有不同。在页面级别的生命周期函数中,可以访问到页面的数据和方法。在组件级别的生命周期函数中,则可以访问到组件的 props 和 data。
插件和语言的安装
我们学习uniapp语言需要用到scss等语言还有一些插件。
在HBuilderX上方找到工具,选择插件安装,可以查看或者添加插件和语言,如果没有可以前往插件市场安装。
在学习uniapp时,我们不熟悉uni-app的API和组件,我们可以去uni官网查看其功能和使用方法。