Uni-app是基于 Vue.js 的渐进式跨平台框架，它允许开发人员使用 Vue.js 构建一次即可输出到多个平台 - 微信小程序、H5、Android、iOS 等多个平台。在使用Uni-app进行开发时，我总结出了以下uniapp学习心得：
1.学习前需要掌握基础知识
作为一个基于Vue.js的跨平台框架，学习Uni-app需要掌握Vue.js的基础知识。这包括Vue.js的组件化思想、指令、生命周期等等。
Vue.js的基本概念
Vue.js 诞生于 2014 年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。
优点:
轻量级:Vue 简单、直接，所以 Vue 使用起来更加友好。
双向数据绑定:数据驱动视图，视图也可以驱动数据。
组件化开发: vue.is 提供了非常方便且高效的组件管理来进行加载公用的模块
指令:指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件:插件用于对 vue 框架功能进行扩展。
缺点:
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差 e. 文件命名受限
如果你没有接触过Vue.js，可以先学习Vue.js，这会让你更容易理解Uni-app，并且能够在开发过程中更加得心应手。
常用的构造选项
| 选项 | 说明 |
| el | 唯一根标签，决定Vue实例会管理哪一个DOM节点 |
| data | Vue实例对应的数据对象 |
| methods | 定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用 |
| computed | 定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号 |
| components | 定义Vue实例的子组件 |
| filters | 定义Vue实例的过滤器 |
| watch | 监听数据变化，观察和响应 Vue 实例上的数据变动 |
在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。
使用el 绑定DOM元素
一、函数（Function）
- 函数的作用： 函数中封装了一些代码，在需要的时候可以调用函数来执行这些代码。
- 函数分为内置函数和自定义函数
- 内置函数
如： parseInt(参数)
- 功能：把字符串转换为整数
- 参数：要转换的数据
- 返回值：一个整数或NaN
- 如：parseInt("67.9") //返回值:67
- 本章学习自定义函数
二、声明一个函数----即封装一些代码
1. 使用 函数声明 的方式
语法： function 函数名([形参1,形参2...形参N]){
语句...（函数体）
}
2. 使用 函数表达式 的方式
语法： var 变量名 = function([形参1,形参2...形参N]){
语句...（函数体）
};
注：=右边没有函数名的函数叫做匿名函数
三、调用函数------即执行函数体
封装到函数中的代码不会立即执行，函数中的代码会在调用函数时执行。
当调用函数时，函数中封装的代码会按照顺序执行。
1. 调用语法为：函数名()
2. 注意：使用 函数声明 方式声明函数时，声明与调用的顺序不限定。 使用 函数表达式 方式声明函数时 ， 必须先声明后调用。
3. 注意分辨 函数名 与 函数名() 的区别
函数名() ：指调用（执行）函数，可以得到函数的返回值
函数名 ： 指声明函数的代码
四、函数的参数
没有参数的函数叫无参函数，有参数的叫有参函数。
函数的参数分为： 形参和实参
1、形参：形式参数
- 声明函数时，可以指定一个或多个形参，形参之间使用,隔开。
- 定义形参就相当于在函数内声明了对应的变量但是并不赋值。
- 形参在调用时才赋值。
- 语法：
函数声明： function 函数名(形参1,形参2...形参N){ 语句...
}
函数表达式: var 变量名 = function(形参1,形参2...形参N){ 语句....
}
2、实参：实际参数
- 调用函数时，可以指定实参，指定的实参会赋值给对应的形参.
- 语法：
函数名(实参1, 实参2... 实参N);
- 实参可以是任意类型(基本数据类型、数组、对象、或一个函数)
- 如果实参的数量大于形参，多余实参将不会赋值;
如果实参的数量少于形参，则没有对应实参的形参将会赋值undefined。
3、arguments的使用
- 当形参数量不确定时，可以在声明函数的()中不指定形参，在函数体内通过arguments获取实参。
- arguments是个类数组，有索引和长度，但没有数组的push()、pop()的方法。
五、返回值
- 可以使用return 来设置函数的返回值。
- 语法：return 值;
- return 后的值就是函数的返回值，可以返回任意类型（基本数据类型、数组、对象，也可以是一个函数)。可以通过一个变量来接收返回值。
- 如果return语句后不跟任何值就相当于返回一个undefined，
如果函数中不写return，则也会返回undefined。
- return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
break -退出循环或switch语句 continue -跳过当次循环 return -退出函数
2.熟悉uniapp框架
uniapp框架提供了大量的组件和API，使用这些组件和API可以快速构建一个高质量的跨平台应用。
3. 快速开发
由于Uni-app的核心是基于Vue.js框架，因此它的开发流程和Vue.js非常类似，开发人员的学习成本相对较低。同时，Uni-app提供了很多预设好的模板和组件，可以轻松地快速构建出原型界面，快速实现功能。
4 跨平台兼容性和易用性
Uni-app的跨平台兼容性和易用性是其最大的优点之一。开发人员可以只使用一种编程语言，编写出跨平台的应用。这不仅节省了开发成本，同时还可以大大提高开发效率。
5. 统一的工具集和开发流程
Uni-app提供了一个统一的工具集和开发流程，在开发小程序、H5、Android、iOS等应用时可以减少很多重复的工作。且由于其基于Vue.js，因此开发人员可以轻松地利用Vue.js工具集开发相应的应用。
6. 丰富的组件库和插件
Uni-app拥有很多UI组件，例如按钮、表单、标签、卡片等等。这些组件能够帮助开发人员快速开发出一套符合标准的UI界面，也可以打造个性化的界面。拥有庞大的社区，在其社区中有大量的插和模板，可以帮助我们更快、更好地开发出跨平台应用。
7. 开放的生态系统
Uni-app框架拥有公开的生态系统，并持续扩充，开发人员可以轻松地调用第三方库或API。同时，Uni-app也吸引了全球开发人员的加入，开发人员可以找到大量的开源组件和代码示例，减轻了很多开发复杂度。
8. 简洁的语法和易于理解的代码
Uni-app使用Vue.js作为其基础框架，其语法非常简洁，并且语句易于理解。Vue.js的组件化设计思想使得开发人员能够更加清晰地分离业务逻辑和UI组件，从而提高代码的可读性。
9.优秀的性能和用户体验
Uni-app的底层采用了原生渲染，提升了应用的性能，可以实现更加平滑流畅的操作体验。同时，Uni-app支持在不同端上进行优化和定制，以提升用户体验和应用性能。
通过HBuilderX可视化界面创建第一个uni-app应用
第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目
第二步：选择
项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。
创建项目完成
总的来说，学习Uni-app需要掌握Vue.js的知识、查阅官方文档和社区资源、多实践和与社区互动，Uni-app是一款非常优秀的跨平台开发框架，它的易用性、开发效率、性能和用户体验都非常优秀。对于需要开发多个平台应用的项目，Uni-app是一个非常不错的选择并尝试在实际应用中运用，以帮助我们更好地掌握这个跨平台开发工具，同时也能够提升我们的开发效率和水平。同时，Uni-app生态系统的不断完善和开放性也为开发人员提供了很多支持和参考。
多实践，多尝试，同可以多尝试一些小项目，通过实践来深入了解Uni-app的各种特性和用法。时，可以通过练习编写组件、调试和配置各种插件来进一步熟悉Uni-app的开发流程和规范。
多与开发者社区互动，Uni-app拥有一个强大的开发者社区，这个社区拥有非常多的开发者和经验。与社区互动，可以通过向其他开发者提问、分享自己的开发经验来增强自己的技能和知识，也可以发现新的开发技巧和最佳实践。
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
