• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之———登录注册

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

转载于:https://blog.csdn.net/canpark/article/details/54139679

好了,我觉得有必要对前一阶段的小程序开发过程中的一些经验写出来,总结一下,今天呢,就来总结一下小程序登录注册相关的流程和开发过程中需要注意的问题,好了,废话不多说,开始咯!

一:登录

思路:

 

当用户在未登录状态下点击“登录”按钮之后,执行login函数,先用wx.login获取登录凭证code,encryptedData和iv,

然后把这三个参数发送过去,取回来isLogin1,如果他是1,则代表该用户已经注册过,则不需要进行注册,点击登录直接就

可以微信登录,然后跳转到首页,如果为2,则代表该用户是新用户,需要跳转到注册页面进行注册,但是在这之前,需要给后台发送空的

username、phone、password、phone_code、head_photo,还有code值过去,如果返回状态是100,则跳转到注册页面注册完成后自动进入登录

状态,然后跳转首页。

个人中心页面wxml:

 
  1. <!--pages/user/index.wxml-->

  2. <view hidden='{{boolean}}'>

  3. <view wx:if="{{isLogin == 1}}">

  4. <!-- 个人信息 -->

  5. <view class='infomation'>

  6. <!-- 基本信息 -->

  7. <view class="gameTitle">

  8. <navigator hover-class="none" href=""><image src="{{dataList.head_photo}}"></image></navigator>

  9. <view>

  10. <view class="gameName"><navigator hover-class="none" href="">{{dataList.username}}</navigator></view>

  11. <view class="gameSummary" wx:if="{{dataList.title == ''}}"><navigator hover-class="none" href="">这个玩家很懒,什么也没留下</navigator></view>

  12. <view class="gameSummary" wx:if="{{dataList.title != ''}}"><navigator hover-class="none" href="">{{dataList.title}}</navigator></view>

  13. </view>

  14. </view>

  15. <!-- 粉丝等 -->

  16. <view class='number'>

  17. <navigator hover-class="none">

  18. <view>{{dataList.follow_num}}</view>

  19. <view>关注</view>

  20. </navigator>

  21. <navigator hover-class="none">

  22. <view>{{dataList.fans_num}}</view>

  23. <view>粉丝</view>

  24. </navigator>

  25. <navigator hover-class="none">

  26. <view>{{dataList.level_value}}</view>

  27. <view>积分</view>

  28. </navigator>

  29. </view>

  30. </view>

  31. <!-- “我的”列表 -->

  32. <view class='myList'>

  33. <view class='list'>

  34. <navigator hover-class="none">推荐</navigator>

  35. <navigator hover-class="none">评论</navigator>

  36. <navigator hover-class="none">收藏</navigator>

  37. <navigator hover-class="none">商城</navigator>

  38. <navigator hover-class="none" bindtap='loginOut'>退出</navigator>

  39. </view>

  40. </view>

  41. </view>

  42. <view wx:if="{{isLogin == 2}}">

  43. <view class='bgBox'>

  44. <image class='bg' src='../../img/bg.jpg'></image>

  45. <image class='image' src='../../img/image.jpg'></image>

  46. </view>

  47. <view class="unLogin">

  48. <view>登录后,你的个人主页等资料</view>

  49. <view>会显示在这里,展示给他人</view>

  50. <button bindtap='login'>登录</button>

  51. </view>

  52. </view>

  53. </view>

  54.  
  55.  

