微信小程序活动报名demo

这里提供一个简单的微信小程序活动报名的 demo，包括页面布局和基本的交互逻辑：

1. 首先，在 app.json 文件中添加一个页面：

   {
     "pages": [
       "pages/index/index",
       "pages/activity/activity"
     ]
   }

2. 在 index 页面中添加一个按钮，点击后跳转到活动报名页面：

   <view class="container">
     <button class="btn" bindtap="navigateToActivity">报名参加活动</button>
   </view>

   Page({
     navigateToActivity() {
       wx.navigateTo({
         url: '/pages/activity/activity'
       })
     }
   })

3. 在 activity 页面中添加表单，让用户填写相关信息：

   <form bindsubmit="submitForm">
     <view class="form-item">
       <label class="form-label">姓名：</label>
       <input class="form-input" name="name" placeholder="请输入您的姓名" required />
     </view>
     <view class="form-item">
       <label class="form-label">联系方式：</label>
       <input class="form-input" name="phone" placeholder="请输入您的联系方式" required />
     </view>
     <view class="form-item">
       <label class="form-label">参加人数：</label>
       <input class="form-input" name="count" placeholder="请输入参加人数" type="number" required />
     </view>
     <button class="btn" type="submit">提交报名信息</button>
   </form>

4. 在 activity 页面中添加提交表单的逻辑，将用户填写的信息发送给服务器：

   Page({
     submitForm(e) {
       const { name, phone, count } = e.detail.value
       wx.request({
         url: 'https://example.com/activity/apply',
         method: 'POST',
         data: {
           name,
           phone,
           count
         },
         success(res) {
           wx.showToast({
             title: '报名成功',
             icon: 'success',
             duration: 2000
           })
         },
         fail(res) {
           wx.showToast({
             title: '提交失败',
             icon: 'none',
             duration: 2000
           })
         }
       })
     }
   })

注意，这里的请求地址和方法需要根据实际情况进行修改。同时，请求成功或失败后需要给用户相应的提示。

以上就是一个简单的微信小程序活动报名的 demo，希望能对你有所帮助。