uni-app教程从入门到精通完整指南

在当今多端应用盛行的时代，开发者面临着一个核心挑战：如何高效地将应用同时发布到iOS、Android、Web以及各种小程序平台。重复开发不仅成本高昂，而且难以维护。DCloud公司推出的uni-app框架，正是为解决这一痛点而生。它基于流行的Vue.js语法，允许开发者使用一套代码，编译发布到十多个平台，极大地提升了开发效率。本指南将带你从零开始，系统性地掌握uni-app，并探讨如何结合Azure云服务和Flask后端框架，构建一个完整、可扩展的跨端应用。

第一部分：uni-app入门与核心概念

要开始uni-app之旅，首先需要理解其核心架构和开发环境搭建。

1.1 环境搭建与项目创建

uni-app的开发主要依赖于HBuilderX IDE，它提供了强大的代码提示、真机运行和云打包功能。当然，你也可以使用VSCode配合官方插件。

步骤一：安装HBuilderX

从DCloud官网下载并安装HBuilderX。建议选择“App开发版”，它包含了所有必要的插件和模拟器。

步骤二：创建第一个项目

打开HBuilderX，点击“文件”->“新建”->“项目”。选择“uni-app”模板，输入项目名称，并选择默认模板。这个模板包含了基本的目录结构和示例代码。

项目目录结构解析：

pages：存放所有页面（.vue文件），每个页面由Vue组件构成。
static：存放静态资源，如图片、字体。
App.vue：应用根组件，用于设置全局样式和生命周期。
main.js：应用入口文件，用于初始化Vue实例。
manifest.json：应用配置文件，用于设置应用名称、图标、启动图、各平台特有配置等。
pages.json：页面路由和导航栏配置，类似于小程序中的app.json。

1.2 理解页面与组件

uni-app的页面本质上是Vue单文件组件（.vue）。它扩展了Vue的模板语法，提供了一套与小程序标签相似的、跨端的组件库。

关键点：

使用<view>、<text>等原生组件代替<div>、<span>，以实现更好的跨端兼容性。
事件绑定使用@click（Vue语法）。
样式使用rpx（responsive pixel）单位，可根据屏幕宽度自适应。
生命周期除了Vue的created、mounted，还有小程序特有的onLoad、onShow等。

第二部分：进阶开发与状态管理

当应用变得复杂时，我们需要管理全局状态、处理路由和调用设备能力。

2.1 路由与页面传参

uni-app的路由系统基于页面栈管理，使用uni.navigateTo、uni.redirectTo等方法进行跳转。

// 跳转到新页面并传递参数
uni.navigateTo({
    url: '/pages/detail/detail?id=1&name=uni-app'
});

// 在 detail.vue 页面中接收参数
export default {
    onLoad(options) {
        console.log(options.id); // 输出 1
        console.log(options.name); // 输出 'uni-app'
    }
}

2.2 状态管理：使用 Vuex

对于跨多个页面的共享状态（如用户登录信息、购物车数据），推荐使用Vuex。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userToken: null,
        cartList: []
    },
    mutations: {
        SET_TOKEN(state, token) {
            state.userToken = token;
            // 可同步存储到本地
            uni.setStorageSync('token', token);
        },
        ADD_TO_CART(state, goods) {
            state.cartList.push(goods);
        }
    },
    actions: {
        login({ commit }, credentials) {
            // 模拟异步请求
            return new Promise((resolve) => {
                setTimeout(() => {
                    const token = 'mock_jwt_token';
                    commit('SET_TOKEN', token);
                    resolve(token);
                }, 1000);
            });
        }
    }
})

export default store

在main.js中挂载store，即可在任意组件中使用this.$store访问状态或派发动作。

2.3 调用设备API与条件编译

uni-app提供了丰富的uni. API，用于调用相机、地理位置、网络请求等设备能力。

// 发起网络请求
uni.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: (res) => {
        console.log('请求成功:', res.data);
    },
    fail: (err) => {
        console.log('请求失败:', err);
    }
});

