微信小程序-采集个人信息

通过自己写的接口来获取学生信息

<!--index.wxml-->
<form bindsubmit="formSubmit">
    <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">学号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" name="no" placeholder="请输入学号" value='' />
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">姓名</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" name="name" placeholder="请输入姓名"  value=''/>
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">性别</view>
                </view>
                 <view class="weui-cell__bd">
                    <input class="weui-input" name="sex" value='{{sex}}'/>
                      <view class="weui-cell__ft">
                        <switch checked bindchange='switch1Change' />
                      </view> 
                </view>
            </view>
             <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">年龄</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input"  name="age" placeholder="请输入年龄" value=''/>
                </view>
            </view>
      </view>
       <view class="weui-btn-area">
            <button class="weui-btn" type="primary" bindtap="showTopTips" form-type='submit'>确定           </button>
        </view>
    </form>

为了方便，我们可以先给value赋值进行测试。

如下是js的代码：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    sex: '女',
  },
  switch1Change: function (e) {
    if (e.detail.value) {
      this.setData({ sex: '女' })
    } else {
      this.setData({ sex: '男' })
    }
  },
formSubmit: function (e) {
    console.log(e.detail.value);
    var no = e.detail.value.no;
    var name = e.detail.value.name;
    var sex = e.detail.value.sex;
    var age=e.detail.value.age;

    if (no == '') {
      wx.showToast({
        title: '学号不能为空',
        icon: 'none',
        duration: 2000
      })
    } else if (name=='') {
      wx.showToast({
        title: '密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } else if (sex == '') {
      wx.showToast({
        title: '性别不能为空',
        icon: 'none',
        duration: 2000
      })
    } else if (age == '') {
      wx.showToast({
        title: '年龄不能为空',
        icon: 'none',
        duration: 2000
      })
    }else{
      wx.request({
        url: "接口路径",（后台代码）
        method: "POST",
        data: {
          no: no,
          name: name,
          sex: sex,
          age:age
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success: (res) => {
          if(res.error){
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })}else{
            wx.showToast({
              title: "添加成功",
              icon: 'success',
              duration: 2000
            })
          }
        }
      })
    }
  },
  //事件处理函数
  onLoad: function () {
   
  },

})

js就是通过submit表单提交获取到它的信息，传入后台接口中。对口接口路径，写自己把后台的创建在哪的路径。由于接口路径具有私密性，所以没有公开哦。

下面的就是接口所需的代码，我是放在了tp框架里

public function index($no,$name,$sex,$age){

        $data['no'] = $no;

        $data['name'] = $name;

        $data['sex'] = $sex;

        $data['age'] = $age;

        $id = M('student')->add($data);

        if ($id) {

            return $this->ajaxReturn(array('error'=>false,'id'=>$id));

        }else{

            return $this->ajaxReturn(array('error'=>true,'msg'=>'添加出错'));

        }

    }

后台接口把所有信息都传入数据库，这样所有的数据我们就可以获取了