UniApp实战开发指南：构建跨平台应用的终极选择【UniApp实战】

UniApp是一个强大的开发框架，可让开发者使用Vue.js构建跨平台应用。本文将介绍UniApp的核心概念和技术深度，并通过一个实例演示如何使用UniApp开发一个简单的待办事项应用。

1. 介绍UniApp

UniApp实战开发指南：构建跨平台应用的终极选择【UniApp实战】
UniApp是DCloud推出的一款基于Vue.js的跨平台开发框架。它允许开发者使用一套代码构建同时运行在多个平台上的应用，包括iOS、Android、Web等。UniApp具有以下优势：

跨平台支持：使用UniApp，你只需编写一次代码，即可在多个平台上运行，大大提高开发效率。
高性能：UniApp通过将Vue代码转换为原生渲染代码，实现了接近原生应用的性能表现。
丰富的插件生态系统：UniApp拥有丰富的插件生态系统，可以轻松集成第三方插件和原生功能。
开发门槛低：如果你已经熟悉Vue.js，那么学习和使用UniApp将非常容易。

2. UniApp核心概念

在开始实战开发之前，我们需要了解一些UniApp的核心概念。

2.1 页面和组件

在UniApp中，一个页面对应着应用中的一个屏幕，而一个组件是页面中的可复用元素。页面和组件都由Vue组件构成，可以使用Vue的语法进行开发。

2.2 跨平台API

UniApp提供了一系列的跨平台API，开发者可以使用这些API来访问设备功能，如获取地理位置、调用相机等。UniApp的跨平台API能够在不同的平台上以相似的方式运行。

2.3 条件编译

UniApp支持条件编译，开发者可以根据目标平台编写特定的代码块。这对于处理特定平台的差异非常有用，比如调用不同的API或适配不同的界面。

3. 实战演示：待办事项应用

现在让我们通过一个实例来演示如何使用UniApp开发一个简单的待办事项应用。在这个应用中，用户可以添加、完成和删除任务。

3.1 创建项目

首先，我们需要安装UniApp的开发工具。你可以在DCloud的官方网站上找到详细的安装指南。安装完成后，我们可以使用命令行工具创建一个UniApp项目：

vue create -p dcloudio/uni-preset-vue my-todo-app

这将创建一个名为my-todo-app的UniApp项目。

3.2 编写页面

在UniApp中，我们可以使用.vue文件编写页面。在项目的pages目录下创建一个todo文件夹，并在其中创建一个index.vue文件。

<template>
  <view>
    <text>Todo List</text>
    <input v-model="task" type="text" placeholder="Enter a new task" />
    <button @click="addTask">Add</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <text>{{ task }}</text>
        <button @click="completeTask(index)">Complete</button>
        <button @click="deleteTask(index)">Delete</button>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      task: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.task) {
        this.tasks.push(this.task);
        this.task = '';
      }
    },
    completeTask(index) {
      this.tasks.splice(index, 1);
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

在这个页面中，我们使用了Vue的模板语法来渲染任务列表。data属性中定义了task和tasks，分别表示输入框中的任务和任务列表。methods中定义了添加任务、完成任务和删除任务的逻辑。

3.3 注册页面

要在应用中使用页面，我们需要在pages.json文件中注册页面。在项目根目录下的pages.json文件中添加以下内容：

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

3.4 运行应用

现在，我们可以使用以下命令来运行应用：

npm run dev:mp-weixin

这将在微信小程序模拟器中启动应用。你也可以使用其他命令来运行不同平台的应用。

4. 数据持久化

在前面的实例中，我们的任务数据仅存在于页面的内存中。但在实际应用中，我们希望任务数据能够持久化，以便用户在重新打开应用时能够看到之前保存的任务。UniApp提供了本地存储的能力，我们可以使用uni.setStorageSync和uni.getStorageSync方法来实现数据的持久化。

修改index.vue文件，将数据存储到本地并在页面初始化时从本地读取数据：

<script>
export default {
  data() {
    return {
      task: '',
      tasks: []
    };
  },
  created() {
    // 从本地存储中读取任务数据
    const tasks = uni.getStorageSync('tasks');
    if (tasks) {
      this.tasks = JSON.parse(tasks);
    }
  },
  methods: {
    addTask() {
      if (this.task) {
        this.tasks.push(this.task);
        this.task = '';
        // 将任务数据存储到本地
        uni.setStorageSync('tasks', JSON.stringify(this.tasks));
      }
    },
    completeTask(index) {
      this.tasks.splice(index, 1);
      // 更新本地存储的任务数据
      uni.setStorageSync('tasks', JSON.stringify(this.tasks));
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
      // 更新本地存储的任务数据
      uni.setStorageSync('tasks', JSON.stringify(this.tasks));
    }
  }
};
</script>

现在，任务数据将在用户添加、完成或删除任务时自动保存到本地存储，并在应用重新打开时从本地读取。

5. 调用原生功能

UniApp提供了一套跨平台的API，但有时我们可能需要调用特定平台的原生功能。UniApp通过uni.xxx的方式提供了原生功能的访问接口。下面以调用相机功能为例，演示如何在UniApp中调用原生功能。

首先，我们需要在manifest.json文件中声明使用相机的权限：

{
  "mp-weixin": {
    "permission": {
      "scope.camera": {
        "desc": "用于拍摄照片"
      }
    }
  }
}

接下来，在index.vue文件中添加一个按钮，点击该按钮时调用相机功能：

<template>
  <view>
    <!-- ... -->
    <button @click="takePhoto">Take Photo</button>
  </view>
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    takePhoto() {
      uni.authorize({
        scope: 'scope.camera',
        success: () => {
          uni.chooseImage({
            count: 1,
            success: res => {
              const tempFilePaths = res.tempFilePaths;
              // 处理照片逻辑
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: '请授权使用相机',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

在takePhoto方法中，我们首先调用uni.authorize方法请求相机权限。如果用户授权成功，则调用uni.chooseImage方法选择图片。你可以根据需要处理选择照片后的逻辑。

通过上述方式，我们可以在UniApp中调用特定平台的原生功能，以提供更好的用户体验和功能支持。

6. 结论

UniApp是一个功能强大的跨平台开发框架，可以帮助开发者快速构建跨平台应用。本文介绍了UniApp的核心概念，并通过一个实例演示了如何使用UniApp开发一个简单的待办事项应用。希望本文能够帮助你入门UniApp开发，并在实践中获得更多经验和技巧。

在实际开发中，你可以进一步探索UniApp的特性和插件生态系统，以构建更加复杂和丰富的应用。祝你在UniApp开发的旅程中取得成功！

原文链接：https://juejin.cn/post/7242290406637125690 作者：黎燃