在 WeUI 中，FormPage 是一种特殊的页面结构，它集成了 WeUI Form 组件，方便开发者快速构建包含表单的页面。以下是一个简单的 WeUI FormPage 的使用例子：

1. 创建 FormPage 页面：
   在小程序的 pages 目录下创建一个新的文件夹，比如 formPage，在该文件夹下创建两个文件：formPage.wxml 和 formPage.js。在 formPage.wxml 中添加以下内容：
   <view class="page">
     <view class="page__hd">
       <view class="page__title">WeUI FormPage</view>
     </view>
     <view class="page__bd">
       <form class="weui-form" bindsubmit="formSubmit" report-submit>
         <!-- 表单项 -->
         <div class="weui-form__control-group">
           <div class="weui-cells__title">文本输入</div>
           <div class="weui-cells weui-cells_form">
             <div class="weui-cell">
               <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
               <div class="weui-cell__bd">
                 <input class="weui-input" name="name" placeholder="请输入姓名" value="{{formData.name}}" />
               </div>
             </div>
             <!-- 其他表单项 -->
           </div>
         </div>

         <!-- 提交按钮 -->
         <div class="weui-btn-area">
           <button class="weui-btn weui-btn_primary" type="primary" formType="submit">提交</button>
         </div>
       </form>
     </view>
   </view>

2. 在 formPage.js 中处理表单提交：
   在 formPage.js 文件中添加以下内容：
   Page({
     data: {
       formData: {}, // 表单数据
     },
     formSubmit: function (e) {
       console.log('form发生了submit事件，携带数据为：', e.detail.value);
       // 处理表单提交逻辑
     },
   });

3. 配置页面路由：
   在小程序的 app.json 文件中配置页面路由，确保 formPage 页面能够被访问到。
   {
     "pages": [
       "pages/formPage/formPage"
       // 其他页面
     ],
     // 其他配置项
   }

4. 运行小程序：
   使用微信开发者工具运行小程序，进入到 WeUI FormPage 页面，可以看到包含表单的页面结构，并可以触发表单提交事件。

这是一个简单的 WeUI FormPage 的使用示例。通过使用 FormPage，你可以更方便地构建包含表单的页面，同时在 JS 文件中处理表单提交的逻辑。根据实际需求，你可以在 FormPage 中添加更多的表单项和逻辑。


转载请注明出处：http://www.pingtaimeng.com/article/detail/1327/微信小程序