uni-app
是一个使用 Vue.js 开发所有前端应用的框架,支持编写一次代码,生成可以在多个平台(如微信小程序、H5、App等)运行的应用。下面是 uni-app
的开发流程,包括从创建项目到部署的各个阶段。
1. 创建项目
通过 HBuilder X 创建项目
- 下载并安装 HBuilder X:访问 HBuilder X 的官网下载并安装:https://www.dcloud.io/hbuilderx.html
- 打开 HBuilder X 并创建新项目 :
- 选择"新建项目"。
- 在"新建项目"窗口中选择"uni-app",然后填写项目的基本信息(如项目名称、保存路径等)。
- 点击"创建",等待项目初始化完成。
通过命令行创建项目
-
安装 Node.js:确保已安装最新版本的 Node.js。
-
安装
@dcloudio/uni-cli
:1npm install -g @dcloudio/uni-cli
-
创建项目:
1uni init my-project
-
进入项目目录:
1cd my-project
-
安装依赖:
1npm install
2. 编写代码
页面结构
uni-app
使用 Vue.js 的单文件组件(SFC)格式,通常每个页面都会包含 .vue
文件。
常用组件和 API
- 组件 :
uni-app
支持 Vue.js 的所有组件,此外还提供了一些特定平台的组件,如uni-tabbar
、uni-section
等。 - API :
uni-app
提供了一系列 API,如uni.request
、uni.showToast
等,用于访问平台特有的功能。
示例代码
<template>
<view class="container">
<view class="header">
<text>{{ message }}</text>
</view>
<view class="content">
<button @click="handleClick">点击我</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, uni-app!'
};
},
methods: {
handleClick() {
uni.showToast({
title: '按钮被点击了',
duration: 2000
});
}
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header {
padding: 20px;
background-color: #f0f0f0;
}
.content {
margin-top: 20px;
}
</style>
3. 预览和调试
在 HBuilder X 中预览
- 选择目标平台:在 HBuilder X 中选择"运行" -> 选择目标平台(如微信小程序、H5、App等)。
- 运行项目:点击工具栏上的"运行"按钮,选择你想要运行的目标平台。
在命令行中预览
-
启动开发服务器:
npm run dev
-
访问本地地址 :在浏览器中访问
http://localhost:8080
查看 H5 版本的效果。
4. 构建和发布
构建为不同平台的应用
-
构建为微信小程序:
npm run build:mp-weixin
-
构建为 H5 应用:
npm run build:h5
-
构建为 App:
npm run build:app-plus
发布应用
- 微信小程序:在微信开发者工具中上传代码,然后在微信公众平台提交审核。
- H5 应用 :将生成的
dist/h5
目录下的文件部署到服务器。 - App:使用 App 加密工具(如快应用加密工具)生成安装包,并提交到应用商店。
5. 使用插件
uni-app
支持使用各种插件来扩展功能。你可以在 uniCloud
平台上查找和安装插件:
npm install @dcloudio/uni-plugin-camera
6. 使用云服务
uniCloud
是 uni-app
的官方云服务平台,可以用于存储数据、托管静态资源、发送短信等。
-
注册
uniCloud
账号:https://uni.apache.org/docs/zh-CN/cloud/get-started.html -
初始化项目:
unictl init
-
部署云函数:
unictl deploy
总结
通过以上步骤,你可以从创建项目开始,一步步完成 uni-app
的开发、预览、构建和发布过程。uni-app
的强大之处在于它可以让你用一套代码同时支持多个平台,极大地提高了开发效率。