>[info] js文件是逻辑控制，主要是它发送请求和接收数据， json 用于此页面局部 配置并且覆盖全局app.json配置， wxss用于页面的样式设置， wxml就是页面，相当于html >[info]具体流程是这样的 1.POST提交数据到 http://127.0.0.1/miniApp/form.php 这个接口 2.PHP根据POST过来的数据，结合数据库进行二次验证，如果操作成功，返回什么，如果操作失败，返回什么 ## 表单视图 <view class="page"> <form bindsubmit="formSubmit"> <view class="weui-cells weui-cells_form"> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">name</view> </view> <view class="weui-cell__bd"> <input type="text" name="name" placeholder="请输入用户名" auto-focus/> </view> </view> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">tel</view> </view> <view class="weui-cell__bd"> <input type="text" name="tel" placeholder="请输入手机号" auto-focus/> </view> </view> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">password</view> </view> <view class="weui-cell__bd"> <input type="password" name="password" placeholder="请设置6-20位登录密码" auto-focus/> </view> </view> <button class="weui-btn weui-btn_info" formType="submit">注册</button> </view> </form> </view> ## 关键点 1、Form表单，需要绑定一个 submit 事件，在小程序中，属性为 bindsubmit , <form bindsubmit="formSubmit"></form> 这里的属性值 formSubmit ，命名可以为符合规范的任意值，相当于以前 html 中的 onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发 formSubmit 这个函数事件，这个函数写在js中。 2、注意点： >[warning]其他的属性和之前的HTML差不多； 注意的是，表单一定要有name=“value； 后端处理和以前一样，比如name=”username”；PHP可以用$_POST[‘username’]来接收。 3、由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，<button formType="submit">注册</button>，这个按钮就是用来开启提交事件的。 js接口处理 // form.js var app = getApp() Page({ data: {}, }, formSubmit: function(e) { console.log(e); if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){ wx.showToast({ title: '手机号码或密码不得为空!', icon: 'loading', duration: 1500 }) setTimeout(function(){ wx.hideToast() },2000) } else { wx.request({ url: 'http://127.0.0.1/miniApp/form.php', data: {name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password}, method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { "Content-Type": "application/x-www-form-urlencoded" }, // 设置请求的 header success: function(res){ console.log(res); wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) // success }, fail: function(res) { console.log(res); // fail } }) } } }) ## 关键点 1、Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果 2、data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。 3、formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象 下面是函数的执行，由于验证太多，我只拿一部分出来理解。 if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){ wx.showToast({ title: '手机号码或密码不得为空!', icon: 'loading', duration: 1500 }) setTimeout(function(){ wx.hideToast() },2000) } ## e参数的信息 这里的e，就是当前触发事件的对象，类似于 html onclick=“foo(this)”this 对象，小程序封装了许多内置的调用方法， `e.detail.value.name `就是当前对象 `name=”name”` 的对象的值 `e.detail.value.mobile.name` 就是这个值的长度 ## showToast showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。 ## wx.request 详细参考上一节的描述 1、url 填写表单提交后请求的地址 2、由于POST和GET传送数据的方式不一样 POST的header必须是 "Content-Type": "application/x-www-form-urlencoded" GET的header可以是 'Accept': 'application/json' 3、一定要写明method：“POST” 默认是“GET”，保持大写 4、这里的data就是POST给服务器端的数据 以{name:value}的形式传送 data:{name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password},