素材巴巴 > 程序开发 >

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

程序开发 2023-09-17 15:39:33

 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) 全局变量 与 局部变量的比较
          -  全局作用域在页面打开时创建,在关闭浏览器时销毁;比较占内存资源。                - 函数(局部)作用域在调用函数时创建,函数执行完毕以后,其函数作用域销毁。每调用一个函数就会创建一个新的函数作用域,他们之间是互相独立。节省内存资源。  

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

在网上搜索更佳答案

在网上搜索更佳答案


标签:

上一篇: 【代码规范化】换行符 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。