大家好，我是一个爱举铁的程序员Shr。
原本这篇文章是要介绍小程序提供的API，粗略看了一下，API实在太多，一个一个介绍有点费时间，只有在后面写项目时再详细介绍了，但是今天的内容还是会用到几个API。
源码地址：
https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180608
环境：
数据库：MySQL
开发工具：Eclipse，Maven，微信开发者工具
一、创建数据库和表
创建一个名为xcx_20180608的数据库，新建表user
CREATE TABLE `user` (
`user_id` int(11) NOT NULL auto_increment,
`user_username` varchar(20) default NULL,
`user_password` varchar(50) default NULL,
PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
二、Java后台
因为这篇文章是介绍小程序API，所以这里就不贴代码了，不然篇幅太长，因为之前写过太多的，后台的代码是我之前写过的权限管理系统的代码，UserController添加了注册的方法，其他的都一样。这篇文章的代码可以在文章开头的源码地址查看。
三、小程序中的代码
3.1 注册页面register.wxml
<!-- register.wxml -->
<view class="container">
<view>注册页面</view>
<form bindsubmit='formSubmit' bindreset="formReset">
<view>
用户名
</view>
<view>
<input type="text" name="userUsername" />
</view>
<view>
密码
</view>
<view>
<input type="password" name="userPassword" />
</view>
<view>
<button form-type="submit">注册</button>
<button bindtap="toBack">返回</button>
</view>
</form>
</view>
一个form表单，bindsubmit属性绑定一个事件，携带form表单中的数据，触发submit事件。
注册按钮中的form-type属性只有submit和reset值，触发表单的submit和reset事件。
小程序中的事件是以key/value的形式。
key：绑定事件用bind或catch开头，然后跟上事件类型，如bindtap，catchtouchstart，自基础库版本 1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap，catch:touchstart。
value：事件名，需要在对应的js文件中的Page()中定义同名的函数。
3.2 逻辑处理register.js
// pages/index/register.js
Page({
// 返回上一页面
toBack: function(){
wx.navigateBack({
delta:1
})
},
// 注册
formSubmit: function(e){
// console.log(e);
// 发起请求
wx.request({
// 请求地址
url: 'http://localhost:8090/xcx/user/reg',
// 请求参数
data: e.detail.value,
// 请求方式
method:"POST",
// 请求头
header: {
'content-type': 'application/x-www-form-urlencoded'
},
// 请求成功回调
success:function(res){
// console.log(res);
wx.redirectTo({
url: res.data,
})
}
})
}
})
先来看看第一个事件，toBack，我自定义为返回上一页面，因为还有一个登录页面。这里用到了一个wx.navigateBack的API。
wx.navigateBack(OBJECT)，关闭当前页面，返回上一页面或多级页面。OBJECT参数中只有一个delta参数，类型为Number，代表返回的页面数。
接着就是注册页面中绑定的表单提交的事件，事件中的参数e，当我在页面中输入用户名和密码点击注册之后，可以来看一看控制台打印的内容。
在e.detail.value中。
知道输入的数据在哪之后，然后是提交到后台，用到了wx.request的API。
wx.request(OBJECT)，OBJECT参数中url是请求地址，data是请求参数，method是请求方式，header请求头，请求头中的content-type默认是application/json，但是请求方式为POST，请求头这样写后台获取不到前台传来的参数，表单用POST请求方式可以用application/x-www-form-urlencoded。
success就是请求成功之后的回调了，可以看看回调函数的参数。
data是开发者服务器返回的数据，errMsg是返回的错误信息，但这次请求是没有错误的。header是开发者服务器返回的响应头，statusCode是开发者服务器响应的HTTP状态码，
请求成功之后使用了wx.redirectTo
wx.redirectTo(OBJECT)，关闭当前页面，跳转到应用内的某个页面，OBJECT参数中的url就是指定的页面，请求成功之后跳转到登录页面。
总结
input组件要有一个边框的样式，不然是看不到输入框的。
表单用POST方式提交，请求头要用application/x-www-form-urlencoded，用application/json后台获取不到参数。
小程序开发其实和Web开发有很多相似的地方，相信你看了这篇文章之后，登录的功能对你来说问题不大了。