微信小程序登陆页，页面主要是需要校验账号手机号，验证勾选同意使用协议和隐私政策，效果如下 
1，账号密码部分页面代码
<view class="weui-form__control-area">
<view class="weui-cells__group weui-cells__group_form">
<view class="weui-cells weui-cells_form">
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd"><label class="weui-label">帐号</label></view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="用户名/手机号" placeholder-class="weui-input__placeholder" value="{{username}}" name="username" />
</view>
</view>
<view class="weui-cell weui-cell_active password">
<view class="weui-cell__hd">
<label class="weui-label">密码</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="password1" password="true" placeholder="输入密码" placeholder-class="weui-input__placeholder" value="{{password1}}"/>
</view>
<view class="weui-form__tips-area">
<view class="weui-form__tips">
<a href="javascript:" class="weui-footer__link" bindtap='findPassword'>忘记密码？</a>
</view>
</view>
</view>
</view>
</view>
</view>
忘记密码，bindtap=‘findPassword’，是绑定事件，点击进入找回密码方法
findPassword:function(){
wx.navigateTo({
url: '../../',//跳到新建账户的页面
})
},
2，登陆按钮
<view class="weui-form__opr-area">
<button wx:if="{{!checked==false}}" class="weui-btn weui-btn_primary login-btn" formType="submit" >登录</button>
<button wx:if="{{checked==false}}" class="weui-btn weui-btn_primary login-btn" bindtap="handleAgree" >登录</button>
<button wx:if="{{checked==false}}" class="weui-btn weui-btn_primary visitor-btn" bindtap="handleAgree">访客模式</button>
<button wx:if="{{!checked==false && !token}}" class="weui-btn weui-btn_primary visitor-btn" bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber">访客模式</button>
<button wx:if="{{!checked==false && token}}" class="weui-btn weui-btn_primary visitor-btn" bindtap="historyPage">访客模式</button>
</view>
wx:if=“{{!checked==false}}”，这里是用来判断是否选中底部隐私协议，如果是未选中状态下，bindtap=“handleAgree”，绑定方法handleAgree
handleAgree() {
if (!this.data.checked) {
wx.showToast({
icon: "none",
title: '请阅读并同意使用协议及隐私政策',
duration: 2000
})
return false
}
},
如果已经选中了隐私协议，则直接进行校验账号密码
formSubmit: function(e) {
var that=this;
//判断账号不为空
if (app.wx_trim(e.detail.value.username).length == 0) {
wx.showToast({
title: '请输入账号',
icon: 'none',
duration: 1000
});
} else if (app.wx_trim(e.detail.value.password1).length == 0) {
wx.showToast({
title: '请输入密码',
icon: 'none',
duration: 1000
});
} else {
//md5加密密码
e.detail.value.password = md5.zhxy_encrypt(e.detail.value.password1);
//云平台登录后，获取传入的token方法
e.detail.value.redirect = "";
wx.showLoading({
title: '正在登录',
mask:true
})
that.doLogin(e.detail.value);
}
},
校验完账号密码，进行登陆操作，存储token
doLogin:function(account)
{
var that=this;
wx.request({
url: api.loginUrl,
method: "POST",
data: account,
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
var jsonText = res.data;
console.log(jsonText);
if (res.statusCode == "200") {
app.access_token = jsonText.access_token; //将token传给app，进行全局存储
console.log(jsonText.access_token);
//wx.setStorageSync("access_token", jsonText.access_token); //设置缓存token；
wx.setStorageSync("username", account.username);
wx.setStorageSync("password1", account.password1);
that.getUserinfoIdentity(jsonText.access_token);
} else if (res.statusCode == "400") {
wx.showToast({
title: '登录失败：' + res.data.error_description,
icon: 'none',
duration: 2000
});
} else {
//获取返回的Html，获取登陆失败原因
var htmlData = JSON.stringify(jsonText);
//因返回页面有可能出现填写验证码，所以将其过滤，使得用户下次登录，不需要进行验证码的验证就可以进入登录入口
htmlData = htmlData.replace('j_random', 'removeRandom');
var bigenNum = htmlData.indexOf('登录失败：用户名或密码不正确');
var randomNum = htmlData.indexOf('请输入验证码');
if (bigenNum > -1 || randomNum > -1) {
wx.showToast({
title: '用户名或密码不正确',
icon: 'none',
duration: 2000
});
} else {
//多身份提示登陆异常
wx.showToast({
title: '登录异常，请联系管理员',
icon: 'none',
duration: 2000
});
}
}
},
fail: function (res) {
wx.hideLoading();
wx.showToast({
title: '登录失败：' + res.errMsg,
icon: 'none',
duration: 2000
});
},
complete:function()
{
wx.hideLoading();
}
});
},
3，底部隐私协议
<view class="weui-form__extra-area">
<view class="weui-footer">
<view class="weui-footer__text" >
<checkbox color="#74bfe7" style="transform:scale(0.6);" bindtap="handleChecked" data-index="{{checked}}" />
同意 <a href="javascript:" bindtap="goToAgreement">使用协议</a> 和 <a href="javascript:" bindtap="goToPrivacy">隐私政策</a></view>
</view>
</view>
bindtap=“handleChecked” 绑定点击事件，用来判断是否选中
data-index=“{{checked}}” 选中的值，根据点击事件来更改文章来源：https://www.toymoban.com/news/detail-709050.html
handleChecked(e){
let index = e.target.dataset.index
this.setData({
checked: !index
})
},
全部代码下载地址：https://download.csdn.net/download/qq_43690135/88116731文章来源地址https://www.toymoban.com/news/detail-709050.html
到了这里，关于微信小程序登陆账号验证隐私协议验证页面及代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
