学习uniapp过程，获得的感悟，与Vue.js区别，与其他代码软件区别，给uniapp的建议，学习总结

 UniApp是由DCloud（DCloud是一家致力于跨平台开发的云服务提供商）于2017年创造的一种跨平台开发框架。它最初的目的是为了解决移动应用开发领域存在的一些问题，如开发难度大、开发成本高以及统一性差等问题。UniApp可以将开发者的代码转换为各种平台上的原生应用程序，包括iOS、Android、H5、以及各种小程序平台。这样，在开发者开发一个应用时，无需为不同的平台编写不同的代码，减少了开发的时间和成本，提高了应用的效率和开发效果。通过使用UniApp，开发者可以更快速地将应用推向市场，促进应用的普及。

在这个学习和使用uni-app开发跨平台应用.在这个过程中，我获得了很多经验和感悟，我想通过这篇文章分享我的一些心得体会。

首先，我想说的是，uni-app真的是一个很棒的跨平台开发框架。它允许我们使用Vue.js编写一次代码，然后将应用程序编译为多个平台，包括iOS、Android、H5和小程序。这使我们能够建立一个高效且可靠的项目，并使其覆盖尽可能多的目标用户。

   我还推荐尝试使用uniapp的一些实用功能，比如uni-icons组件可以检索出各种动态图，大大方便了应用的美化工作；自定义导航栏和多语言支持是uniapp的强有力强特性，可以自由地定制应用的设计并方便非本地开发的应用内操作体验。

 

 我也从其他开发者的经验中获取了很多启发。尽管uniapp社区还在发展壮大中，但是有很多开发者经常发布一些有趣和优秀的技巧、建议和经验，在各种社交媒体平台上添加tags标签，您可以在那里搜索到有用的内容，在这些内容中反复尝试和寻找可最优方案。 这些资源对我很有帮助，尤其是在尝试解决并调整某些问题的时候。

uniapp强大的几点：

1.项目搭建
step1打开uniapp，选择文件-新建-项目，设置项目名称和代码存放目录。
step2选择uni-ui项目，vue版本选择 vue3。

2.目录了解
pagejson是配置页面路由的，
manifest是用来配置打包选项的(小程序打包，app打包等)
uni.scss是全局样式
main.js整个app的入口文件

3.组件
uniapp的组件和vue是一样的。需要注意的是在uniapp中，在components文件夹下的创建的组件，使用的使用不用引入，注册，直接使用即可。

4.头部title 设置
在pagejson中配置以后，头部的title可以自定义。

5.全局单位设置
开发uniapp我们使用rpx作为单位。
设计稿中的px转我们开发的rpx的公式，如果宽度是750的话，1px=1rpx
比如设计图是640的，我们就这样写，会自动把640下的px转成rpx
组件
uniapp的组件和vue是一样的。需要注意的是在uniapp中，在components文件夹下的创建的组件，使用的使用不用引入，注
册，直接使用即可。

     我在开发实践中也使用过Uniapp的感受：

1. 熟悉Vue.js开发的基础知识是需要的。因为Uniapp是基于Vue.js框架进行开发，所以熟悉Vue.js的基础开发知识是必要的。

2. 使用多端组件。Uniapp的多端组件可以让我们开发出具有良好跨平台适应性的应用，组件的复用也非常方便。

3. 对于不同平台进行适配。不同的平台对UI布局以及样式的要求是不同的，需要进行不同的适配。例如H5页面需要使用vw、vh等单位来适配不同的屏幕尺寸，小程序需要对自定义组件进行一些特殊样式的调整等等。

4. 组件的优化和性能的优化。在面对大型复杂的Uniapp项目时，组件的优化和性能的优化是项目的重要组成部分之一。例如组件的按需加载、异步加载，图片的懒加载等等。

5. 根据项目需求选择不同的打包方式。Uniapp提供了多种打包方式，例如云打包、自定义打包、HbuilderX远程打包等等，根据项目的需求选择适合的打包方式可以提高项目的开发效率。

uniapp学习总结:

1. 对Vue.js的理解：Uni-app是基于Vue.js的开发框架，对Vue.js的基本语法和相关概念有一定的了解是必要的。建议在开始学习Uni-app之前，先学习Vue.js的基础知识。

2. 学习Uni-app文档：Uni-app有非常完善的官方文档，学习之前先仔细阅读官方文档，了解其基本使用方法和常用API。

3. 熟练掌握标签和组件：Uni-app的标签和组件和Vue.js基本一致，掌握它们的使用方式可以有效提高开发效率。

