微信小程序实现登录页面

网友投稿 930 2023-11-11

本文实例为大家分享了微信小程序实现登录页面的具体代码，供大家参考，具体内容如下

微信小程序实现登录页面

实现在进入微信小程序首页前的登录验证页面，这里有两种方法，但其实原理都是一样的。

1. 在首页中加入一个弹窗作为登录窗口，效果如下图：

(1)index.wxml

登录窗口代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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栏按键。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* 生命周期函数--监听页面加载
*/
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）在登录页面中处理登录的相关逻辑，也可以实现相同的效果。

以上就是本文的全部内

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 代码
上一篇:微信用户访问小程序的登录过程详解
下一篇:了解移动实验平台，为您的业务带来无限创新
相关文章

 发表评论

暂时没有评论，来抢沙发吧~