本文主要是介绍微信小程序登录页面的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
微信小程序登录页面
实现在进入微信小程序首页前的登录验证页面,这里有两种方法,但其实原理都是一样的。
1. 在首页中加入一个弹窗作为登录窗口,效果如下图:
(1)index.wxml
登录窗口代码如下:
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{!hiddenmodalput}}"></view>
<view class="modal-dialog" wx:if="{{!hiddenmodalput}}" catchtouchmove="preventTouchMove"><view class="modal-title">{{tip}}</view><view class="modal-content"><view class="modal-input"><input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputUsername" class="input" placeholder="用户名" value="{{username}}"></input></view><view class="modal-input"><input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputPassword" class="input" placeholder="密码" value="{{password}}"></input></view></view><view class="modal-footer"><navigator class="btn-cancel" target="miniProgram" open-type="exit">退出</navigator><!-- <view class="btn-cancel" bindtap="cancel" data-status="cancel">取消</view> --><view class="btn-confirm" bindtap="confirm" data-status="confirm">确定</view></view>
</view>
(2)index.js
在onload方法中判断当前的登录状态,这里我用了简单的 getStorage 来保存登录信息,hiddenmodalput控制登录窗口是否显示,这样就可以实现简单的登录页面,hideTabBar是用来隐藏底部tab栏按键。
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this;wx.getStorage({key: 'username',success (res) {console.log(res.data);that.setData({hiddenmodalput:true,})},fail (res) {console.log(res);that.setData({hiddenmodalput:false,})wx.hideTabBar({animation: true,success: (res) => {},fail: (res) => {},complete: (res) => {},})}})},
2.新建一个登录页面
(1)在首页onload中进行登录转态验证,如果为未登录状态,则可以使用wx.navigateTo跳转到登录页面
(2)在登录页面中处理登录的相关逻辑,也可以实现相同的效果。
这篇关于微信小程序登录页面的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!