AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:05

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序-- 给ofo撸一个微信小程序之个人中心页
相关的资讯,希望对您有帮助。

微信小程序-- 给ofo撸一个微信小程序之个人中心页

微信小程序-- 给ofo撸一个微信小程序之个人中心页,上一节我们实现了单车报障页,这一节我们来实现个人中心页面。

上一节我们实现了单车报障页,这一节我们来实现个人中心页面:

老套路,先进行页面分析 
个人中心页有两种状态,即未登录和已登录,所以要求不同数据驱动产生的不同页面 
点击登录/退出登录按钮需要响应合理逻辑,并改变按钮样式 
只有登录状态下才会显示我的钱包按钮 
页面结构

  1. class=container>
  2. class=user-info>
  3. wx:if={{userInfo.avatarUrl != }}>
  4. src={{userInfo.avatarUrl}}>
  5. {{userInfo.nickName}}
  6. wx:if={{userInfo.avatarUrl != }}>
  7. class=my-wallet tapbar bindtap=movetoWallet>
  8. 我的钱包
  9. >
  10. bindtap=bindAction class=btn-login hover-class=gray type={{bType}} >{{actionText}}

指令wx:if=boolean: 
当boolean为true,被它(block)包裹的元素将会显示,否则不现实,这样可以处理在未登录状态下不显示头像和钱包按钮

页面样式

  1. /* pages/my/index.wxss */
  2. .user-info{
  3. background-color: #fff;
  4. padding-top: 60rpx;
  5. }
  6. .user-info image{
  7. display: block;
  8. width: 180rpx;
  9. height: 180rpx;
  10. border-radius: 50%;
  11. margin: 0 auto 40rpx;
  12. box-shadow: 0 0 20rpx rgba(0,0,0,.2)
  13. }
  14. .user-info text{
  15. display: block;
  16. text-align: center;
  17. padding: 30rpx 0;
  18. margin-bottom: 30rpx;
  19. }
  20. .btn-login{
  21. position: absolute;
  22. bottom: 60rpx;
  23. width: 90%;
  24. left: 50%;
  25. margin-left: -45%;
  26. }
  27. .gray{
  28. background-color: #ccc;
  29. }

页面数据逻辑(未登录状态下的数据模板初始值定义在data对象里)

  1. // pages/my/index.js
  2. Page({
  3. data:{
  4. // 用户信息
  5. userInfo: {
  6. avatarUrl: ,
  7. nickName: 未登录
  8. },
  9. bType: primary, // 按钮类型
  10. actionText: 登录, // 按钮文字提示
  11. lock: false //登录按钮状态,false表示未登录
  12. },
  13. // 页面加载
  14. onLoad:function(){
  15. // 设置本页导航标题
  16. wx.setNavigationBarTitle({
  17. title: 个人中心
  18. })
  19. // 获取本地数据-用户信息
  20. wx.getStorage({
  21. key: userInfo,
  22. // 能获取到则显示用户信息,并保持登录状态,不能就什么也不做
  23. success: (res) => {
  24. wx.hideLoading();
  25. this.setData({
  26. userInfo: {
  27. avatarUrl: res.data.userInfo.avatarUrl,
  28. nickName: res.data.userInfo.nickName
  29. },
  30. bType: res.data.bType,
  31. actionText: res.data.actionText,
  32. lock: true
  33. })
  34. }
  35. });
  36. },
  37. // 登录或退出登录按钮点击事件
  38. bindAction: function(){
  39. this.data.lock = !this.data.lock
  40. // 如果没有登录,登录按钮操作
  41. if(this.data.lock){
  42. wx.showLoading({
  43. title: 正在登录
  44. });
  45. wx.login({
  46. success: (res) => {
  47. wx.hideLoading();
  48. wx.getUserInfo({
  49. withCredentials: false,
  50. success: (res) => {
  51. this.setData({
  52. userInfo: {
  53. avatarUrl: res.userInfo.avatarUrl,
  54. nickName: res.userInfo.nickName
  55. },
  56. bType: warn,
  57. actionText: 退出登录
  58. });
  59. // 存储用户信息到本地
  60. wx.setStorage({
  61. key: userInfo,
  62. data: {
  63. userInfo: {
  64. avatarUrl: res.userInfo.avatarUrl,
  65. nickName: res.userInfo.nickName
  66. },
  67. bType: warn,
  68. actionText: 退出登录
  69. },
  70. success: function(res){
  71. console.log(存储成功)
  72. }
  73. })
  74. }
  75. })
  76. }
  77. })
  78. // 如果已经登录,退出登录按钮操作
  79. }else{
  80. wx.showModal({
  81. title: 确认退出?,
  82. content: 退出后将不能使用ofo,
  83. success: (res) => {
  84. if(res.confirm){
  85. console.log(确定)
  86. // 退出登录则移除本地用户信息
  87. wx.removeStorageSync(userInfo)
  88. this.setData({
  89. userInfo: {
  90. avatarUrl: ,
  91. nickName: 未登录
  92. },
  93. bType: primary,
  94. actionText: 登录
  95. })
  96. }else {
  97. console.log(cancel)
  98. this.setData({
  99. lock: true
  100. })
  101. }
  102. }
  103. })
  104. }
  105. },
  106. // 跳转至钱包
  107. movetoWallet: function(){
  108. wx.navigateTo({
  109. url: ../wallet/index
  110. })
  111. }
  112. })

使用wx.login({})API来进行登录,使用wx.getUserInfo({})API来获取用户信息 
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取本地存储,用于模拟维护用户登录状态。真实情况下需要使用session

至此,个人中心页面已经完成了,下一节我们要编写钱包和充值页面


63阅读 | 0评论
你的回应