微信小程序篇】六. 案例：登录小案例

登录小案例 (回顾以前的知识点做的案例)

知识点涉及基本组件，事件绑定，文件配置和页面生命周期

如果对里面一些知识点不懂可以查看之前的文档
微信小程序篇】五. 微信小程序的配置文件和（小程序和页面）的生命周期
微信小程序篇】三. 微信小程序的事件
微信小程序篇】二. 微信小程序的视图与渲染
微信小程序篇】一. 入门 hello wxapp

案例一：根据快递单号查询物流信息

简单说明一下该案例

1. 程序加载完后进入user页面 （因为app.json配的一个页面路径是user）
2. 加载完user页面后判断username是否为空
   a. 不为空就将{{username}}输出来页面上
   b. 为空就跳转到登录页面
3. 登录页面绑定事件将登录的值传给按钮绑定的事件
4. 按钮绑定事件将值传给app，然后跳转到user页面，完成页面登录

项目准备

1. 创建项目demo5-login
2. 将index和logs目录删除，新建login和user目录，创建各自的wxml和js
   
3. 在app.json中配置login和user的页面入口

   {
     "pages": [
       "pages/user/user",
       "pages/login/login"
     ],
     "window": {
       "backgroundTextStyle": "light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "主页",
       "navigationBarTextStyle": "black"
     },
     "style": "v2",
     "sitemapLocation": "sitemap.json"
   }
   

4. user的wxml（username后面去登录获取）

   <view class="container">
     欢迎您 : {{username}}
   </view>
   

   
5. login的wxml和wxss

   <view class="container">
   	<input placeholder="账号" />
   	<input placeholder="密码" />
   	<button type="primary" value="">登录</button>
   </view>
   

   input{
   	border: 1px solid black;
   	width: 80%;
   	margin: 2%;
   	padding: 2%;
   	margin-bottom: 5%;
   }
   

   

定义数据和添加事件

1. 在app.js中定义userinfo （用于 user页面判断用户信息是否为空）

   App({
     appData:{
       userinfo:null
     },
     onLaunch: function () {
     },
     onShow: function (options) {
     },
     onHide: function () {
     },
     onError: function (msg) {	      
     }
   })
   

2. 给login添加三个事件 输入账号，输入密码，点击登录 三个事件

   <view class="container">
     <input placeholder="账号" bindinput="nameInput"/>
     <input placeholder="密码" bindinput="pwdInput"/>
     <button type="primary" value="" bindtap="loginBtn">登录</button>
   </view>
   

3. js里面去注册三个事件,并初始化2个参数

   // 获取APP实例
   var app = getApp();
   Page({
   
     data: {
       username:null,
       password:null
     },
     // 用户名输入事件
     nameInput:function(even){
       this.setData({username:even.detail.value});
     },
     // 密码输入事件
     pwdInput: function (even) { 
       this.setData({ password: even.detail.value });
     },
     // 按钮点击事件
     loginBtn: function () {
       app.appData.userinfo={username:this.data.username,password:this.data.password};
       wx.redirectTo({
         url: '../user/user',
       })
     }
   )}
   

4. user.js 通过onLoad函数判断 用户信息userinfo是否为空

   Page({
   	/**
   	* 页面的初始数据
   	*/
   	data: {
   		username:null
   	},
   	
   	/**
   	* 生命周期函数--监听页面加载
   	*/
   	onLoad: function (options) {
   		// 页面加载的时候判断用户信息是否为空,如果为空就跳转到login页面
   		if (app.appData.userinfo == null) {
   			wx.redirectTo({
   				url: '../login/login',
   			})
   		} else {
   		// 如果不为空，就赋值给username，并显示在页面
   			this.setData({username:app.appData.userinfo.username})
   		}
   	}
   )}