微信小程序之———登陆注册！

好了，我以为有必要对前一阶段的小程序开发过程当中的一些经验写出来，总结一下，今天呢，就来总结一下小程序登陆注册相关的流程和开发过程当中须要注意的问题，好了，废话很少说，开始咯！

一：登陆

思路：

当用户在未登陆状态下点击“登陆”按钮以后，执行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=""><image src="{{dataList.head_photo}}"></image></navigator>
				<view>
					<view class="gameName"><navigator hover-class="none" href="">{{dataList.username}}</navigator></view>
					<view class="gameSummary" wx:if="{{dataList.title == ''}}"><navigator hover-class="none" href="">这个玩家很懒，什么也没留下</navigator></view>
					<view class="gameSummary" wx:if="{{dataList.title != ''}}"><navigator hover-class="none" href="">{{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" onkeyup="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！！！合做才能双赢。