uni-app 需要做一个活动报名小程序

当然，以下是一个使用uni-app开发活动报名小程序的简单示例。这个示例将展示如何创建一个基本的报名表单，并包含一些基本的页面导航和数据处理。

首先，确保你已经安装了HBuilderX，因为uni-app通常在这个IDE中进行开发。

1. 初始化项目

打开HBuilderX，创建一个新的uni-app项目。

2. 创建页面

在pages文件夹中创建两个页面：index（首页）和enroll（报名页）。

index.vue

<template>
  <view>
    <text>欢迎参加我们的活动！</text>
    <button @click="navigateToEnroll">立即报名</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToEnroll() {
      uni.navigateTo({
        url: '/pages/enroll/enroll'
      });
    }
  }
}
</script>

enroll.vue

<template>
  <view>
    <form @submit.prevent="handleSubmit">
      <text>姓名：</text>
      <input type="text" v-model="formData.name" placeholder="请输入姓名" />
      
      <text>手机号码：</text>
      <input type="tel" v-model="formData.phone" placeholder="请输入手机号码" />
      
      <button type="submit">提交</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据：', this.formData);
      // 这里可以添加提交到服务器的逻辑，例如使用uni.request
      uni.showToast({
        title: '报名成功',
        icon: 'success'
      });
      uni.navigateBack();
    }
  }
}
</script>

3. 配置页面路径

在pages.json中配置页面路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/enroll/enroll",
      "style": {
        "navigationBarTitleText": "报名"
      }
    }
  ]
}

4. 运行项目

在HBuilderX中，点击运行按钮，选择你的开发环境（如微信小程序），然后你就可以看到运行效果了。

这个示例展示了如何使用uni-app创建一个简单的活动报名小程序，包括一个首页和一个报名页。用户可以在报名页输入姓名和手机号码并提交表单。你可以根据需要进一步扩展这个示例，比如添加更多的表单字段、验证输入数据、将数据提交到服务器等。