uniapp前置知识与要点总结

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,并且能够在开发过程中更加得心应手。 

uniapp前置知识与要点总结_第1张图片

常用的构造选项

选项 说明
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元素

uniapp前置知识与要点总结_第2张图片

一、函数(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可以快速构建一个高质量的跨平台应用

uniapp前置知识与要点总结_第3张图片


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界面,也可以打造个性化的界面。拥有庞大的社区,在其社区中有大量的插和模板,可以帮助我们更快、更好地开发出跨平台应用。

uniapp前置知识与要点总结_第4张图片


7. 开放的生态系统

Uni-app框架拥有公开的生态系统,并持续扩充,开发人员可以轻松地调用第三方库或API。同时,Uni-app也吸引了全球开发人员的加入,开发人员可以找到大量的开源组件和代码示例,减轻了很多开发复杂度。


8. 简洁的语法和易于理解的代码

Uni-app使用Vue.js作为其基础框架,其语法非常简洁,并且语句易于理解。Vue.js的组件化设计思想使得开发人员能够更加清晰地分离业务逻辑和UI组件,从而提高代码的可读性。


9.优秀的性能和用户体验

Uni-app的底层采用了原生渲染,提升了应用的性能,可以实现更加平滑流畅的操作体验。同时,Uni-app支持在不同端上进行优化和定制,以提升用户体验和应用性能。


通过HBuilderX可视化界面创建第一个uni-app应用

第一步:打开HBuilderX,点击工具栏里的文件 -> 新建 -> 项目

uniapp前置知识与要点总结_第5张图片第二步:选择

uniapp前置知识与要点总结_第6张图片

项目创建完成之后即可运行,打开项目的任意文件,如App.vue,选择“运行”-->"运行到浏览器“命令,选择浏览器,即可在浏览器中体验uni-app的H5版。 

uniapp前置知识与要点总结_第7张图片

创建项目完成

uniapp前置知识与要点总结_第8张图片

总的来说,学习Uni-app需要掌握Vue.js的知识、查阅官方文档和社区资源、多实践和与社区互动,Uni-app是一款非常优秀的跨平台开发框架,它的易用性、开发效率、性能和用户体验都非常优秀。对于需要开发多个平台应用的项目,Uni-app是一个非常不错的选择并尝试在实际应用中运用以帮助我们更好地掌握这个跨平台开发工具,同时也能够提升我们的开发效率和水平。同时,Uni-app生态系统的不断完善和开放性也为开发人员提供了很多支持和参考。

多实践,多尝试,同可以多尝试一些小项目,通过实践来深入了解Uni-app的各种特性和用法。时,可以通过练习编写组件、调试和配置各种插件来进一步熟悉Uni-app的开发流程和规范。

多与开发者社区互动,Uni-app拥有一个强大的开发者社区,这个社区拥有非常多的开发者和经验。与社区互动,可以通过向其他开发者提问、分享自己的开发经验来增强自己的技能和知识,也可以发现新的开发技巧和最佳实践。

你可能感兴趣的:(javascript,vue.js,uni-app)