js:

 
  1. // pages/user/index.js

  2. Page({

  3.  
  4. /**

  5. * 页面的初始数据

  6. */

  7. data: {

  8. isLogin: '',

  9. dataList: '',

  10. boolean: true

  11. },

  12. login: function () {

  13. let that = this;

  14. // 登录

  15. wx.login({

  16. success: res => {

  17. console.log(res)

  18. // 发送 res.code 到后台换取 openId, sessionKey, unionId

  19. //获取encryptedData和iv

  20. let encryptedData = wx.getStorageSync('encryptedData');

  21. let iv = wx.getStorageSync('iv');

  22. let code = res.code;

  23. //获取用户信息

  24. wx.getUserInfo({

  25. success: function (res) {

  26. let encryptedData = res.encryptedData;

  27. let iv = res.iv;

  28. that.setData({

  29. encryptedData: encryptedData,

  30. iv: iv

  31. });

  32. //发送请求

  33. wx.request({

  34. url: 'https://www.muwai.com/index.php/Xcx/Login/check_wx_first',

  35. data: { code: code, encryptedData: encryptedData, iv: iv },

  36. success: res => {

  37. console.log(res)

  38. let oStatus = res.data.status;

  39. console.log(oStatus)

  40. if (oStatus == 100) {

  41. let isLogin1 = res.data.is_first_login;

  42. if (isLogin1 == 1) {

  43. //跳转到注册页面

  44. wx.redirectTo({

  45. url: '../register/index?code=' + code,

  46. })

  47. } else if (isLogin1 == 2) {

  48. //let avatarUrl = wx.getStorageSync('avatarUrl');

  49. wx.request({

  50. url: 'https://www.muwai.com/index.php/Xcx/Login/wx_login',

  51. data: { code: code, username: '', phone: '', password: '', phone_code: '', head_photo: '' },

  52. success: res => {

  53. //成功的话直接跳转到首页

  54. let oStatus = res.data.status;

  55. if (oStatus == 100) {

  56. let session_id = res.data.session_id;

  57. wx.setStorageSync('session_id', session_id);

  58.  
  59. wx.switchTab({

  60. url: '../index/index?session_id=' + session_id

  61. })

  62. that.setData({

  63. boolean: true

  64. });

  65. }

  66.  
  67.  
  68. }

  69. })

  70. }

  71. } else {

  72. //记得以后给用户告知错误信息

  73. that.setData({

  74. info: res.data.info

  75. });

  76. //console.log(res.data.info)

  77. }

  78. }

  79. })

  80.  
  81. }

  82. })

  83. }

  84. })

  85. },

  86. //登出

  87. loginOut: function (options) {

  88. let that = this;

  89. wx.request({

  90. url: 'https://www.muwai.com/index.php/Xcx/Login/login_out',

  91. success: res => {

  92. let oStatus = res.data.status;

  93. if (oStatus == 100) {

  94. wx.setStorageSync('session_id', '');

  95. let session_id = wx.getStorageSync('session_id');

  96. wx.switchTab({

  97. url: '../index/index?session_id=' + session_id

  98. });

  99. that.setData({

  100. boolean: true

  101. });

  102. }

  103. wx.setStorageSync('session_id', '');

  104. }

  105. })

  106. },

  107.  
  108. /**

  109. * 生命周期函数--监听页面加载

  110. */

  111. onLoad: function (options) {

  112.  
  113. },

  114.  
  115. /**

  116. * 生命周期函数--监听页面初次渲染完成

  117. */

  118. onReady: function () {

  119.  
  120. },

  121.  
  122. /**

  123. * 生命周期函数--监听页面显示

  124. */

  125. onShow: function () {

  126. let session_id = wx.getStorageSync('session_id');

  127. console.log(session_id)

  128. let that = this;

  129. wx.request({

  130. url: 'https://www.muwai.com/index.php/Xcx/User/index?session_id=' + session_id,

  131. success: res => {

  132. let oStatus = res.data.status;

  133. if (oStatus == 100) {

  134. this.setData({

  135. isLogin: 1,

  136. boolean: false

  137. });

  138.  
  139. //加载个人信息

  140. wx.request({

  141. url: 'https://www.muwai.com/index.php/Xcx/User/index?session_id=' + session_id,

  142. success: res => {

  143. console.log(res)

  144. let oStatus = res.data.status;

  145. if (oStatus == 100) {

  146. var data = res.data.userinfo;

  147. that.setData({

  148. dataList: data

  149. });

  150. } else if (oStatus == 101) {

  151.  
  152. }

  153. }

  154. })

  155.  
  156. } else if (oStatus == 101) {

  157. this.setData({

  158. isLogin: 2,

  159. boolean: false

  160. });

  161. }

  162. }

  163. })

  164.  
  165.  
  166. },

  167.  
  168. /**

  169. * 生命周期函数--监听页面隐藏

  170. */

  171. onHide: function () {

  172.  
  173. },

  174.  
  175. /**

  176. * 生命周期函数--监听页面卸载

  177. */

  178. onUnload: function () {

  179.  
  180. },

  181.  
  182. /**

  183. * 页面相关事件处理函数--监听用户下拉动作

  184. */

  185. onPullDownRefresh: function () {

  186.  
  187. },

  188.  
  189. /**

  190. * 页面上拉触底事件的处理函数

  191. */

  192. onReachBottom: function () {

  193.  
  194. },

  195.  
  196. /**

  197. * 用户点击右上角分享

  198. */

  199. onShareAppMessage: function () {

  200.  
  201. }

  202. })

