大家好,我是一个爱举铁的程序员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;
因为这篇文章是介绍小程序API,所以这里就不贴代码了,不然篇幅太长,因为之前写过太多的,后台的代码是我之前写过的权限管理系统的代码,UserController添加了注册的方法,其他的都一样。这篇文章的代码可以在文章开头的源码地址查看。
<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()中定义同名的函数。
// 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开发有很多相似的地方,相信你看了这篇文章之后,登录的功能对你来说问题不大了。