跟我来学小程序（三）结合Java后台做一个注册功能

大家好，我是一个爱举铁的程序员Shr。

原本这篇文章是要介绍小程序提供的API，粗略看了一下，API实在太多，一个一个介绍有点费时间，只有在后面写项目时再详细介绍了，但是今天的内容还是会用到几个API。

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180608

环境：

数据库：MySQL

一、创建数据库和表

创建一个名为xcx_20180608的数据库，新建表user

二、Java后台

因为这篇文章是介绍小程序API，所以这里就不贴代码了，不然篇幅太长，因为之前写过太多的，后台的代码是我之前写过的权限管理系统的代码，UserController添加了注册的方法，其他的都一样。这篇文章的代码可以在文章开头的源码地址查看。

三、小程序中的代码

3.1注册页面register.wxml

一个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

先来看看第一个事件，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开发有很多相似的地方，相信你看了这篇文章之后，登录的功能对你来说问题不大了。