// 条件编译：针对不同平台编写不同代码
// #ifdef H5
console.log('这段代码只会在H5平台编译');
// #endif
// #ifdef APP-PLUS
console.log('这段代码只会在App平台编译');
uni.scanCode({
    success: (res) => {
        console.log('扫码结果:', res.result);
    }
});
// #endif

条件编译是uni-app实现“一套代码，多端发布”的核心技术之一，它允许在编译阶段根据目标平台选择性地包含代码。

第三部分：后端集成与云部署

一个完整的应用离不开后端服务。这里我们将介绍如何使用Flask构建一个简单的API，并将其部署到Azure云平台。

3.1 构建Flask RESTful API

Flask是一个轻量级的Python Web框架，非常适合快速构建API。

# app.py
from flask import Flask, request, jsonify
from flask_cors import CORS  # 处理跨域请求

app = Flask(__name__)
CORS(app)  # 允许所有域访问，生产环境应配置具体域名

# 模拟数据
tasks = [{"id": 1, "title": "学习uni-app", "done": False}]

@app.route('/api/tasks', methods=['GET'])
def get_tasks():
    return jsonify(tasks)

@app.route('/api/task', methods=['POST'])
def add_task():
    data = request.get_json()
    new_id = max([t['id'] for t in tasks], default=0) + 1
    new_task = {
        "id": new_id,
        "title": data.get('title'),
        "done": False
    }
    tasks.append(new_task)
    return jsonify(new_task), 201

if __name__ == '__main__':
    app.run(debug=True)

运行python app.py后，你的本地Flask API将在http://127.0.0.1:5000上运行。

3.2 在uni-app中调用API

修改uni-app中的请求地址，指向你的Flask后端。建议将API基地址配置在全局变量或环境变量中。

// 在 uni-app 中，可以创建一个 api.js 模块统一管理请求
import { baseURL } from '@/config.js'; // 配置文件，根据环境切换地址

export function fetchTasks() {
    return new Promise((resolve, reject) => {
        uni.request({
            url: `${baseURL}/api/tasks`,
            method: 'GET',
            success: (res) => resolve(res.data),
            fail: (err) => reject(err)
        });
    });
}

// 在页面中使用
export default {
    data() { return { taskList: [] }; },
    async onLoad() {
        try {
            const res = await fetchTasks();
            this.taskList = res;
        } catch (error) {
            uni.showModal({ title: '错误', content: '获取数据失败' });
        }
    }
}

3.3 部署到Microsoft Azure

Azure提供了多种服务来托管Flask应用，最简单的方式是使用Azure App Service。

部署步骤：

步骤一：准备部署文件。在Flask项目根目录创建requirements.txt（列出依赖，如flask, flask-cors）和startup.txt（Azure启动命令，内容为gunicorn --bind=0.0.0.0 --timeout 600 app:app）。
步骤二：通过Azure Portal部署。登录Azure门户，创建“Web应用”，选择运行时栈为“Python”。创建完成后，进入部署中心，可以选择本地Git、GitHub Actions或Azure DevOps进行自动化部署。
步骤三：配置生产环境。在Azure门户的应用设置中，可以配置环境变量（如数据库连接字符串），并关闭调试模式。

部署成功后，你将获得一个类似https://your-app-name.azurewebsites.net的URL。将uni-app中的baseURL更新为此地址，你的跨端应用就拥有了一个运行在云端的高可用后端。

总结

通过本指南，我们系统地探索了uni-app从入门到进阶的全过程。我们从环境搭建和核心概念入手，学习了如何构建页面、管理状态、调用设备API。更进一步，我们结合Flask教程构建了一个轻量级但功能完整的RESTful API后端，并遵循Azure教程的指引，将其部署到云端，实现了应用的全栈化。

uni-app的强大之处在于其“一次开发，多端发布”的理念，极大地降低了多平台应用的开发门槛。而将其与像Flask这样的灵活后端以及像Azure这样的强大云平台结合，则能构建出性能卓越、可扩展性强的现代应用程序。记住，精通之路在于实践。建议你从一个小项目开始，逐步尝试本指南中提到的各项技术，最终你将能够自信地驾驭跨端全栈开发。