uni-app 11111

针对您提到的 uni-app，这是一个使用 Vue.js 开发所有前端应用的框架，通过一套代码可以发布到 iOS、Android、H5、以及各种小程序等多个平台。以下是一个简单的 uni-app 项目示例，展示如何创建一个基本的页面并进行数据绑定和事件处理。

首先，确保您已经安装了 HBuilderX，这是 DCloud 官方推荐的开发工具，支持 uni-app 的开发。

1. 创建项目

在 HBuilderX 中，选择“文件”->“新建”->“项目”，选择“uni-app”项目模板，然后按照提示完成项目创建。

2. 编辑 pages/index/index.vue

这是默认的主页面文件，您可以编辑它来展示一些基本的功能。

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="changeMessage">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  methods: {
    changeMessage() {
      this.message = '你点击了按钮！';
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

3. 运行项目

在 HBuilderX 中，您可以直接点击工具栏上的“运行”按钮，选择您想要运行的目标平台（如微信小程序、H5等），然后查看效果。

4. 条件编译

uni-app 支持条件编译，这意味着您可以为不同的平台编写特定的代码。例如，以下代码展示了如何为微信小程序和 H5 平台编写不同的样式：

<style>
/* 通用样式 */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* 微信小程序特定样式 */
#ifdef MP-WEIXIN
button {
  background-color: #1aad19;
}
#endif

/* H5特定样式 */
#ifdef H5
button {
  background-color: #ff0000;
}
#endif
</style>

以上代码示例展示了如何使用 uni-app 创建一个简单的页面，并进行数据绑定和事件处理。同时，也展示了如何利用条件编译为不同平台编写特定样式。希望这些示例能帮助您更好地理解 uni-app 的基本用法。如果有更复杂的需求或具体问题，欢迎进一步探讨。