微信小程序综合案例实践1

1.用户登录

目的：

为了提高效率忽略了UI美化，主要是模拟用户登录的数据传递，适合初学者。

实现功能：

• 进入"用户中心"页面需要判断用户是否登录
• 如果用户未登录，则跳转至登录页面
• 在登录页面获取用户名信息
• 如果用户已经登录，需要在“用户中心”页面显示登录用户名

知识点：

• 配置页面（page,window,tabBar）
• 生命周期（在onLoad判断用户是否存在）
• 事件绑定（登录按钮、input输入框）
• 数据获取和传递（难点）

第一步：准备好基础页面（index  user  login）.wxml

//login.wxml

<text>用户名</text>
<input bindinput='usernameInput'></input>

<text>密码</text>
<input password='true'></input>

<button bindtap='btnLogin'>登录</button>

//user.wxml

<text>hello!{{username}}</text>

//index.wxml

<view>
   <image src='/image/index.jpg' class='myclass'></image>
</view>
<view>
   <image src='/image/index.jpg' class='myclass'></image>
</view>

 

第二步：配置页面-----添加tabBar，添加数据userinfo

(关键代码)

//app.json{
  "tabBar": {
    "color": "#333",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户中心"
      }
    ]
  }
}

//app.js
App({
  //储存用户信息
  appData:{
    userinfo:null
  }
})

 

第三步：完成user.js的部分逻辑，当userinfo为空时跳转到login页面

//user.js
onLoad: function (options) {
    if(app.appData.userinfo==null){
      console.log("username is null"),
      wx.redirectTo({
        url: '../login/login'
      })
    }    
}

第四步：完成login.js逻辑，为input和button绑定点击事件

  var app = getApp()  
  //获取输入内容
  usernameInput:function(event){
    this.setData({username:event.detail.value})
  },

  //登录按钮的点击事件,给appInfo赋值
  btnLogin:function(){
    app.appData.userinfo={username:this.data.username},
    wx.switchTab({url: '../user/user'})
  }

第五步：完成user.js的剩下逻辑，当userinfo不为空时的显示

  onLoad: function (options) {
    if(app.appData.userinfo==null){
      console.log("username is null"),
      wx.redirectTo({
        url: '../login/login'
      })
    }else{
      this.setData({username:app.appData.userinfo.username})
    }
  }

成果实例：