4. 了解小程序的基本知识：Uni-app支持多种小程序平台，建议学习一些常用的小程序开发技巧，如小程序生命周期、小程序页面跳转等。

5. 关注社区和开源项目：Uni-app有一个较为活跃的社区，在社区中可以找到各种开源的项目和插件，可以从中学习到更高级的开发技巧和经验。

学习uni-app对于初学者可能有些难度，特别是那些之前没有接触过Vue.js或小程序开发的开发者。但是，我认为学习uni-app的三个步骤是非常有效的：

第一步，仔细阅读官方文档和示例。官方文档提供了详细的开发文档和示例，从而帮助我们深入理解uni-app的工作机制和核心概念。

第二步，通过实践来学习。需要亲手进行调试和尝试，以此来掌握uni-app的开发流程和技术。

第三步，参与开发者社区。在uni-app的开发者社区中，你可以得到许多有用的技巧、建议和经验分享，这可以进一步提高你的开发水平。

在学习的过程中，我发现官方文档和示例是非常有用和必须的。这是一个优秀的教育和指导平台，可以帮助新手快速入门，并且更容易地了解uniapp的工作机制、开发技术和核心概念。 当我刚刚开始入手uniapp的时候，我首先是花费大量的时间研究文档和示例，并将它们作为我项目中的参考。

我发现官方文档和示例非常有用并需要仔细阅读和研究。 官方文档中提到的各种组件和特性也是非常重要的，可以让我们更加容易地掌握uni-app的开发知识和技能。同时，与其他uni-app使用者交流发现，uni-app社区也是一个非常有用的资源，里面有大量为其他用户提供的技巧和建议，以及其他人分享的可用插件、样式等，使我能够更快地学习和适应。

总的来说，我认为uni-app是一个非常有前途的跨平台开发框架。它非常强大，可以使我们从开发多个应用程序的繁琐过程中解脱出来。学习uni-app可能需要一些时间，但我相信通过不断尝试使用和实践，我们将能够掌握它，打造高效且可靠的跨平台应用程序。 

Uni-app与Vue.js区别：

Uni-app是基于Vue.js开发的高效跨平台应用开发框架。它是一个类似于React Native和Flutter等跨平台框架，但是与其他框架不同的是，Uni-app使用的是Vue.js的语法。

具体来说，Vue.js是一个轻量级的JavaScript框架，它反应灵敏，易于学习，适用于快速开发SPA（单页应用程序）。Vue.js是一种可扩展的框架，由基础框架和众多可插拔的插件组成。在Vue.js中，我们使用Vue组件，将页面分割成小块，从而可以更好地管理和维护代码。Vue.js还拥有丰富的指令、过滤器、生命周期钩子和组件之间的通信机制等特性。

Uni-app底层则是基于Vue.js的，它使用Vue.js的生态系统，提供了一组适用于跨平台应用程序的组件和API，以及一些扩展的指令和事件监听器。Uni-app的核心理念就是使用单一代码库来生成多个平台，包括iOS和Android应用程序，微信小程序，H5站点等等。在开发过程中，Uni-app提供了标准的Vue组件来构建页面，该组件库与Vue.js的组件是一致的，但是其中包含了一些特殊的组件和API，这些组件和API可以轻松应用于多个平台。

总的来说，Vue.js更适合用于单页应用程序的开发，而Uni-app则更适合于开发跨平台应用程序。Vue.js可以在浏览器中运行，而Uni-app则是使用打包工具将Vue.js代码编译成多个平台可以运行的代码。虽然Uni-app和Vue.js使用的语法和概念非常相似，但Uni-app在组件和API方面做了很多扩展，以适应多平台的开发要求，这使得Uni-app在跨平台应用程序开发方面更具有优势。

Uni-app与其他代码软件区别：

一.多平台支持：Uni-app支持将代码编译为多个平台的应用程序，例如iOS应用程序、Android应用程序和微信小程序等，这使得开发人员能够使用同一份代码为不同的平台开发应用程序。而其他代码软件多数只能在特定的平台上运行。

二.框架支持：Uni-app是基于Vue.js框架开发的，它使用Vue.js的语法及其生态系统。Vue.js是一种轻量级的框架，使用起来非常灵活、可扩展和易于学习。而其他代码软件则使用不同的框架，如React框架、Angular框架等。

