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 中的组件、模板和样式。敬请期待!

相关推荐
无尽夏_1 小时前
HTML5(前端基础)
前端·html·html5
Jagger_1 小时前
敏捷开发流程-精简版
前端·后端
FIN66682 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing2 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1272 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿2 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66682 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy2 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴2 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc2 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构