微信小程序之———登陸註冊！

時間  2019-11-07
標籤 微信 程序 登陸 註冊 简体版
原文   原文鏈接

好了，我以爲有必要對前一階段的小程序開發過程當中的一些經驗寫出來，總結一下，今天呢，就來總結一下小程序登陸註冊相關的流程和開發過程當中須要注意的問題，好了，廢話很少說，開始咯！javascript

一：登陸php

思路：html

當用戶在未登陸狀態下點擊「登陸」按鈕以後，執行login函數，先用wx.login獲取登陸憑證code，encryptedData和iv，
而後把這三個參數發送過去，取回來isLogin1，若是他是1，則表明該用戶已經註冊過，則不須要進行註冊，點擊登陸直接就
能夠微信登陸，而後跳轉到首頁，若是爲2，則表明該用戶是新用戶，須要跳轉到註冊頁面進行註冊，可是在這以前，須要給後臺發送空的
username、phone、password、phone_code、head_photo，還有code值過去，若是返回狀態是100，則跳轉到註冊頁面註冊完成後自動進入登陸
狀態，而後跳轉首頁。
我的中心頁面wxml:
 java

<!--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:session

// 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 () {
  
  }
})

效果圖：ide

登陸狀態：函數

你們看不明白的能夠問我，由於涉及到的東西比較多，因此就不一一贅述了，還有一點灰常重要，那就是必定要多和後臺
交流，由於有的東西須要兩我的共同完成，不要覺得後臺給了數據，你就能夠隨心所欲了，no！！！合做才能雙贏。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程