微信小程序如何實(shí)現(xiàn)注冊登錄功能
小編給大家分享一下微信小程序如何實(shí)現(xiàn)注冊登錄功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、潮州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為潮州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
實(shí)現(xiàn)效果如下
前端 部分
注冊功能
1、wxml文件
<view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 用戶名 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input name="input" placeholder="請輸入用戶名" bindinput="username"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 手機(jī)號碼 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input name="input" placeholder="請輸入手機(jī)號碼" bindinput="tell"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 密碼 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input placeholder="設(shè)置密碼" password="true" bindinput="password"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 確認(rèn)密碼 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input placeholder="設(shè)置密碼" password="true" bindinput="rpassword"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button type="primary" bindtap="submitHandler">注冊</button> </view> </view> <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button bindtap="ureg">用戶登錄</button> </view> </view> <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button bindtap="treg">教師注冊</button> </view> </view> </view> </view> </view> </view> </view> </view>
2、js文件
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Page({
data: {
name: "",
pass: "",
rpass: "",
tell: "",
isname: false,
istell: false,
ispass: false
},
treg: function treg() {
wx.navigateTo({
url: "./../teacher/tregdit"
});
},
ureg: function ureg() {
wx.navigateTo({
url: "./../ulogin/ulogin"
});
},
tell: function tell(e) {
this.setData({ tell: e.detail.value });
},
username: function username(e) {
this.setData({ name: e.detail.value });
},
password: function password(e) {
this.setData({ pass: e.detail.value });
},
rpassword: function rpassword(e) {
this.setData({ rpass: e.detail.value });
},
submitHandler: function submitHandler() {
var that = this;
if (that.data.name == "") {
wx.showModal({
title: "錯(cuò)誤",
content: "用戶名不能為空"
});
that.isname = false;
} else {
that.isname = true;
}
if (that.data.pass != that.data.rpass || that.data.pass == "" || that.data.rpass == "") {
wx.showModal({
title: "錯(cuò)誤",
content: "兩次密碼輸入不一致"
});
that.ispass = false;
} else {
that.ispass = true;
}
if (that.data.tell.length != 11) {
wx.showModal({
title: "錯(cuò)誤",
content: "手機(jī)格式有誤"
});
that.istell = false;
} else {
that.istell = true;
}
if (that.istell && that.ispass && that.isname) {
// 提交
wx.request({
url: "http://localhost:8080/Teacher/uregedit.action", //接口地址
data: {
username: that.data.name,
password: that.data.pass,
tell: that.data.tell
},
method: "get",
header: {
"content-type": "application/json"
},
success: function success(res) {
//頁面跳轉(zhuǎn)
wx.navigateTo({
url: "./../tlogin/tlogin"
});
//頁面跳轉(zhuǎn)
}
});
// 提交
}
}
});3、wxss文件
.frm {
margin-top: 200rpx;
}登錄功能
1、wxml文件
<view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 用戶名 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input name="input" placeholder="請輸入用戶名" bindinput="username"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> 密碼 </view> </view> <view class="ui-col ui-col-8 ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <input placeholder="設(shè)置密碼" password="true" bindinput="password"></input> </view> </view> </view> </view> </view> </view> <view class="ui-row ui-row-border-top ui-row-border-bottom" > <view class="ui-col ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> </view> </view> <view class="ui-col" > <view class="ui-col-content"> <view class="ui-row" > <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button type="primary" bindtap="submitHandler">登錄</button> </view> </view> <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button bindtap="ureg">用戶注冊</button> </view> </view> <view class="ui-col ui-col-4 ui-col-border-right ui-col-align-center align-center valign-middle" > <view class="ui-col-content align-center valign-middle"> <button bindtap="tlogin">老師登錄</button> </view> </view> </view> </view> </view> </view> </view> </view>
2、js文件
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Page({
data: {
name: "",
pass: "",
isname: false,
ispass: false
},
ureg: function ureg() {
wx.navigateTo({
url: "./../user/reg"
});
},
tlogin: function tlogin() {
wx.navigateTo({
url: "./../tlogin/tlogin"
});
},
username: function username(e) {
this.setData({ name: e.detail.value });
},
password: function password(e) {
this.setData({ pass: e.detail.value });
},
submitHandler: function submitHandler() {
var that = this;
if (that.data.name == "") {
wx.showModal({
title: "錯(cuò)誤",
content: "用戶名不能為空"
});
that.isname = false;
} else {
that.isname = true;
}
if (that.data.pass == "") {
wx.showModal({
title: "錯(cuò)誤",
content: "密碼不能為空"
});
that.ispass = false;
} else {
that.ispass = true;
}
if (that.ispass && that.isname) {
// 提交
wx.request({
url: "http://localhost:8080/Teacher/ulogin.action", //接口地址
data: {
username: that.data.name,
password: that.data.pass
},
method: "get",
header: {
"content-type": "application/json"
},
success: function success(res) {
var info = res.data;
if (info == "fail") {
wx.showModal({
title: "錯(cuò)誤",
content: "用戶名或者密碼輸入不正確"
});
} else {
//存儲數(shù)據(jù)
// 同步接口立即寫入
wx.setStorageSync("uname", that.data.name + "");
wx.setStorageSync("indentity", "user");
//頁面跳轉(zhuǎn)
//頁面跳轉(zhuǎn)
wx.switchTab({
url: "/pages/center/center"
});
console.log("頁面跳轉(zhuǎn)111");
}
}
});
// 提交
}
}
});3、wxss文件
.frm {
margin-top: 200rpx;
}我的后端是用java的ssh框架實(shí)現(xiàn)的
package cn.com.service;
import java.io.IOException;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts2.ServletActionContext;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.opensymphony.xwork2.ModelDriven;
import cn.com.bean.User;
@Repository(value = "ulogin")
@Scope("prototype")
public class Ulogin implements ModelDriven<User> {
@Autowired
private SessionFactory sf;
@Autowired
private User u;
// 注冊功能
@Transactional
public String regedit() {
Session session = sf.getCurrentSession();
session.save(u);
return null;
}
// 登錄功能
@Transactional
public String login() {
Session session = sf.getCurrentSession();
String sql = "from User where username=? and password=?";
Query query = session.createQuery(sql);
query.setString(0, u.getUsername());
query.setString(1, u.getPassword());
User uu = (User) query.uniqueResult();
String info = null;
if (uu != null) {
info = "success";
} else {
info = "fail";
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
response.getWriter().write(info);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
@Override
public User getModel() {
// TODO Auto-generated method stub
return u;
}
}以上是“微信小程序如何實(shí)現(xiàn)注冊登錄功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前文章：微信小程序如何實(shí)現(xiàn)注冊登錄功能
分享鏈接：http://bm7419.com/article40/jjsheo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、軟件開發(fā)、搜索引擎優(yōu)化、外貿(mào)建站、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 響應(yīng)式網(wǎng)站頁面設(shè)計(jì)三大優(yōu)勢特點(diǎn) 2022-08-15
- 響應(yīng)式網(wǎng)站設(shè)計(jì)會影響你嗎 2021-08-11
- 成都響應(yīng)式網(wǎng)站設(shè)計(jì)為公司提供哪些幫助？ 2017-01-02
- 響應(yīng)式網(wǎng)站建設(shè)和PC手機(jī)網(wǎng)站都有哪些區(qū)別？ 2023-01-02
- 創(chuàng)新互聯(lián)|論淺談響應(yīng)式網(wǎng)站與自適應(yīng)網(wǎng)站的區(qū)別及優(yōu)劣勢對比 2018-06-08
- 華為MateX折疊屏手機(jī)讓你的響應(yīng)式網(wǎng)站瀏覽更方便 2013-05-16
- 企業(yè)響應(yīng)式網(wǎng)站建設(shè)的一些常識 2022-09-30
- 響應(yīng)式網(wǎng)站的優(yōu)勢是什么 2021-06-11
- 浐灞響應(yīng)式網(wǎng)站制作：網(wǎng)站建設(shè)做完后企業(yè)需要做什么？ 2023-02-23
- 所有的行業(yè)都適合進(jìn)行響應(yīng)式網(wǎng)站制作嗎？ 2016-10-18
- 響應(yīng)式網(wǎng)站如何做更吸引用戶眼球 2021-09-24
- 響應(yīng)式網(wǎng)站對企業(yè)的重要性 2016-11-11