概述

在 uni-app 中，支持以下的平台：

#ifdef、#ifndef 条件编译

在实现多平台兼容的时候可以使用 #ifdef 和 #ifndef 来进行条件编译。

#ifdef：如果满足条件，则编译该部分代码。

#ifndef：如果不满足条件，则编译该部分代码。

模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序</view>
    <!-- #endif -->
    <!-- #ifdef APP-ANDROID -->
    <view>APP</view>
    <!-- #endif -->
    <!-- #ifndef APP-IOS -->
    <view>IOS</view>
    <!-- #endif -->
    <!-- #ifndef APP-APP-HARMONY -->
    <view>鸿蒙</view>
    <!-- #endif -->
    <!-- #ifndef WEB -->
    <view>网页</view>
    <!-- #endif -->
</template>

export default {} 里的内容，是页面的主要逻辑代码。包括几部分：

1. data：template 模板中需要使用的数据。
2. 页面生命周期：如页面加载、隐藏、关闭，具体 见下
3. methods 方法，如按钮点击、屏幕滚动
4. computed 计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script>
export default {
    data() {
        return {
            title: "点我", // 定义绑定在页面上的data数据
            // 多个data在这里继续定义。逗号分隔
        }
    },
    onLoad() {
        // 页面启动的生命周期，这里编写页面加载时的逻辑
        this.helloWorld();
    },
    // 多个页面生命周期监听，在这里继续写。逗号分隔
    methods: {
        buttonClick: function () {
            this.title = "被点了"
        },
        helloWorld: function () {
            alert("Hello World");
            this.test();
        },
        test() {
            alert("hello");
        }
        // 多个方法，在这里继续写。逗号分隔
    },
    computed: {
        // 计算属性
    }
};
</script>

生命周期

参考资料

1. 页面 | uni-app 官网

概述

uni-app 支持标准的 CSS 样式属性，本文档整理了常用的 CSS 属性，按功能分类便于查阅。

布局相关属性

Flexbox 布局

定位属性

尺寸属性

概述

在 uni-app 中，容器组件用于布局和组织页面内容。

<view> 组件

如果使用 nvue，则需注意，包裹文字应该使用 <text> 组件。

1
2
3

<view class="container">
    <text>Hello, uni-app!</text>
</view>

属性

<scroll-view> 组件

<template> 部分

<template> 部分是 Vue 组件的模板部分，用于定义组件的结构和布局。它使用类似 HTML 的语法来描述组件的 UI。

<style> 部分

<style> 部分用于定义组件的样式。可以使用普通的 CSS，也可以使用预处理器如 SCSS、LESS 等。通过添加 scoped 属性，可以使样式仅作用于当前组件，避免样式冲突。

<script> 部分

<script> 部分是 Vue 组件的逻辑部分，用于定义组件的行为和数据。它使用 JavaScript 语法来编写组件的逻辑，包括数据定义、方法、生命周期钩子等。

在 Vue 中引入 SCSS，需要安装 sass-embedded，然后在 vue.config.js 中配置 scss。

由于在快速开始这一章里面，我们通过 vue@latest 的项目生成工具生成 Vue 项目的基本架构，并且通过 npm run dev 命令启动项目，可以看到一个 Vue 的页面，尽管如此，这基本架构一键生成的页面文件对初学者来说很不友好，所以我们需要删除一些文件，从而开始学习 Vue。

Vue 的快速开始可以参考 Vue.js 的快速开始

至于为什么我要写 Vue 的教程，这得感谢 Vue.js 的官方教程，给我看到了写 Vue 教程的动力。

引言

东南大学有生存指南，二工大也不能落下。在这里，我会从里到外，从外到里，从里到里，从外到外，从浅到深，从深到浅，从浅到浅，从深到深地写一份。

某学校有 N 个学生，形成 M 个俱乐部。每个俱乐部里的学生有着一定相似的兴趣爱好，形成一个朋友圈。一个学生可以同时属于若干个不同的俱乐部。根据 “我的朋友的朋友也是我的朋友” 这个推论可以得出，如果 A 和 B 是朋友，且 B 和 C 是朋友，则 A 和 C 也是朋友。请编写程序计算最大朋友圈中有多少人。

输入格式

输入的第一行包含两个正整数 N（≤30000）和 M（≤1000），分别代表学校的学生总数和俱乐部的个数。后面的 M 行每行按以下格式给出 1 个俱乐部的信息，其中学生从 1~N 编号：

第 i 个俱乐部的人数 Mi（空格）学生 1（空格）学生 2 … 学生 Mi

输出格式

输出给出一个整数，表示在最大朋友圈中有多少人。

输入样例

1
2
3
4
5

7 4
3 1 2 3
2 1 4
3 5 6 7
1 6

输出样例