uniapp心得体会

在移动应用开发的过程中，跨平台的开发已经变得越来越普遍，这是由于跨平台可以极大减少开发周期，有利于实现快速迭代和更新。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上方找到工具，选择插件安装，可以查看或者添加插件和语言，如果没有可以前往插件市场安装。

DCloud 插件市场

在学习uniapp时，我们不熟悉uni-app的API和组件，我们可以去uni官网查看其功能和使用方法。

uni-app官网