本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。
全功能WordPress API接口工具已出
全功能WordPress API接口工具已出只为前端开发者的你设计，详情查看：Sliver Rest Wp api：全功能的WordPress api工具
引言
前面我分别讲了uni-app开发注册页面 和 用WordPress开发注册接口 ，原本我以为做了这两小节教程之后大家都能够把注册接口对接上去了，但其实不然。所以本来很忙的我还是打算抽时间来讲一下如何对接注册接口。
开始
我们前面的uni-app的注册页面代码如下：
<template>
<view>
<view class="sliverRegPage">
<form @submit="formSubmit" class="sliverReg">
<view class="uni-form-item uni-column">
<input class="uni-input" name="username" placeholder="请输入用户名……" />
<input class="uni-input" password="true" name="userpwd" placeholder="请输入登录密码……" />
<input class="uni-input" password="true" name="useremail" placeholder="请输入邮箱账号……" />
</view>
<view class="uni-btn-v">
<button formType="submit" type="primary">注册</button>
<button type="warn">登录</button>
</view>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
}
}
</script>
<style>
.sliverLoginPage {
padding: 20px 15px;
}
.sliverLogin uni-input {
background: #d8d8d8;
margin-bottom: 1rem;
padding: 0.5rem;
font-size: 0.8rem;
border-radius: 5px;
color: #424242;
}
.sliverLogin .uni-btn-v button {
margin-bottom: .5rem;
}
</style>我们在js块的methods代码块中添加如下代码：
formSubmit: function(e) {
//获取表单值
var formData = e.detail.value;
// 请求
uni.request({
//api地址
url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/reg.php',
data: {
//请求值
'user_name': formData.username,
'user_pwd':formData.userpwd,
'user_email:formData.useremail,
},
//请求类型
method:'POST',
//请求头
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
console.log(res.data)
if(res.data.status==2){
console.log("登录成功！");
}else{
console.log(res)
}
}
});
}整个文件代码如下：
<template>
<view>
<view class="sliverRegPage">
<form @submit="formSubmit" class="sliverReg">
<view class="uni-form-item uni-column">
<input class="uni-input" name="username" placeholder="请输入用户名……" />
<input class="uni-input" password="true" name="userpwd" placeholder="请输入登录密码……" />
<input class="uni-input" password="true" name="useremail" placeholder="请输入邮箱账号……" />
</view>
<view class="uni-btn-v">
<button formType="submit" type="primary">注册</button>
<button type="warn">登录</button>
</view>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
//uni-app 提交表单方法
formSubmit: function(e) {
//获取表单值
var formData = e.detail.value;
// 请求
uni.request({
//api地址
url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/reg.php',
data: {
//请求值
'user_name': formData.username,
'user_pwd':formData.userpwd,
'user_email:formData.useremail,
},
//请求类型
method:'POST',
//请求头
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
console.log(res.data)
if(res.data.status==2){
console.log("登录成功！");
}else{
console.log(res)
}
}
});
}
}
}
</script>
<style>
.sliverRegPage {
padding: 20px 15px;
}
.sliverReg uni-input {
background: #d8d8d8;
margin-bottom: 1rem;
padding: 0.5rem;
font-size: 0.8rem;
border-radius: 5px;
color: #424242;
}
.sliverReg .uni-btn-v button {
margin-bottom: .5rem;
}
</style>
[post id=18]
代码仓库： https://github.com/sliverRing/uniApp-WPApp
QQ交流群： 824144151
技术援助
需要技术援助？点击这里，帮你解决你的所有问题！PS：可能你离大神之间，只差一个我们！！！！
