cordova和uniapp区别

1. Cordova和Uniapp介绍

Cordova 和 Uniapp 都是用于移动端开发的框架，可以使用 HTML、CSS、JavaScript 等 Web 开发技术进行开发。Cordova 早期叫 PhoneGap，是 Adobe 公司贡献给 Apache 开源基金会的一个项目，它通过 JavaScript API 把底层的 API 封装，允许开发者使用 Web 开发技术构建跨平台的应用，支持 Android、iOS、Windows Phone 等多个平台。而 Uniapp 是由 DCloud 公司推出的一款基于 Vue.js 的跨平台框架，可以开发出同时支持 iOS 和 Android 的应用。

2. Cordova和Uniapp的使用场景

两者的使用场景有区别，Cordova 适用于需要使用原生功能的应用，比如相机、地理位置等，开发人员可以通过 JavaScript 接口调用这些原生的功能，Cordova 会将 JavaScript 代码转换成可以在原生平台运行的代码。而 Uniapp 的使用场景则更偏向于快速开发多个具有相似功能或界面的小程序，适用范围更宽泛。

3.开发语言和开发模式的差异

3.1 开发语言

Cordova 的开发语言主要是 HTML、CSS、JavaScript，可以使用各种流行的 Web 开发框架如 Angular 或 React 进行开发。而 Uniapp 则是基于 Vue.js 的，在开发应用时可以直接使用 Vue 的语法，并且提供了许多自定义的组件和 API。

3.2 开发模式

Cordova 的开发模式可以分为两种，一种是以 web app 的方式进行开发，另一种方式是通过混合编码模式进行开发，包括使用 HTML、CSS 和 JavaScript 等 Web 技术来编写应用程序，再使用 Cordova 提供的 API 调用原生的功能。

Uniapp 的开发模式是使用 Vue.js 和一些自定义组件，在开发跨平台应用程序时能够快速构建出一个完整的应用程序并发布到各个平台。

4.性能比较

Cordova 和 Uniapp 在性能上有所差别，Cordova 的底层是 Webview，渲染引擎使用的是系统默认的，而 Uniapp 则使用了自己的渲染引擎，叫做 Vue 组件系统。 Vue 组件系统将组件抽象成一个内存中的对象，如果需要渲染这个组件，它会在内存中创建一个虚拟节点，将组件渲染成一个真正的 DOM 节点。这种方式能够减少浏览器端渲染的开销，从而提高应用的性能。

5.使用门槛

Cordova 的应用开发成本较高，需要掌握较多的底层原理和技术，不适合初学者；而 Uniapp 的学习成本则相对较低，因为它构建在 Vue.js 框架之上，对于已经熟悉 Vue.js 的开发者来说，上手很快，也更加方便。

6.总结

在选择 Cordova 或 Uniapp 进行开发时，需要根据具体的开发需求和技术水平进行选择。如果应用需要使用原生的功能接口时，Cordova 是不二的选择；而如果只需要开发小程序等应用，则 Uniapp 可以更好地满足需求。

综上所述，Cordova 和 Uniapp 具有不同的优缺点，选择哪种框架取决于具体的开发需求。

// 绑定 click 事件
document.addEventListener('deviceready', onDeviceReady, false);
// cordova 初始化回调函数，等待 cordova 就绪
function onDeviceReady() {
    // 执行相关操作
}

<template>
  <div class="container">
    <div class="list">
      
        <li v-for="(item, index) in list" :key="index" @click="onClick(item)">
          <img :src="item.imgUrl" alt="" />
          <div class="text">{{ item.title }}</div>
        
     </li>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyPage",
  data() {
    return {
      list: [
        {
          imgUrl: "https://picsum.photos/200/300",
          title: "美食",
        },
        {
          imgUrl: "https://picsum.photos/200/300",
          title: "旅游",
        },
        {
          imgUrl: "https://picsum.photos/200/300",
          title: "美女",
        },
      ],
    };
  },
  methods: {
    onClick(item) {
      // 点击事件处理函数
    },
  },
};
</script>