好了，我覺得有必要對前一階段的小程式開發過程中的一些經驗寫出來，總結一下，今天呢，就來總結一下小程式登入注冊相關的流程和開發過程中需要注意的問題，好了，廢話不多說，開始咯！
一：登入
思路：
當使用者在未登入狀态下點選“登入”按鈕之後，執行login函數，先用wx.login擷取登入憑證code， encryptedData和iv ， 然後把這三個參數發送過去，取回來 isLogin1，如果他是1，則代表該使用者已經注冊過，則不需要進行注冊，點選登入直接就 可以微信登入，然後跳轉到首頁，如果為2，則代表該使用者是新使用者，需要跳轉到注冊頁面進行注冊，但是在這之前，需要給背景發送空的 username、phone、password、phone_code、head_photo，還有code值過去，如果傳回狀态是100，則跳轉到注冊頁面注冊完成後自動進入登入 狀态，然後跳轉首頁。 個人中心頁面wxml:
<!--pages/user/index.wxml-->
<view hidden='{{boolean}}'>
<view wx:if="{{isLogin == 1}}">
<!-- 個人資訊 -->
<view class='infomation'>
<!-- 基本資訊 -->
<view class="gameTitle">
<navigator hover-class="none" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><image src="{{dataList.head_photo}}"></image></navigator>
<view>
<view class="gameName"><navigator hover-class="none" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >{{dataList.username}}</navigator></view>
<view class="gameSummary" wx:if="{{dataList.title == ''}}"><navigator hover-class="none" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >這個玩家很懶，什麼也沒留下</navigator></view>
<view class="gameSummary" wx:if="{{dataList.title != ''}}"><navigator hover-class="none" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >{{dataList.title}}</navigator></view>
</view>
</view>
<!-- 粉絲等 -->
<view class='number'>
<navigator hover-class="none">
<view>{{dataList.follow_num}}</view>
<view>關注</view>
</navigator>
<navigator hover-class="none">
<view>{{dataList.fans_num}}</view>
<view>粉絲</view>
</navigator>
<navigator hover-class="none">
<view>{{dataList.level_value}}</view>
<view>積分</view>
</navigator>
</view>
</view>
<!-- “我的”清單 -->
<view class='myList'>
<view class='list'>
<navigator hover-class="none">推薦</navigator>
<navigator hover-class="none">評論</navigator>
<navigator hover-class="none">收藏</navigator>
<navigator hover-class="none">商城</navigator>
<navigator hover-class="none" bindtap='loginOut'>退出</navigator>
</view>
</view>
</view>
<view wx:if="{{isLogin == 2}}">
<view class='bgBox'>
<image class='bg' src='../../img/bg.jpg'></image>
<image class='image' src='../../img/image.jpg'></image>
</view>
<view class="unLogin">
<view>登入後，你的個人首頁等資料</view>
<view>會顯示在這裡，展示給他人</view>
<button bindtap='login'>登入</button>
</view>
</view>
</view>
js:
// pages/user/index.js
Page({
/**
* 頁面的初始資料
*/
data: {
isLogin: '',
dataList: '',
boolean: true
},
login: function () {
let that = this;
// 登入
wx.login({
success: res => {
console.log(res)
// 發送 res.code 到背景換取 openId, sessionKey, unionId
//擷取encryptedData和iv
let encryptedData = wx.getStorageSync('encryptedData');
let iv = wx.getStorageSync('iv');
let code = res.code;
//擷取使用者資訊
wx.getUserInfo({
success: function (res) {
let encryptedData = res.encryptedData;
let iv = res.iv;
that.setData({
encryptedData: encryptedData,
iv: iv
});
//發送請求
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/Login/check_wx_first',
data: { code: code, encryptedData: encryptedData, iv: iv },
success: res => {
console.log(res)
let oStatus = res.data.status;
console.log(oStatus)
if (oStatus == 100) {
let isLogin1 = res.data.is_first_login;
if (isLogin1 == 1) {
//跳轉到注冊頁面
wx.redirectTo({
url: '../register/index?code=' + code,
})
} else if (isLogin1 == 2) {
//let avatarUrl = wx.getStorageSync('avatarUrl');
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/Login/wx_login',
data: { code: code, username: '', phone: '', password: '', phone_code: '', head_photo: '' },
success: res => {
//成功的話直接跳轉到首頁
let oStatus = res.data.status;
if (oStatus == 100) {
let session_id = res.data.session_id;
wx.setStorageSync('session_id', session_id);
wx.switchTab({
url: '../index/index?session_id=' + session_id
})
that.setData({
boolean: true
});
}
}
})
}
} else {
//記得以後給使用者告知錯誤資訊
that.setData({
info: res.data.info
});
//console.log(res.data.info)
}
}
})
}
})
}
})
},
//登出
loginOut: function (options) {
let that = this;
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/Login/login_out',
success: res => {
let oStatus = res.data.status;
if (oStatus == 100) {
wx.setStorageSync('session_id', '');
let session_id = wx.getStorageSync('session_id');
wx.switchTab({
url: '../index/index?session_id=' + session_id
});
that.setData({
boolean: true
});
}
wx.setStorageSync('session_id', '');
}
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
let session_id = wx.getStorageSync('session_id');
console.log(session_id)
let that = this;
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/User/index?session_id=' + session_id,
success: res => {
let oStatus = res.data.status;
if (oStatus == 100) {
this.setData({
isLogin: 1,
boolean: false
});
//加載個人資訊
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/User/index?session_id=' + session_id,
success: res => {
console.log(res)
let oStatus = res.data.status;
if (oStatus == 100) {
var data = res.data.userinfo;
that.setData({
dataList: data
});
} else if (oStatus == 101) {
}
}
})
} else if (oStatus == 101) {
this.setData({
isLogin: 2,
boolean: false
});
}
}
})
},
/**
* 生命周期函數--監聽頁面隐藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
注冊頁面wxml：
<!--pages/register/index.wxml-->
<view class="box">
<view class="tab1" hidden='{{next}}'>
<view class='step'>第一步 發送驗證碼到手機</view>
<input class="idText" maxlength="11" bindinput="phoneInput" type="text" id="phone" name="phone" placeholder="手機号" autocomplete="off" οnkeyup="checkMobile($(this))"/>
<text class="tips">{{phoneTip}}</text>
<view class="keyCodeBox">
<input class="keyCode" bindinput="keyCodeInput" type="text" id="code" name="code" placeholder="驗證碼"/>
<button class="sendBtn {{isChecked?'btnCode':''}}" bindtap='codeBtn' disabled="{{boolean}}" name="sendcode" id="sendcode">{{mailCode}}</button>
</view>
<text class="tips tips1">{{keyCodeTip}}</text>
<view class='instruction'>注冊代表您已同意<text>使用者協定及隐私條款</text>，包括<text>Cookie使用條款</text></view>
<button class="Register" bindtap='next'>下一步</button>
</view>
<view class="tab2" hidden='{{!next}}' >
<view class='backBox' bindtap='back'>
<image class='back' src='../../img/reback.png'></image>
</view>
<view class='step stepSecond'>第二步 設定賬号資訊</view>
<input class="idText" bindinput="userNameInput" type="text" id="username" name="username" placeholder="昵稱"/>
<text class="tips">{{userNameTip}}</text>
<input class="password" bindinput="userPasswordInput" type="password" id="password" name="password" placeholder="密碼"/>
<image class="typeChange" src="../../../../Public/Moter/image/eye.png" alt="眼睛" id="eye"></image>
<text class="tips passTip">{{userPasswordTip}}</text>
<button class="login" bindtap="oLogin">登入</button>
</view>
<view>{{info}}</view>
</view>
js:
// pages/register/index.js
Page({
/**
* 頁面的初始資料
*/
data: {
mailCode: "發送驗證碼",
boolean: true,
isChecked: false,
phone: '',
phoneTip:'',
keyCode: '',
keyCodeTip:'',
userName: '',
userNameTip: '',
userPassword: '',
userPasswordTip: '',
next: '',
code: '',
info: ''
},
//手機号
phoneInput: function (e) {
let mobile = e.detail.value;
let myreg = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,3,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
if (mobile.length == 0){
this.setData({
phoneTip: '手機号不能為空'
})
} else if (!myreg.test(mobile)){
this.setData({
phoneTip: '請檢查您的手機号是否有誤'
})
}else{
this.setData({
phoneTip: '',
phone: mobile,
boolean: false
})
}
},
//驗證碼
keyCodeInput: function (e) {
let keyCode = e.detail.value;
if (keyCode.length == 0) {
this.setData({
keyCodeTip: '驗證碼不能為空'
})
} else {
this.setData({
keyCodeTip: '',
keyCode: keyCode,
})
}
},
//使用者名
userNameInput: function (e) {
let userName = e.detail.value;
if (userName.length == 0) {
this.setData({
userNameTip: '昵稱不能為空'
})
} else {
this.setData({
userNameTip: '',
userName: userName,
})
}
},
//使用者密碼
userPasswordInput: function (e) {
let password = e.detail.value;
if (password.length < 6 || password.length>16) {
this.setData({
userPasswordTip: '密碼長度為6-16位'
})
}else {
this.setData({
userPasswordTip: '',
userPassword: password
})
}
},
//下一步
next: function (options) {
let prefix = this.data;
if (prefix.keyCodeTip == '' && prefix.phoneTip == '' && prefix.phone != '' && prefix.keyCode != ''){
this.setData({
next: true
})
}
},
//傳回
back: function (options) {
this.setData({
next: false,
})
},
//登入
oLogin: function () {
let that = this;
var pre = that.data;
let avatarUrl = wx.getStorageSync('avatarUrl');
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/Login/wx_login',
data: { code: pre.code, username: pre.userName, phone: pre.phone, password: pre.userPassword, phone_code: pre.keyCode, head_photo: avatarUrl},
success: res => {
//成功的話直接跳轉到首頁
let oStatus = res.data.status;
if (oStatus == 100) {
let session_id = res.data.session_id;
wx.setStorageSync('session_id', session_id);
wx.switchTab({
url: '../index/index?session_id=' + session_id
})
}else{
that.setData({
info: res.data.info
})
}
}
})
},
//發送驗證碼
codeBtn: function () {
console.log(6)
var pre = this.data;
wx.request({
url: 'https://www.muwai.com/index.php/Xcx/User/send_code',
data: { phone: pre.phone, type: "1", btype: "1"},
success: res => {
//成功的話直接跳轉到首頁
let oStatus = res.data.status;
let phoneTip = res.data.info;
if (oStatus == 100){
//倒計時
let time = null;
let that = this;
let pre = this.data;
let num = 60;
time = setInterval(function () {
if (num > 1) {
num--;
that.setData({
mailCode: num + 's',
isChecked: true,
boolean: true
})
} else {
that.setData({
mailCode: '重新發送',
isChecked: false,
boolean: false
});
clearInterval(time);
}
}, 1000)
} else{
this.setData({
phoneTip: phoneTip
})
}
}
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
let that = this;
this.setData({
//把讀取出來的資料存儲到頁面的資料data中
code: options.code
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隐藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
效果圖：
登入狀态：
大家看不明白的可以問我，因為涉及到的東西比較多，是以就不一一贅述了，還有一點灰常重要，那就是一定要多和背景 交流，因為有的東西需要兩個人共同完成，不要以為背景給了資料，你就可以為所欲為了，no！！！合作才能共赢。