UniApp 基础教程：第一篇

介绍

UniApp 是一个使用 Vue.js 开发跨平台应用的框架。它允许开发者编写一套代码，同时部署到多个平台，包括 iOS、Android、H5、小程序等。

---

开始之前

确保已经安装了 Node.js 和 npm。

---

安装

1. 全局安装 vue-cli

   npm install -g @vue/cli

2. 创建 UniApp 项目

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

---

项目结构

创建项目后，你会看到以下文件结构：

my-project
├── public
├── src
│   ├── assets
│   ├── components
│   └── pages
├── manifest.json
├── pages.json
├── main.js
└── package.json

---

HelloWorld 示例

打开 src/pages/index.vue 文件，你会看到一个 HelloWorld 的示例。

<template>
  <view>
    <text>Hello World</text>
  </view>
</template>

---

运行项目

在项目目录下运行：

npm run dev:%PLATFORM%

%PLATFORM% 是目标平台，比如 mp-weixin 代表微信小程序。

---

重要的 API

Page

页面的生命周期和一些特有的方法。

• onLoad：页面加载
• onShow：页面显示

App

全局应用相关。

• onLaunch：应用启动

---

总结

这只是一个 UniApp 的简单入门教程。更多的功能和 API 可以在 官方文档 中找到。

---

下一篇我们将探讨 UniApp 中的组件、模板和样式。敬请期待！