├─pages             业务页面文件存放的目录
│  └─index
│     └─index.uvue  index页面
├─static            存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)
├─unpackage         非工程代码，一般存放运行或发行的编译结果
├─index.html        H5端页面
├─main.uts          Vue初始化入口文件
├─App.uvue          应用配置，用来配置App全局样式以及监听
├─pages.json        配置页面路由、导航条、选项卡等页面类信息
├─manifest.json     配置应用名称、appid、logo、版本等打包信息
└─uni.scss          uni-app内置的常用样式变量
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<template>
  <view class="container">
    <!-- 卡片容器 -->
    <view class="card">
      <!-- 头部标题 -->
      <view class="header">
        <text class="header-text">随机笑话</text>
      </view>
      <!-- 滚动内容区 -->
      <scroll-view class="scroll-content">
        <text class="scroll-content-text">笑话加载中...</text>
      </scroll-view>
      <!-- 底部按钮 -->
      <view class="footer">
        <button class="footer-button">换一个</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .container {
    /* 注意点1: view 默认是 flex，方向是 column */
    /* display: flex; */
    /* flex-direction: column;  */
    /* 注意点2：uni-app x 样式不会继承，文字需要用 text 包裹并单独设置字体样式 */
    /* font-size: 100rpx; */
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #f6f6f6;
  }

  .card {
    width: 90%;
    border-radius: 20rpx;
    /* 1. 盒子阴影  X 轴偏移量、Y 轴偏移量、模糊半径 和 颜色 */
    box-shadow: 0 10rpx 30rpx #a7b3f9;
    /* iOS 端存在兼容问题，需要主动设置为白色 */
    background-color: #fff;
  }

  .header {
    background-color: #1534f5;
    height: 110rpx;
    padding: 0 30rpx;
    /* iOS 端圆角不受父级约束，需要主动设置圆角 */
    border-radius: 20rpx 20rpx 0 0;

    /* 2. 主轴垂直方向居中 */
    justify-content: center;

    /* 3. style 添加 lang="scss" 后，支持类名嵌套 */
    /* 4. 文字不能继承，需要给 text 定义类名修改 */
    .header-text {
      font-size: 28rpx;
      font-weight: 700;
      color: #fff;
    }
  }

  .scroll-content {
    padding: 40rpx 30rpx;
    /* 5. 最小高度 */
    min-height: 300rpx;

    .scroll-content-text {
      font-size: 30rpx;
      color: #3204ac;
      line-height: 45rpx;
    }
  }

  .footer {
    /* 6. 水平靠右对齐 */
    align-items: flex-end;
    padding-bottom: 20rpx;
    padding-right: 20rpx;

    .footer-button {
      background-color: #1534f5;
      color: #fff;
      font-size: 26rpx;
      border-radius: 50rpx;
      padding: 6rpx 30rpx;
    }
  }
</style>
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.

<script setup lang="uts">
  import { ref } from 'vue'

  const jokeText = ref('笑话加载中...')

  // 注意：uni-app x 需要用 type 定义对象类型，用 interface 存在兼容问题
  type ServiceData = {
    message : string
    data : string
  }

  function getJoke() {
    // 通过范型指定后端返回的数据类型
    uni.request<ServiceData>({
      url: 'https://hmajax.itheima.net/api/randjoke',
      method: 'GET',
      success: (res) => {
        // 兼容安卓端类型的写法
        const jokeStr = res.data?.data
        if (jokeStr !== null) {
          jokeText.value = jokeStr
        }
      },
      fail: () => {
        jokeText.value = '数据获取失败，请检查网络...'
      }
    })
  }
</script>

<template>
  <view class="container">
    <view class="card">
      <view class="header">
        <text class="header-text">随机笑话</text>
      </view>
      <scroll-view class="scroll-content">
        <text class="scroll-content-text">{{ jokeText }}</text>
      </scroll-view>
      <view class="footer">
        <button class="footer-button" @click="getJoke()">换一个</button>
      </view>
    </view>
  </view>
</template>
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

<script setup lang="uts">
  // ...前面代码省略

  // 页面加载时
  onLoad(() => {
    // 获取笑话
    getJoke()
  })
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.

<script setup lang="uts">
  // ...省略其他代码
  
  // 同步获取窗口信息，返回的单位 px
  const windowInfo = uni.getWindowInfo()
</script>

<template>
  <view class="container">
    <view class="card">
      <view class="header">
        <text class="header-text">随机笑话</text>
      </view>
      <!-- 滚动内容区 -->
      <scroll-view class="scroll-content" :style="{ maxHeight: windowInfo.screenHeight * 0.66 + 'px' }">
        <text class="scroll-content-text">{{ jokeText }}</text>
      </scroll-view>
      <view class="footer">
        <button class="footer-button" @click="getJoke()">换一个</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">

  .scroll-content {
    padding: 40rpx 30rpx;
    // 5. 最小高度
    min-height: 300rpx;
    // vh 单位只能用于 微信小程序端 和 Web 端，max-height、min-height 只支持 数字 或 px 单位
    /* #ifdef MP-WEIXIN || WEB */
    max-height: 66vh; /* 最大高度，屏幕高度 66% */
    /* #endif */
  }
</style>
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.
32.
33.
34.
35.
36.