注册页面wxml:

 
  1. <!--pages/register/index.wxml-->

  2. <view class="box">

  3. <view class="tab1" hidden='{{next}}'>

  4. <view class='step'>第一步 发送验证码到手机</view>

  5. <input class="idText" maxlength="11" bindinput="phoneInput" type="text" id="phone" name="phone" placeholder="手机号" autocomplete="off" onkeyup="checkMobile($(this))"/>

  6. <text class="tips">{{phoneTip}}</text>

  7. <view class="keyCodeBox">

  8. <input class="keyCode" bindinput="keyCodeInput" type="text" id="code" name="code" placeholder="验证码"/>

  9. <button class="sendBtn {{isChecked?'btnCode':''}}" bindtap='codeBtn' disabled="{{boolean}}" name="sendcode" id="sendcode">{{mailCode}}</button>

  10. </view>

  11. <text class="tips tips1">{{keyCodeTip}}</text>

  12. <view class='instruction'>注册代表您已同意<text>用户协议及隐私条款</text>,包括<text>Cookie使用条款</text></view>

  13. <button class="Register" bindtap='next'>下一步</button>

  14. </view>

  15. <view class="tab2" hidden='{{!next}}' >

  16. <view class='backBox' bindtap='back'>

  17. <image class='back' src='../../img/reback.png'></image>

  18. </view>

  19. <view class='step stepSecond'>第二步 设置账号信息</view>

  20. <input class="idText" bindinput="userNameInput" type="text" id="username" name="username" placeholder="昵称"/>

  21. <text class="tips">{{userNameTip}}</text>

  22. <input class="password" bindinput="userPasswordInput" type="password" id="password" name="password" placeholder="密码"/>

  23. <image class="typeChange" src="../../../../Public/Moter/image/eye.png" alt="眼睛" id="eye"></image>

  24. <text class="tips passTip">{{userPasswordTip}}</text>

  25. <button class="login" bindtap="oLogin">登录</button>

  26. </view>

  27. <view>{{info}}</view>

  28. </view>

  29.  

