UniApp 基础教程:第一篇

介绍

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


开始之前

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


安装

  1. 全局安装 vue-cli

    bash 复制代码
    npm install -g @vue/cli
  2. 创建 UniApp 项目

    bash 复制代码
    vue create -p dcloudio/uni-preset-vue my-project

项目结构

创建项目后,你会看到以下文件结构:

css 复制代码
my-project
├── public
├── src
│   ├── assets
│   ├── components
│   └── pages
├── manifest.json
├── pages.json
├── main.js
└── package.json

HelloWorld 示例

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

vue 复制代码
<template>
  <view>
    <text>Hello World</text>
  </view>
</template>

运行项目

在项目目录下运行:

bash 复制代码
npm run dev:%PLATFORM%

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


重要的 API

Page

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

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

App

全局应用相关。

  • onLaunch:应用启动

总结

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


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

相关推荐
丘耳几秒前
@tiptap/vue-2 知识点笔记-01
前端·javascript·vue.js
写不来代码的草莓熊4 分钟前
vue前端面试题——记录一次面试当中遇到的题(8)
前端
仰望.4 分钟前
vue 下拉框 vxe-select 实现人员选择下拉列表
前端·javascript·vue.js·vxe-ui
丘耳6 分钟前
@tiptap/vue-2 知识点笔记-03
前端·javascript·vue.js
丘耳7 分钟前
@tiptap/vue-2 知识点笔记-05
前端·javascript·vue.js
m0_616188498 分钟前
使用el-table实现行内编辑功能
前端·javascript·vue.js
Mintopia10 分钟前
🧬 AIGC 内容溯源技术:Web 平台如何识别 AI 生成内容?
前端·javascript·aigc
.NET修仙日记10 分钟前
jQuery面试题精选:从基础到高级
前端·javascript·jquery
Mintopia11 分钟前
⚙️ Next.js 缓存 + 分页优化:让你的页面速度快得像量子比特 🧠✨
前端·全栈·next.js
玲小珑12 分钟前
LangChain.js 完全开发手册(十五)实战综合项目一:智能文档处理系统
前端·langchain·ai编程