前端
瀏覽的當前頁面需要用戶註冊，則跳轉到註冊界面
onLoad: function (options) {
var that = this
if (getApp().globalData.userSign == 2) {//判斷用戶是否註冊
//跳轉到註冊界面
wx.redirectTo({
url: '../register/register',
})
}else if (getApp().globalData.userSign == 1) {
//用戶已經登錄，顯示頁面
}
}註冊界面
register.js
// register.js
var API_URL = "https://IP/wechat/insertUser.php";
var _app = getApp();
var util = require("../../utils/util.js");
Page({
/**
* 頁面的初始數據
*/
data: {
registBtnTxt: "註冊",
registBtnBgBgColor: "#318EE2",
getSmsCodeBtnTxt: "獲取驗證碼",
getSmsCodeBtnColor: "#318EE2",
// getSmsCodeBtnTime:60,
btnLoading: false,
registDisabled: false,
smsCodeDisabled: false,
inputUserName: '',
inputPassword: '',
phoneNum: ''
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
formSubmit: function (e) {
var param = e.detail.value;
this.mysubmit(param);
},
mysubmit: function (param) {
var flag = this.checkUserName(param.username) && this.checkName(param) && this.checkSmsCode(param)
var that = this;
if (flag) {
var nickname = getApp().globalData.userInfo.nickName;
var gender = getApp().globalData.userInfo.gender;
var province = getApp().globalData.userInfo.province;
var phone = param.username.trim();
var realname = param.name.trim();
//提交服務器
wx.login({
success: function (res) {
if (res.code) {
var code = res.code;
wx.request({
url: API_URL,
data: {
nickname: nickname,
gender: gender,
province: province,
phone: phone,
realname: realname,
js_code: code,
},
method: 'GET',
header: {
'content-type': 'application/json'
}, // 設置請求的 header
success: function (res) {
// success
that.setregistData1();
console.log("JSON:" + res.data);
setTimeout(function () {
wx.showToast({
title: res.data.msg+'',
icon: res.data.result == 1?'success':'warn',
duration: 1500
});
that.setregistData2();
if (res.data.result == 1){
getApp().globalData.userSign = 1;
}
wx.navigateBack({
})
//that.redirectTo(param);
}, 2000);
},
fail: function () {
that.setregistData1();
setTimeout(function () {
wx.showToast({
title: '失敗',
icon: 'warn',
duration: 1500
});
that.setregistData2()
},2000);
},
complete: function () {
// complete
}
})
}
}
})
}
},
getPhoneNum: function (e) {
var value = e.detail.value;
this.setData({
phoneNum: value
});
},
setregistData1: function () {
this.setData({
registBtnTxt: "註冊中",
registDisabled: !this.data.registDisabled,
registBtnBgBgColor: "#999",
btnLoading: !this.data.btnLoading
});
},
setregistData2: function () {
this.setData({
registBtnTxt: "註冊",
registDisabled: !this.data.registDisabled,
registBtnBgBgColor: "#318EE2",
btnLoading: !this.data.btnLoading
});
},
checkUserName: function (param) {
var phone = util.regexConfig().phone;
var inputUserName = param.trim();
if (phone.test(inputUserName)) {
return true;
} else {
wx.showModal({
title: '提示',
showCancel: false,
content: '請輸入正確的手機號碼'
});
return false;
}
},
checkName: function (param) {
var userName = param.username.trim();
var name = param.name.trim();
if (name.length <= 0) {
wx.showModal({
title: '提示',
showCancel: false,
content: '請輸入姓名'
});
return false;
} else {
return true;
}
},
getSmsCode: function () {
var phoneNum = this.data.phoneNum;
var that = this;
var count = 60;
if (this.checkUserName(phoneNum)) {
var si = setInterval(function () {
if (count > 0) {
count--;
that.setData({
getSmsCodeBtnTxt: count + ' s',
getSmsCodeBtnColor: "#999",
smsCodeDisabled: true
});
} else {
that.setData({
getSmsCodeBtnTxt: "獲取驗證碼",
getSmsCodeBtnColor: "#318EE2",
smsCodeDisabled: false
});
count = 60;
clearInterval(si);
}
}, 1000);
}
},
checkSmsCode: function (param) {
var smsCode = param.smsCode.trim();
var tempSmsCode = '000000';//演示效果臨時變量，正式開發需要通過wx.request獲取
if (smsCode != tempSmsCode) {
wx.showModal({
title: '提示',
showCancel: false,
content: '請輸入正確的短信驗證碼'
});
return false;
} else {
return true;
}
},
redirectTo: function (param) {
//需要將param轉換爲字符串
param = JSON.stringify(param);
wx.redirectTo({
url: '../main/index?param=' + param//參數只能是字符串形式，不能爲json對象
})
}
})register.json
{
"navigationBarBackgroundColor": "#318EE2",
"navigationBarTitleText": "註冊",
"navigationBarTextStyle": "white",
"backgroundColor": "#fff",
"backgroundTextStyle": "light"
}register.wxml
<!--register.wxml-->
<view class="content">
<form bindsubmit="formSubmit">
<view class="input-area">
<input id="username" name="username" maxlength='11' type="text" placeholder="手機號" bindchange="getPhoneNum"/>
<view class="smsCode">
<input id="smsCode" name="smsCode" maxlength='6' type="text" placeholder="測試驗證碼 000000" />
<button bindtap = "getSmsCode" disabled="{{smsCodeDisabled}}" style="background-color:{{getSmsCodeBtnColor}}" class="getSmsCodeBtn">{{getSmsCodeBtnTxt}}</button>
</view>
<input id="name" name="name" maxlength='20' type="text" placeholder="姓名" />
</view>
<view class="btn-area">
<button disabled="{{registDisabled}}" style="background-color:{{registBtnBgBgColor}}" formType="submit" loading="{{btnLoading}}"> {{registBtnTxt}} </button>
</view>
</form>
</view>register.wxss
/* register.wxss */
/*.myprogress{margin:5px 0}*/
.content{text-align: center}
.logo{margin-top: 100rpx;margin-bottom: 120rpx}
.logo image{width:400rpx;height: 60rpx}
.input-area{
background-color: #fff;
text-align: left;
padding-left: 10%;
border-bottom:1px solid #ddd;
border-top:1px solid #ddd
}
.input-area input{height:100rpx;line-height: 100rpx;}
#username{border-bottom:1px solid #ddd}
.btn-area{width: 80%;margin: 0 auto}
.btn-area button{
/*background-color: #ff9900;*/
margin-top: 40rpx;
color: #fff
}
.txt-area{
margin-top: 30rpx;
display: flex;
justify-content:space-between;
font-size: 30rpx
}
.forgot-password{color: #888}
.register{color:#ff9900}
.forgot-password:active,.register:active{opacity: 0.7}
.smsCode{display: flex;justify-content:space-between;border-bottom: 1px solid #ddd;padding-right: 10%}
.smsCode input{width: 336rpx;}
.smsCode .getSmsCodeBtn{font-size: 30rpx; color:#fff;width:216rpx;box-sizing: border-box; height: 80rpx;line-height: 80rpx;margin-top: 10rpx;margin-right: 0}utils.js
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
function regexConfig() {
var reg = {
email: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
phone: /^1(3|4|5|7|8)\d{9}$/
}
return reg;
}
module.exports = {
formatTime: formatTime,
regexConfig: regexConfig,
}後端
<?php
require_once 'config.php';
header('Content-type: application/json; charset=UTF-8');
$APPID="wx---------------";
$SECRET="c78b---------------------";
$JSCODE="";
if(isset($_GET['js_code'])&&isset($_GET['nickname'])&&isset($_GET['gender'])
&&isset($_GET['province'])&&isset($_GET['phone'])&&isset($_GET['realname'])){
$JSCODE=$_GET['js_code'];
$NICKNAME=$_GET['nickname'];
$GENDER=$_GET['gender'];
$PROVINCE=$_GET['province'];
$PHONE=$_GET['phone'];
$REALNAME=$_GET['realname'];
$url="https://api.weixin.qq.com/sns/jscode2session?appid=".$APPID
."&secret=".$SECRET."&js_code=".$JSCODE."&grant_type=authorization_code";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HEADER, 0);
$data = curl_exec($curl);
$array=json_decode($data,true);
curl_close($curl);
$openid=isset($array['openid'])?$array['openid']:$array['errcode'];
//openid不可用
if($openid=="40029"){
$response["result"] = 0;
$response["msg"] = "invalid code";
echo json_encode($response);
}else{
$sqli="select * from users where openid='$openid'";
$resulti = mysqli_query($conn,$sqli);
$num = mysqli_num_rows($resulti);
//用戶不存在則插入用戶信息
if (!$num){
$sql="INSERT INTO users(nickname, gender, province, phone, realname,openid) VALUES('$NICKNAME', '$GENDER','$PROVINCE','$PHONE','$REALNAME','$openid')";
$result = mysqli_query($conn,$sql);
if ($result){
$response["result"] = 1;
$response["msg"] = "success";
echo json_encode($response);
}
else{
$response["result"] = 2;
$response["msg"] = "fail";
echo json_encode($response);
}
}else{
$response["result"] = 3;
$response["msg"] = "user exist";
echo json_encode($response);
}
}
}
?>