js:

 
  1. // pages/register/index.js

  2. Page({

  3.  
  4. /**

  5. * 页面的初始数据

  6. */

  7. data: {

  8. mailCode: "发送验证码",

  9. boolean: true,

  10. isChecked: false,

  11. phone: '',

  12. phoneTip:'',

  13. keyCode: '',

  14. keyCodeTip:'',

  15. userName: '',

  16. userNameTip: '',

  17. userPassword: '',

  18. userPasswordTip: '',

  19. next: '',

  20. code: '',

  21. info: ''

  22. },

  23. //手机号

  24. phoneInput: function (e) {

  25. let mobile = e.detail.value;

  26. 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}$/;

  27. if (mobile.length == 0){

  28. this.setData({

  29. phoneTip: '手机号不能为空'

  30. })

  31. } else if (!myreg.test(mobile)){

  32. this.setData({

  33. phoneTip: '请检查您的手机号是否有误'

  34. })

  35. }else{

  36. this.setData({

  37. phoneTip: '',

  38. phone: mobile,

  39. boolean: false

  40. })

  41. }

  42. },

  43. //验证码

  44. keyCodeInput: function (e) {

  45. let keyCode = e.detail.value;

  46. if (keyCode.length == 0) {

  47. this.setData({

  48. keyCodeTip: '验证码不能为空'

  49. })

  50. } else {

  51. this.setData({

  52. keyCodeTip: '',

  53. keyCode: keyCode,

  54. })

  55. }

  56. },

  57. //用户名

  58. userNameInput: function (e) {

  59. let userName = e.detail.value;

  60. if (userName.length == 0) {

  61. this.setData({

  62. userNameTip: '昵称不能为空'

  63. })

  64. } else {

  65. this.setData({

  66. userNameTip: '',

  67. userName: userName,

  68. })

  69. }

  70. },

  71. //用户密码

  72. userPasswordInput: function (e) {

  73. let password = e.detail.value;

  74. if (password.length < 6 || password.length>16) {

  75. this.setData({

  76. userPasswordTip: '密码长度为6-16位'

  77. })

  78. }else {

  79. this.setData({

  80. userPasswordTip: '',

  81. userPassword: password

  82. })

  83. }

  84. },

  85. //下一步

  86. next: function (options) {

  87. let prefix = this.data;

  88. if (prefix.keyCodeTip == '' && prefix.phoneTip == '' && prefix.phone != '' && prefix.keyCode != ''){

  89. this.setData({

  90. next: true

  91. })

  92. }

  93. },

  94. //返回

  95. back: function (options) {

  96. this.setData({

  97. next: false,

  98.  
  99. })

  100. },

  101. //登录

  102. oLogin: function () {

  103. let that = this;

  104. var pre = that.data;

  105. let avatarUrl = wx.getStorageSync('avatarUrl');

  106. wx.request({

  107. url: 'https://www.muwai.com/index.php/Xcx/Login/wx_login',

  108. data: { code: pre.code, username: pre.userName, phone: pre.phone, password: pre.userPassword, phone_code: pre.keyCode, head_photo: avatarUrl},

  109. success: res => {

  110. //成功的话直接跳转到首页

  111. let oStatus = res.data.status;

  112. if (oStatus == 100) {

  113. let session_id = res.data.session_id;

  114. wx.setStorageSync('session_id', session_id);

  115. wx.switchTab({

  116. url: '../index/index?session_id=' + session_id

  117. })

  118. }else{

  119. that.setData({

  120. info: res.data.info

  121. })

  122. }

  123.  
  124. }

  125. })

  126. },

  127.  
  128. //发送验证码

  129. codeBtn: function () {

  130. console.log(6)

  131. var pre = this.data;

  132. wx.request({

  133. url: 'https://www.muwai.com/index.php/Xcx/User/send_code',

  134. data: { phone: pre.phone, type: "1", btype: "1"},

  135. success: res => {

  136. //成功的话直接跳转到首页

  137. let oStatus = res.data.status;

  138. let phoneTip = res.data.info;

  139. if (oStatus == 100){

  140. //倒计时

  141. let time = null;

  142. let that = this;

  143. let pre = this.data;

  144. let num = 60;

  145. time = setInterval(function () {

  146. if (num > 1) {

  147. num--;

  148. that.setData({

  149. mailCode: num + 's',

  150. isChecked: true,

  151. boolean: true

  152. })

  153. } else {

  154. that.setData({

  155. mailCode: '重新发送',

  156. isChecked: false,

  157. boolean: false

  158. });

  159. clearInterval(time);

  160. }

  161. }, 1000)

  162. } else{

  163. this.setData({

  164. phoneTip: phoneTip

  165. })

  166. }

  167. }

  168. })

  169. },

  170. /**

  171. * 生命周期函数--监听页面加载

  172. */

  173. onLoad: function (options) {

  174. let that = this;

  175. this.setData({

  176. //把读取出来的数据存储到页面的数据data中

  177. code: options.code

  178. })

  179. },

  180.  
  181. /**

  182. * 生命周期函数--监听页面初次渲染完成

  183. */

  184. onReady: function () {

  185.  
  186. },

  187.  
  188. /**

  189. * 生命周期函数--监听页面显示

  190. */

  191. onShow: function () {

  192.  
  193. },

  194.  
  195. /**

  196. * 生命周期函数--监听页面隐藏

  197. */

  198. onHide: function () {

  199.  
  200. },

  201.  
  202. /**

  203. * 生命周期函数--监听页面卸载

  204. */

  205. onUnload: function () {

  206.  
  207. },

  208.  
  209. /**

  210. * 页面相关事件处理函数--监听用户下拉动作

  211. */

  212. onPullDownRefresh: function () {

  213.  
  214. },

  215.  
  216. /**

  217. * 页面上拉触底事件的处理函数

  218. */

  219. onReachBottom: function () {

  220.  
  221. },

  222.  
  223. /**

  224. * 用户点击右上角分享

  225. */

  226. onShareAppMessage: function () {

  227.  
  228. }

  229. })

效果图:


登录状态:

 


大家看不明白的可以问我,因为涉及到的东西比较多,所以就不一一赘述了,还有一点灰常重要,那就是一定要多和后台

交流,因为有的东西需要两个人共同完成,不要以为后台给了数据,你就可以为所欲为了,no!!!合作才能共赢。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap