初识uni-app：跨平台开发的神器

本文将为大家介绍uni-app，一款强大的跨平台App开发框架。我们将探讨其特点、优势以及如何快速上手开发一个简单的uni-app应用。

1. 什么是uni-app

uni-app是由DCloud公司研发的一款基于Vue.js的开源跨平台应用开发框架。使用uni-app，开发者只需编写一次代码，就可以同时构建出iOS、Android、H5、小程序（微信/支付宝/百度/字节跳动/快手）等多个平台的应用。

2. uni-app的特点

2.1 跨平台能力

uni-app具备出色的跨平台能力，支持一套代码编译到多个平台。这大大提高了开发效率，降低了维护成本。

2.2 基于Vue.js

uni-app基于Vue.js进行开发，使用了Vue.js的语法和生命周期，因此对于熟悉Vue.js的开发者来说，学习成本较低。

2.3 强大的组件库

uni-app内置了丰富的组件库，开发者可以直接使用这些组件，无需重新开发。组件库包括基础组件、表单组件、导航组件等。

2.4 插件市场

uni-app拥有一个插件市场，开发者可以在插件市场中找到丰富的插件资源，快速实现所需功能。

3. 如何开始使用uni-app

1. 为了开始使用 UniApp，首先需要安装 Node.js 环境。访问 Node.js 官网 下载并安装 LTS 版本。
2. 接下来，通过命令行全局安装 @vue/cli 和 @vue/cli-init：

npm install -g @vue/cli @vue/cli-init

3.1 安装HBuilderX

HBuilderX是DCloud官方推荐的uni-app开发工具。下载并安装HBuilderX后，可以方便地创建和管理uni-app项目。

下载地址：HBuilderX官网

3.2 创建uni-app项目

打开HBuilderX，点击菜单【文件】->【新建】->【项目】，选择【uni-app】项目，然后填写项目名称和位置，点击【创建】。

在项目目录下，主要关注以下文件：

1. pages.json：配置页面路由、导航条、选项卡等信息。
2. manifest.json：配置应用名称、appid、logo、版本等信息。
3. manifest.json：配置应用名称、appid、logo、版本等信息。
4. App.vue：全局样式及一些全局方法的定义。
5. main.js：引入Vue、App组件及挂载页面。

当然也可以使用命令创建项目
使用 vue create 命令创建 UniApp 项目：

vue create -p dcloudio/uni-preset-vue my-uniapp-project

最后，在创建的项目目录中启动项目：

cd my-uniapp-project
npm run dev:%PLATFORM%

其中 %PLATFORM% 是你想要运行的平台，例如：npm run dev:h5。

项目结构预览:

my-uniapp-project
├── public                       # 静态资源
├── src                          # 源代码
│   ├── components               # 组件
│   ├── pages                    # 页面
│   ├── static                   # 静态资源
│   ├── store                    # Vuex 状态管理
│   ├── App.vue                  # 应用入口
│   ├── main.js                  # 主入口js
│   ├── manifest.json            # 项目配置文件
│   └── pages.json               # 页面路由配置文件
├── .gitignore                   # Git 忽略配置
├── babel.config.js              # Babel 配置
├── package.json                 # 项目依赖及脚本配置
└── README.md                    # 项目说明文档

我这里主要是封装了些东西，做了分包所以目录看着比较多，后期我会详细和大家讲的！

3.3 编写代码

1. 在src/pages目录下创建页面文件夹，例如：src/pages/index。
2. 在新建的页面文件夹中，创建三个文件：index.vue、index.js、index.css。index.vue用于页面结构和逻辑，index.js用于页面导出，index.css用于页面样式。
3. 在index.vue文件中编写页面结构和逻辑，例如：

<template>
  <view class="container">
    <text class="title">Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, uni-app!'
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.title {
  font-size: 28px;
  font-weight: bold;
}
</style>

3.4 预览和编译

1. 在HBuilderX中，点击菜单【运行】->【运行到小程序模拟器】，即可在微信开发者工具中预览页面效果。
2. 若要编译成其他平台的应用，点击菜单【发行】->【原生App-云打包】或【原生App-本地打包】，按照提示进行操作即可。
   注意，编译成iOS和Android平台的应用需要相应的开发者账号和证书。

4. uni-app实践案例

创建一个简单的Todo List应用，用户可以添加、删除和完成待办事项。

1. 按照上文描述的方法，创建一个uni-app项目。
2. 在src/pages目录下创建一个名为todo的页面文件夹，并创建index.vue，index.js和index.css文件。
3. 编写index.vue文件，实现待办事项的添加、删除和完成功能：

<template>
  <view class="container">
    <view class="input-container">
      <input v-model="newTodo" placeholder="请输入待办事项" @confirm="addTodo" />
    </view>
    <view class="todo-list">
      <view v-for="(todo, index) in todos" :key="index" class="todo-item">
        <text @tap="toggleTodo(index)" :class="{completed: todo.completed}">{{ todo.text }}</text>
        <text class="delete" @tap="removeTodo(index)">删除</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (!this.newTodo.trim()) return
      this.todos.push({ text: this.newTodo, completed: false })
      this.newTodo = ''
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.input-container {
  margin-bottom: 20px;
}
.todo-list {
  margin-top: 20px;
}
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.completed {
  text-decoration: line-through;
  color: #ccc;
}
.delete {
  color: #f44336;
}
</style>

4. 在src/pages.json文件中，配置新建的页面路由：

 {
  "pages": [
    {
      "path": "pages/todo/index",
      "style": {
        "navigationBarTitleText": "Todo List"
      }
    }
  ]
}

5. 按照上文描述的方法，在微信开发者工具中预览页面效果。如果满意，可以编译成其他平台的应用。

5. 结语

uni-app是一款强大的跨平台开发框架，适用于多种场景。通过本文的介绍，希望您对uni-app有了初步的了解，并能够开始尝试使用uni-app开发您的项目。更多关于uni-app的详细信息，请访问官方文档。希望大家多多交流！共同进步。