登录小案例 (回顾以前的知识点做的案例)
知识点涉及基本组件,事件绑定,文件配置和页面生命周期
如果对里面一些知识点不懂可以查看之前的文档
微信小程序篇】五. 微信小程序的配置文件和(小程序和页面)的生命周期
微信小程序篇】三. 微信小程序的事件
微信小程序篇】二. 微信小程序的视图与渲染
微信小程序篇】一. 入门 hello wxapp
案例一:根据快递单号查询物流信息
简单说明一下该案例
- 程序加载完后进入user页面 (因为app.json配的一个页面路径是user)
- 加载完user页面后判断username是否为空
a. 不为空就将{{username}}输出来页面上
b. 为空就跳转到登录页面 - 登录页面绑定事件将登录的值传给按钮绑定的事件
- 按钮绑定事件将值传给app,然后跳转到user页面,完成页面登录
项目准备
- 创建项目demo5-login
- 将index和logs目录删除,新建login和user目录,创建各自的wxml和js
- 在app.json中配置login和user的页面入口
{ "pages": [ "pages/user/user", "pages/login/login" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "主页", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
- user的wxml(username后面去登录获取)
<view class="container"> 欢迎您 : {{username}} </view>
- 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%; }
定义数据和添加事件
- 在app.js中定义userinfo (用于 user页面判断用户信息是否为空)
App({ appData:{ userinfo:null }, onLaunch: function () { }, onShow: function (options) { }, onHide: function () { }, onError: function (msg) { } })
- 给login添加三个事件 输入账号,输入密码,点击登录 三个事件
<view class="container"> <input placeholder="账号" bindinput="nameInput"/> <input placeholder="密码" bindinput="pwdInput"/> <button type="primary" value="" bindtap="loginBtn">登录</button> </view>
- 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', }) } )}
-
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}) } } )}