制作前台表单页面

1.新建register文件夹和register.js，register.json，register.wxml，register.wxss文件

/*
说明：
register.js - 页面交互
register.json - 页面配置
register.wxml - 页面结构
register.wxss - 页面样式
*/

2.修改全局配置文件添加用户注册路由，如果有多个路由第一个会被当做默认路由也就是首页

{
  "pages": [
    "pages/register/register"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意：在修改全局配置文件和页面配置文件时不要添加注释。

3.修改注册页面配置文件，添加头部标题显示“用户注册”

{
  "navigationBarTitleText": "用户注册"
}

修改之后会在左边模拟器的头部显示“用户注册”

4.开始制作表单页面，打开register.wxml，编写代码

<!-- 容器 -->
<view class="container">
  <!-- 表单 -->
  <form bindsubmit="formSubmit" bindreset="formReset">
    <!-- 用户名 -->
    <view>
      <text>用户名：</text>
      <view>
        <input name="username" placeholder="请输入用户名"></input>
      </view>
    </view>
    <!-- 密码 -->
    <view>
      <text>密码：</text>
      <input name="pwd" password="true" placeholder="请输入密码"></input>
    </view>
    <!-- 确认密码 -->
    <view>
      <text>确认密码：</text>
      <input name="confirmPwd" password="true" placeholder="请输入确认密码"></input>
    </view>
    <!-- 性别 -->
    <view>
      <text>性别：</text>
      <radio-group name="gender">
        <radio value="1">男</radio>
        <radio value="2">女</radio> 
      </radio-group> 
    </view>
    <!-- 是否是学生 -->
    <view>
      <text>是否学生：</text>
      <switch name="isStudent"></switch>
    </view>
    <!-- 业余爱好 -->
    <view>
      <text>业余爱好：</text>
      <checkbox-group name="hobby">
        <checkbox value="1">打篮球</checkbox>
        <checkbox value="2">看书</checkbox>
        <checkbox value="3">其他</checkbox>
      </checkbox-group>
    </view>
    <!-- 出生日期 -->
    <view>
      <text>出生日期：</text>
      <picker name="birthDate" mode="date" bindchange="bindDateChange" value="{{date}}">当前选择：{{date}}</picker>
    </view>
    <!-- 所在地区 -->
    <view>
      <text>所在地区：</text>
      <picker name="district" mode="region" bindchange="bindRegionChange" value="{{region}}">当前选择：{{region}}</picker>
    </view>
    <!-- 备注 -->
    <view>
      <text>备注：</text>
      <textarea name="remark" placeholder="输入备注内容"></textarea>
    </view>
    <!-- 提交按钮 -->
    <view>
      <button type="primary" form-type="submit">提交</button>
    </view>
    <!-- 重置按钮 -->
    <view>
      <button form-type="reset">重置</button>
    </view>
  </form>
</view>

效果：

5.给表单中的出生日期和所在地区添加动态效果，主要是编辑register.js

/**
   * 页面的初始数据
   */
  data: {
    date: '2020-01-01',
    region: ['广东省', '广州市', '海珠区']
  },

<!-- 出生日期 -->
    <view>
      <text>出生日期：</text>
      <picker name="birthDate" mode="date" bindchange="bindDateChange" value="{{date}}">当前选择：{{date}}</picker>
    </view>  

  /**
   * 选择日期
   */
  bindDateChange: function(e) {
    this.setData({
      date: e.detail.value
    })
  },

效果：

<!-- 所在地区 -->
    <view>
      <text>所在地区：</text>
      <picker name="district" mode="region" bindchange="bindRegionChange" value="{{region}}">当前选择：{{region}}</picker>
    </view>

  /**
   * 选择地区
   */
  bindRegionChange: function(e) {
    this.setData({
      region: e.detail.value
    })
  },

效果：

新建用户信息表

-- 用户信息表
create table ent_user_profile(
    id mediumint unsigned not null primary key auto_increment,
    username varchar(30) not null default '' unique comment '用户名',
    pwd char(32) not null default '' comment '密码',
    gender tinyint(1) unsigned not null default 0 comment '性别：0 默认，1 男，2 女',
    isStudent tinyint(1) unsigned not null default 1 comment '是否是学生：1 默认是 2 否',
    hobby varchar(8) not null default '' comment '业余爱好',
    birthDate timestamp not null comment '出生日期',
    district varchar(100) not null default '' comment '所在地区',
    remark varchar(150) not null default '' comment '备注',
    status tinyint(1) not null default 0 comment '状态：0 默认待审核，-1 已删除，1 正常',
    add_time timestamp not null default current_timestamp comment '创建时间',
    modify_time timestamp not null default current_timestamp on update current_timestamp comment '更新时间',
    index idx_add_time (add_time)
) engine=innodb default charset=utf8 collate=utf8_general_ci auto_increment=1;

提交表单

1.编辑register.js，添加提交表单逻辑

/**
   * 提交表单
   */
  formSubmit: function(e) 
    var data = e.detail.value
    wx.request({
      url: 'http://yourdomain/api/index/index',
      data: data,
      header: {
        'content-type': 'application/json'
      },
      dataType: 'json',
      method: 'post',
      success: function(res) {
        console.log(res)
      }
    })
  },

2.在tp5中编写接口处理代码

public function index()
    {
        // 获取提交的数据
        $data = input('post.');
        if (empty($data)) {
            json(['code' => 1, 'msg' => '参数不能为空'])->send();
            exit;
        }
        $data['isStudent'] = ($data['isStudent'] === true) ? 1 : 2;
        if (!empty($data['hobby'])) {
            $data['hobby'] = implode(',', $data['hobby']);
            $data['hobby'] = rtrim($data['hobby'], ',');
        }
        $data['district'] = implode(',', $data['district']);
        $data['district'] = rtrim($data['district'], ',');
        $validate = validate('UserProfileValidate');
        if (!$validate->check($data)) {
            json(['code' => 1, 'msg' => $validate->getError()])->send();
            exit;
        }
        // md5加密
        $data['pwd'] = md5($data['pwd']);
        try {
            $res = model('UserProfile')->allowField(true)->save($data);
        } catch (/Exception $e) {
            json(['code' => 1, 'msg' => $e->getMessage()])->send();
            exit;
        }
        if ($res) {
            json(['code' => 0, 'msg' => '操作成功'])->send();
            exit;
        } else {
            json(['code' => 1, 'msg' => '操作失败'])->send();
            exit;
        }
    }

测试

因为是在本地环境测试的，在测试之前需修改下面的配置，勾选不校验合法域名

提交和响应信息

表数据

总结

该小程序开发只是实现了基本功能，界面显得很丑陋，但是通过这个小功能可以体验小程序的开发流程，怎样与后台交互，从整体来说小程序仅是前端部分，开发起来需要更多的js，html5以及css3的技术，现在在一些公司比较流行用vue，react，angular等框架来开发，最后在部署上线时将代码转换成微信小程序框架的结构。