微信小程序登陆账号验证隐私协议验证页面及代码
目录
微信小程序登陆账号验证隐私协议验证页面及代码
微信小程序登陆页，页面主要是需要校验账号手机号，验证勾选同意使用协议和隐私政策，效果如下
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}}” 选中的值，根据点击事件来更改
handleChecked(e){
let index = e.target.dataset.index
this.setData({
checked: !index
})
},全部代码下载地址：