初识uni-app
初识uni-app：跨平台开发的神器
本文将为大家介绍uni-app，一款强大的跨平台App开发框架。我们将探讨其特点、优势以及如何快速上手开发一个简单的uni-app应用。
1. 什么是uni-app
uni-app是由DCloud公司研发的一款基于Vue.js的开源跨平台应用开发框架。使用uni-app，开发者只需编写一次代码，就可以同时构建出iOS、Android、H5、小程序（微信/支付宝/百度/字节跳动/快手）等多个平台的应用。
2. uni-app的特点
2.1 跨平台能力
uni-app具备出色的跨平台能力，支持一套代码编译到多个平台。这大大提高了开发效率，降低了维护成本。
2.2 基于Vue.js
uni-app基于Vue.js进行开发，使用了Vue.js的语法和生命周期，因此对于熟悉Vue.js的开发者来说，学习成本较低。
2.3 强大的组件库
uni-app内置了丰富的组件库，开发者可以直接使用这些组件，无需重新开发。组件库包括基础组件、表单组件、导航组件等。
2.4 插件市场
uni-app拥有一个插件市场，开发者可以在插件市场中找到丰富的插件资源，快速实现所需功能。
3. 如何开始使用uni-app
- 为了开始使用 UniApp，首先需要安装 Node.js 环境。访问 Node.js 官网 下载并安装 LTS 版本。
- 接下来，通过命令行全局安装 @vue/cli 和 @vue/cli-init：
npm install -g @vue/cli @vue/cli-init
3.1 安装HBuilderX
HBuilderX是DCloud官方推荐的uni-app开发工具。下载并安装HBuilderX后，可以方便地创建和管理uni-app项目。
下载地址：HBuilderX官网
3.2 创建uni-app项目
打开HBuilderX，点击菜单【文件】->【新建】->【项目】，选择【uni-app】项目，然后填写项目名称和位置，点击【创建】。
在项目目录下，主要关注以下文件：
- pages.json：配置页面路由、导航条、选项卡等信息。
- manifest.json：配置应用名称、appid、logo、版本等信息。
- manifest.json：配置应用名称、appid、logo、版本等信息。
- App.vue：全局样式及一些全局方法的定义。
- main.js：引入Vue、App组件及挂载页面。
当然也可以使用命令创建项目
使用 vue create 命令创建 UniApp 项目：
vue create -p dcloudio/uni-preset-vue my-uniapp-project
最后，在创建的项目目录中启动项目：
cd my-uniapp-project
npm run dev:%PLATFORM%
其中 %PLATFORM% 是你想要运行的平台，例如：npm run dev:h5。
项目结构预览:
my-uniapp-project
├── public # 静态资源
├── src # 源代码
│ ├── components # 组件
│ ├── pages # 页面
│ ├── static # 静态资源
│ ├── store # Vuex 状态管理
│ ├── App.vue # 应用入口
│ ├── main.js # 主入口js
│ ├── manifest.json # 项目配置文件
│ └── pages.json # 页面路由配置文件
├── .gitignore # Git 忽略配置
├── babel.config.js # Babel 配置
├── package.json # 项目依赖及脚本配置
└── README.md # 项目说明文档
我这里主要是封装了些东西，做了分包所以目录看着比较多，后期我会详细和大家讲的！
3.3 编写代码
- 在src/pages目录下创建页面文件夹，例如：src/pages/index。
- 在新建的页面文件夹中，创建三个文件：index.vue、index.js、index.css。index.vue用于页面结构和逻辑，index.js用于页面导出，index.css用于页面样式。
- 在index.vue文件中编写页面结构和逻辑，例如：
<template>
<view class="container">
<text class="title">Hello, uni-app!text>
view>
template>
<script>
export default {
data() {
return {
title: 'Hello, uni-app!'
}
}
}
script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.title {
font-size: 28px;
font-weight: bold;
}
style>
3.4 预览和编译
- 在HBuilderX中，点击菜单【运行】->【运行到小程序模拟器】，即可在微信开发者工具中预览页面效果。
- 若要编译成其他平台的应用，点击菜单【发行】->【原生App-云打包】或【原生App-本地打包】，按照提示进行操作即可。
注意，编译成iOS和Android平台的应用需要相应的开发者账号和证书。
4. uni-app实践案例
创建一个简单的Todo List应用，用户可以添加、删除和完成待办事项。
- 按照上文描述的方法，创建一个uni-app项目。
- 在src/pages目录下创建一个名为todo的页面文件夹，并创建index.vue，index.js和index.css文件。
- 编写index.vue文件，实现待办事项的添加、删除和完成功能：
<template>
<view class="container">
<view class="input-container">
<input v-model="newTodo" placeholder="请输入待办事项" @confirm="addTodo" />
view>
<view class="todo-list">
<view v-for="(todo, index) in todos" :key="index" class="todo-item">
<text @tap="toggleTodo(index)" :class="{completed: todo.completed}">{{ todo.text }}text>
<text class="delete" @tap="removeTodo(index)">删除text>
view>
view>
view>
template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
}
},
methods: {
addTodo() {
if (!this.newTodo.trim()) return
this.todos.push({ text: this.newTodo, completed: false })
this.newTodo = ''
},
removeTodo(index) {
this.todos.splice(index, 1)
},
toggleTodo(index) {
this.todos[index].completed = !this.todos[index].completed
}
}
}
script>
<style>
.container {
padding: 20px;
}
.input-container {
margin-bottom: 20px;
}
.todo-list {
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.completed {
text-decoration: line-through;
color: #ccc;
}
.delete {
color: #f44336;
}
style>
- 在src/pages.json文件中，配置新建的页面路由：
{
"pages": [
{
"path": "pages/todo/index",
"style": {
"navigationBarTitleText": "Todo List"
}
}
]
}
- 按照上文描述的方法，在微信开发者工具中预览页面效果。如果满意，可以编译成其他平台的应用。
5. 结语
uni-app是一款强大的跨平台开发框架，适用于多种场景。通过本文的介绍，希望您对uni-app有了初步的了解，并能够开始尝试使用uni-app开发您的项目。更多关于uni-app的详细信息，请访问官方文档。希望大家多多交流！共同进步。