uni-app h5 demo

### 创建 Uni-app H5 平台演示实例

为了展示如何创建并运行一个简单的 `uni-app` 应用程序，在 H5 平台上，可以按照如下方式操作：

#### 初始化项目
使用开发工具 HBuilder X 来新建项目，选择 `uni-app` 类型的应用，并指定工程名为 `demo-h5` 后点击创建[^1]。

# 安装依赖包
npm install

#### 编写基础页面结构
编辑位于 `/pages/index/index.vue` 的文件来定义首页的内容。这里提供了一个简单例子用于显示欢迎信息以及发起网络请求获取数据的功能。

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="fetchData">Fetch Data</button>
  </view>
</template>

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

const message = ref('Welcome to the uni-app H5 Demo');

function fetchData() {
  uni.request({
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'GET',
    success(res) {
      console.log('Fetched posts:', res.data);
      alert(JSON.stringify(res.data));
    },
    fail(err) {
      console.error('Request failed', err);
    }
  });
}
</script>

<style scoped>
.content {
  padding: 20px;
}

button {
  margin-top: 10px;
}
</style>

此代码片段展示了如何通过按钮触发向外部 API 发送 GET 请求的过程[^2]。注意这里的 URL 是一个公开可用的数据源接口地址，实际应用时应替换为自己的服务端API路径。

#### 处理样式与环境变量设置
对于希望启用 Tailwind CSS JIT 模式的开发者来说，可以在项目的根目录下添加 `.env` 文件，并加入以下内容以激活该功能[^3]:

TAILWIND_MODE=watch

这使得能够实时编译Tailwind CSS类名而无需重启服务器。

#### 运行应用程序
最后一步是在命令行终端执行启动命令让本地服务器监听特定端口以便于预览效果:

hbuilderx serve

此时打开浏览器访问 http://localhost:[port]/ 即可看到刚刚构建好的网页界面（其中 `[port]` 表示具体的端口号，默认情况下可能是8080或其他随机分配的数值）。由于这是针对H5平台设计的应用，因此可以直接利用HTML5特性而不必担心兼容性问题；不过需要注意的是当涉及到其他非H5平台如微信小程序等，则要遵循相应平台的规定限制[^4]。