uni-app基础知识

一.什么是uni-app

UniApp是一种基于Vue.js框架的跨平台开发框架，它可以帮助开发者使用一套代码同时构建iOS、Android、Web等多个平台的应用程序。UniApp具有以下特点：

1. 跨平台开发：

UniApp是一个基于Vue.js的跨平台开发框架，可以同时开发iOS、Android、H5等多个平台的应用。通过一套代码，可以在不同平台上实现一致的用户体验，大大提高了开发效率。

2. 开发成本低：

使用UniApp可以节省开发成本，因为只需要编写一次代码即可在多个平台上运行。这样可以减少开发人员的工作量和学习成本。

3. 生态丰富：

UniApp拥有庞大的开发者社区和丰富的插件生态系统，可以方便地集成各种功能和第三方服务，如地图、支付、分享等，满足不同应用的需求。

4. 性能优化：

UniApp采用了基于原生渲染的方式，可以获得接近原生应用的性能表现。同时，UniApp还提供了一些性能优化的工具和技巧，帮助开发者提升应用的性能和用户体验。

5. 更新迭代快：

UniApp由DCloud团队维护和更新，团队积极响应开发者的需求和反馈，并持续推出新的版本和功能。这意味着开发者可以及时获得最新的技术支持和功能更新。

二.uni-app的环境搭建

1.安装 Node.js：

首先确保你的计算机上已经安装了 Node.js，可以到 Node.js 官网下载安装包并按照提示进行安装。

2.安装 HBuilderX：

HBuilderX 是一个集成开发环境（IDE），用于开发 UniApp 应用。你可以到官网下载对应平台的安装包，并按照提示进行安装。

3.创建 UniApp 项目：

打开 HBuilderX，选择菜单栏中的“文件” -> “新建” -> “项目”，在弹出的对话框中选择“UniApp”作为项目类型，然后点击“下一步”，填写项目名称和路径，再点击“完成”按钮即可创建一个新的 UniApp 项目。

4.选择模板：

创建项目时，可以选择空白模板或者基础模板作为项目的初始模板，选择适合你需求的模板后点击“完成”。

5.开发与调试：

项目创建完成后，你就可以在 HBuilderX 中开始开发你的 UniApp 应用了。在 HBuilderX 中，你可以通过模拟器或者连接真机来进行应用的调试和预览。

6.构建与发布：

完成应用的开发后，你可以在 HBuilderX 中进行应用的构建和发布。选择菜单栏中的“运行” -> “发行” -> “发行到特定平台”来进行应用的构建和发布操作。

注意：

• 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
• 微信开发者工具在设置中安全设置，服务端口开启

三.uni-app介绍项目目录以及文件作用

1. /common：存放公共资源文件，例如样式文件、JavaScript 文件等。

2. /components：存放 Vue 组件，可被多个页面共享使用。

3. /pages：存放页面文件，每个页面对应一个文件夹，文件夹内包含页面的 Vue 组件、样式和其他资源。

4. /static：存放静态资源文件，例如图片、字体等，这些文件不会被编译处理。

5. /unpackage：存放编译后生成的各平台的项目文件，例如 H5、iOS、Android 等。

6. /manifest.json：UniApp 项目的配置文件，包含应用的基本信息，如名称、图标、启动页等。

7. /pages.json：页面配置文件，定义了页面路径、导航栏样式、底部选项卡等信息。

8. /App.vue：应用的根 Vue 组件，定义了应用的整体结构和样式。

9. /main.js：应用的入口文件，用于初始化应用实例和配置全局属性。

10. /manifest.json：应用的配置文件，用于定义应用的名称、图标等信息。

11. /service：存放服务相关的文件，例如网络请求、数据处理等。

12. /store：存放 Vuex 状态管理相关的文件。

以上是一个典型的 UniApp 项目目录结构及各文件的作用介绍。在实际开发中，你可能会根据项目需求进行适当的调整和扩展。

四.组建的基本使用

1.Vue组件语法：

UniApp 组件基本上就是 Vue 组件，因此你可以使用 Vue 的组件语法，包括 data、methods、computed、watch 等。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, UniApp!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    }
  }
};
</script>

2.生命周期钩子函数:

UniApp 支持 Vue 的生命周期钩子函数，你可以在这些钩子函数中执行各种操作，如初始化数据、加载数据等。例如：

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    // 在组件创建时加载数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 加载数据的逻辑
      // 例如从 API 获取数据
    }
  }
};
</script>

3.条件渲染和循环渲染:

使用 v-if 和 v-for 指令来进行条件渲染和循环渲染。例如：

<template>
  <div>
    <div v-if="isLoggedIn">Welcome, {{ username }}</div>
    <ul v-for="item in items" :key="item.id">
      <li>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true,
      username: 'User',
      items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
    };
  }
};
</script>

4.组件通信:

UniApp 中可以使用 props 和事件来进行父子组件之间的通信，也可以使用 EventBus 或 Vuex 来进行跨组件通信。

这些是 UniApp 组件的基本使用方法，你可以根据自己的需求和项目特点进一步深入学习和应用。