Uniapp 新手详细入门教程

一、Uniapp 简介

Uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信 / 支付宝 / 百度 / 字节跳动 / QQ 小程序等）、快应用等多个平台。这大大降低了开发成本，提高了开发效率，特别适合想要快速进行多端开发的团队和个人开发者。

二、开发环境准备

2.1 安装 Node.js

Uniapp 基于 Node.js 运行，因此首先需要安装 Node.js。

1. 访问 Node.js 官方网站（Node.js — Run JavaScript Everywhere），下载适合你操作系统的安装包。

1. 运行安装包，按照安装向导完成安装。

1. 安装完成后，打开命令行工具（Windows 系统为命令提示符或 PowerShell，Mac 和 Linux 系统为终端），输入 node -v 和 npm -v ，若分别显示 Node.js 和 npm 的版本号，则表示安装成功。

2.2 安装 HBuilderX

HBuilderX 是 DCloud 推出的一款专为 Uniapp 开发设计的编辑器，功能强大且对 Uniapp 有良好的支持。

1. 访问 HBuilderX 官方网站（https://www.dcloud.io/hbuilderx.html），下载对应操作系统的安装包。

1. 解压安装包并运行 HBuilderX 应用程序，即可完成安装。

2.3 安装微信开发者工具（可选，若需开发微信小程序）

1. 访问微信公众平台（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），下载微信开发者工具安装包。

1. 安装并登录微信开发者工具，确保能够正常使用。

三、创建 Uniapp 项目

3.1 打开 HBuilderX

双击 HBuilderX 图标，启动编辑器。

3.2 创建新项目

1. 在 HBuilderX 主界面，点击 “文件” -> “新建” -> “项目”。

1. 在弹出的 “新建项目” 对话框中，选择 “uni-app” 模板。

1. 输入项目名称、选择项目存放路径，并根据需求选择是否使用 TypeScript、是否使用 scss 等预处理器。这里我们以普通 JavaScript 项目，不使用预处理器为例。

1. 点击 “创建” 按钮，HBuilderX 会自动生成一个基础的 Uniapp 项目结构。

3.3 项目结构解析

创建好的 Uniapp 项目包含以下主要目录和文件：

• components：用于存放自定义组件，方便在多个页面中复用。

• pages：存放应用的所有页面，每个页面是一个独立的文件夹，包含页面的.vue文件、.json配置文件、.scss样式文件（如果使用了 scss 预处理器）和.js逻辑文件。

• static：用于存放静态资源，如图片、字体文件等。

• main.js：项目的入口文件，主要进行全局的 Vue 实例配置和一些全局插件的引入。

• App.vue：应用的根组件，可在其中定义全局样式、生命周期钩子函数等。

• manifest.json：项目的配置文件，用于配置应用的名称、图标、权限、小程序相关配置等信息。

• pages.json：页面路由配置文件，用于配置页面的路径、导航栏样式等。

四、基础语法与开发

4.1 Vue.js 基础回顾

Uniapp 基于 Vue.js 开发，所以需要掌握一些基础的 Vue.js 语法，例如：

• 数据绑定：通过 {{}} 进行文本插值，将 Vue 实例中的数据显示在模板中。

<template>

<view>

<text>{{ message }}</text>

</view>

</template>

<script>

export default {

data() {

return {

message: 'Hello, Uniapp!'

};

}

};

</script>

• 事件绑定：使用 @ 或 v-on 指令绑定事件，如点击事件 @click。

<template>

<view>

<button @click="changeMessage">点击改变文本</button>

<text>{{ message }}</text>

</view>

</template>

<script>

export default {

data() {

return {

message: '初始文本'

};

},

methods: {

changeMessage() {

this.message = '文本已改变';

}

}

};

</script>

• 指令：常用的指令有 v-bind 用于绑定属性，v-if 用于条件渲染，v-for 用于列表渲染等。

4.2 Uniapp 特有的组件和 API

Uniapp 提供了一系列自己的组件和 API，用于实现不同平台的功能：

• 视图容器组件：如 <view> 类似于 HTML 中的 <div>，是最常用的容器组件；<scroll-view> 可实现滚动视图。

<template>

<view>

<scroll-view scroll-y="true" style="height: 200px;">

<view v-for="(item, index) in list" :key="index">{{ item }}</view>

</scroll-view>

</view>

</template>

<script>

export default {

data() {

return {

list: ['数据1', '数据2', '数据3', '数据4', '数据5']

};

}

};

</script>

• 表单组件：<input> 用于输入文本，<switch> 用于开关选择，<checkbox> 和 <radio> 用于多选和单选等。

• API：例如 uni.showToast 用于显示提示信息，uni.request 用于发起网络请求。

<template>

<view>

<button @click="showToast">显示提示</button>

<button @click="sendRequest">发起网络请求</button>

</view>

</template>

<script>

export default {

methods: {

showToast() {

uni.showToast({

title: '这是一个提示',

icon: 'none'

});

},

sendRequest() {

uni.request({

url: 'https://example.com/api', // 替换为实际的接口地址

success: (res) => {

console.log(res.data);

},

fail: (err) => {

console.error(err);

}

});

}

}

};

</script>

五、运行与发布项目

5.1 运行项目

1. 在 HBuilderX 的 “运行” 菜单中，选择你想要运行的平台。例如，若要在浏览器中运行，选择 “运行到浏览器” -> 选择具体的浏览器；若要在微信小程序模拟器中运行，需先确保微信开发者工具已安装并打开，然后选择 “运行到小程序模拟器” -> “微信开发者工具”。

1. HBuilderX 会自动编译项目，并在相应的平台中打开应用，你可以在该平台中查看和调试应用的效果。

5.2 发布项目

1. 对于小程序平台，在 HBuilderX 中点击 “发行” -> “发行到小程序 - 微信”，按照提示填写小程序的相关信息（如 AppID 等），然后点击 “打包”，生成小程序代码包。将生成的代码包导入到微信开发者工具中，进行审核和发布。

1. 对于 App 平台，在 HBuilderX 中点击 “发行” -> “原生 App - 云打包”，按照提示配置应用的相关信息（如应用名称、图标、权限等），然后选择打包方式（免费证书或自有证书），点击 “打包”，等待打包完成后下载安装包，即可发布到应用商店或进行测试安装。

1. 对于 Web 平台，点击 “发行” -> “网站 - PC Web 或手机 H5”，配置相关参数后点击 “打包”，将生成的静态文件部署到 Web 服务器上，即可通过网址访问应用。

通过以上步骤，你已经完成了 Uniapp 从环境搭建到项目开发、运行和发布的整个流程。后续你可以深入学习更多的 Uniapp 知识，如组件化开发、状态管理、性能优化等，不断提升自己的 Uniapp 开发能力。

以上教程涵盖了 Uniapp 入门核心内容。若你在学习中遇到问题，或想了解某个部分的拓展知识，欢迎随时和我说。