三.组件库支持：Uni-app提供了专门用于跨平台应用程序开发的组件库，这些组件具有良好的跨平台兼容性，可以节省开发人员的时间和精力。而其他代码软件往往不提供专门用于跨平台应用程序开发的组件库，需要开发人员自行设计和编写组件。

四.社区支持：Uni-app拥有庞大而活跃的社区，各种问题和困难都可以在社区中提问交流，其他开发者也会给出有用的建议和分享他们的经验。而其他代码软件的社区规模和活跃度可能不如Uni-app。

总的来说，相对于其他代码软件，Uni-app更适合开发跨平台应用程序，并且使用起来更加灵活和方便。Uni-app还拥有丰富的文档和社区支持，使得开发人员能够更好地理解和使用它。

l JavaScrip概述。

Ø JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。

Ø JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。

Ø JavaScript主要运行在浏览器中。

l JavaScript与HTML和CSS之间的联系

Ø HTML：决定网页的结构和内容，相当于人的身体

Ø CSS：决定网页呈现给用户的模样，相当于给人穿衣服、化妆

Ø JavaScript：实现业务逻辑和页面控制，相当于人的各种动作

Ø 联系：JavaScript内嵌在HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面，转变成支持用户交互的页面程序

l JavaScript的诞生和发展。

Ø 在1995年时，Netscape公司的布兰登·艾奇在网景导航者浏览器上首次设计出了JavaScript。

Ø Netscape最初将这个脚本语言命名为LiveScript，后来Netscape公司与Sun公司）合作之后将其改名为JavaScript。

Ø 在设计之初，JavaScript是一种可以嵌入到网页中的编程语言，用来控制浏览器的行为。现在，JavaScript的用途已经不仅局限于浏览器了。

l JavaScript的特点。

Ø JavaScript是一种脚本语言。

Ø JavaScript可以跨平台。

Ø JavaScript支持面向对象。

l JavaScript的组成。

Ø JavaScript由ECMAScript、DOM、BOM三部分组成。

Ø ECMAScript是JavaScript的核心内容。

Ø DOM是文档对象模型，通过DOM提供的接口可以对页面上的各种元素进行操作

Ø BOM是浏览器对象模型，通过BOM可以对浏览器窗口进行操作

l JavaScript与ECMAScript的关系

Ø Ecma国际，规定了浏览器脚本语言的标准，将这种语言称为ECMAScript

Ø JavaScript和JScript可以理解为ECMAScript的实现和扩展

一、函数（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 -退出函数

六、回调函数

- 函数的实参可以是任意数据类型(基本数据类型、数组、对象、或一个函数)
       - 函数A作为参数传递给函数B，然后在B的函数体内调用函数A。则称函数A为回调函数。 
       - 用回调函数可以让一个函数实现不同功能

七、立即执行函数（自调用方式） 

  - 函数声明、函数表达式 方式：声明完函数不会立即执行，要在调用时才会执行。声明一次，可以多次执行。
        - 立即执行函数（自调用方式）：函数声明完，立即被调用，这种函数叫做立即执行函数。立即执行函数往往只会执行一次。

      例1： (function (){  alert("hello!");   })();

      例2： var sum= (function add(a,b){ return a+b; })(1,2);

八、作用域

作用域指一个变量起作用的范围
1、在JS中一共有两种作用域：
全局作用域：整个script标签 或 一个 单独的js文件
        函数（局部）作用域 :   在函数 内部就是函数（局部）作用域 。
2、  全局变量 与 局部变量
  （1）  全局变量：在全局作用域中起作用的变量就是全局变量。
                未在任何函数中用var声明的变量都是全局变量。
  （2）  局部变量：仅在函数（局部）作用域起作用的变量就是局部变量，仅在某函数中可以使用。
               在函数中，只有使用var声明的变量及形参是该函数的局部变量。                               注意：
                   -  在函数中，不使用var声明的变量都会成为全局变量。
                   -  在函数作用域中可以访问到全局变量, 在全局作用域中无法访问到局部变量。    
  （3) 全局变量 与 局部变量的比较
          -  全局作用域在页面打开时创建，在关闭浏览器时销毁；比较占内存资源。                - 函数（局部）作用域在调用函数时创建，函数执行完毕以后，其函数作用域销毁。每调用一个函数就会创建一个新的函数作用域，他们之间是互相独立。节省内存资源。  

九、作用域链       
       作用域链：当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用; 如果没有则向上一级作用域中寻找，直到找到全局作用域； 如果全局作用域中依然没有找到，则会报错。

在网上搜索更佳答案

在网上搜索更佳答案