表单微信小程序实例

以下是一个简单的表单微信小程序实例，包含姓名、性别、年龄和联系方式四个字段：

1. 在微信开发者工具中创建一个新的小程序项目，选择“空白模板”。
2. 在 app.json 中添加以下代码，配置页面路由：

{
  "pages": [
    "pages/index/index",
    "pages/form/form"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "表单",
    "navigationBarTextStyle": "black"
  }
}

3. 在 pages/index 目录下创建 index.wxml 文件，添加一个“进入表单”按钮，点击后跳转到表单页面：

<view class="container">
  <button class="btn" bindtap="goToForm">进入表单</button>
</view>

4. 在 pages/index 目录下创建 index.js 文件，添加 goToForm 函数，用于跳转到表单页面：

Page({
  goToForm: function() {
    wx.navigateTo({
      url: '../form/form'
    })
  }
})

5. 在 pages/form 目录下创建 form.wxml 文件，添加表单元素：

<view class="container">
  <form bindsubmit="submitForm">
    <view class="input-group">
      <text>姓名：</text>
      <input name="name" placeholder="请输入姓名"></input>
    </view>
    <view class="input-group">
      <text>性别：</text>
      <radio-group name="gender">
        <label><radio value="male"></radio>男</label>
        <label><radio value="female"></radio>女</label>
      </radio-group>
    </view>
    <view class="input-group">
      <text>年龄：</text>
      <input name="age" type="number" placeholder="请输入年龄"></input>
    </view>
    <view class="input-group">
      <text>联系方式：</text>
      <input name="contact" placeholder="请输入联系方式"></input>
    </view>
    <button class="btn" formType="submit">提交</button>
  </form>
</view>

6. 在 pages/form 目录下创建 form.js 文件，添加 submitForm 函数，用于提交表单并跳转回首页：

Page({
  submitForm: function(e) {
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000,
      success: function() {
        wx.navigateBack()
      }
    })
  }
})

7. 在 app.wxss 中添加样式：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007aff;
  color: #fff;
}

.input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

input {
  flex: 1;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}

label {
  margin-left: 10px;
}

.btn[type="submit"] {
  margin-top: 40px;
}

以上就是一个简单的表单微信小程序实例，可以根据实际需求进行修改和扩展。