微信小程序登陆账号验证隐私协议验证页面及代码

2023-11-10

微信小程序登陆页,页面主要是需要校验账号手机号,验证勾选同意使用协议和隐私政策,效果如下
在这里插入图片描述

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
  })
},

全部代码下载地址:https://download.csdn.net/download/qq_43690135/88116731

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序登陆账号验证隐私协议验证页面及代码 的相关文章

  • Notepad++ 不突出显示 HTML 文件中的 css [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 在 Notepad 中 HTML 文件中的 CSS 没有语法突出显示 可以启用吗 这个问题已在超级用户中得到回答不同语言语法突出显示 ht
  • 如何在记事本++中为每一行添加右大括号

    我有一个用记事本打开的文件 显示如下 insert into agent sales values 61 39858 insert into agent sales values 101 5786 insert into agent sal
  • 在 Notepad++ 中显示不匹配的 html 标签

    有没有办法在 Notepad 中突出显示不匹配的 HTML 标签 例如 如果我有以下 HTML 我想要标签以某种方式突出显
  • 更改文本文件编码

    如何通过代码更改文本文件编码 我正在使用此代码实际创建文件本身 但如何更改编码 更改为 UTF 8 w o BOM string path E Test Example txt if File Exists path File Create
  • 使用正则表达式替换时,如何保留匹配字符串的一部分?

    I have 12 hello mp3 21 true mp3 35 good mp3 等等作为文本文件中列出的文件名 我只需要用空格替换数字前面的那些点 例如 12 hello mp3 gt 12 hello mp3 如果我将正则表达式设
  • 如何从 C:\cygdrive\c\ 更改 git 路径

    如何将 git 路径从 C cygdrive c 更改为 C 或只是 cygdrive c 我已将 notepad 设置为 git 的编辑器 当我尝试执行交互式变基 git rebase i 时 记事本打开 但由于这个奇怪的路径 包括 C
  • 内置 html 编码的 HTML 编辑器

    我现在使用 Notepad 似乎经常在这里建议进行基本的 html 和 css 编辑 唯一缺少的是粘贴到文本中的 HTML 编码方法 有没有办法在 Notepad 中执行此操作 或者我是否需要寻找其他编辑器来执行此操作 如果有什么建议的话
  • 如何在 Notepad++ 中多行“在文件中替换...”

    如果有免费的源代码编辑器记事本 http notepad plus sourceforge net uk about php具有 在文件中查找 功能 即无需在编辑器中打开文件 它是否也具有 在文件中替换 功能 Notepad 是基于Note
  • Rockscroll 之类的记事本++ 插件?

    有没有像 Rockscoll for VisualStudio for notepad 这样的插件 至少有接近它的东西吗 Thanks 它是内置的 View gt Document Map
  • 使用 Notepad++ 删除 : 之后少于或等于 5 个字符的行

    问题是这样的 使用 Notepad 删除 之前少于 5 个字符的行 https stackoverflow com questions 50463273 remove lines that is shorter than 5 charact
  • 如何将 Notepad++ 配置为使用空格而不是制表符?

    Notepad 不断插入制表符 这后来弄乱了我的代码 这种情况不仅发生在我按下 Tab 键时 其他时候也会发生 我希望它使用 4 个空格而不是制表符 如何让 Notepad 插入空格而不是制表符 前往优先菜单下的菜单命令Settings 然
  • 如何删除 Notepad++ 中的特定行?

    我正在清理一些代码文件 C 并想要删除这些区域 我想删除所有包含字符串 region 的行 这只是一个例子 我可以想到更多的用途 但这可能吗 记事本 v6 5 Search菜单 gt Find gt Mark选项卡 gt 查找内容 您的搜索
  • 正则表达式替换记事本++中的html空格和前导空格

    我尝试使用以下正则表达式来删除 html 空格和前导空格 Find s lt gt s Replace 1 但每次执行此操作时 我的文档中都会出现 186 次 1 字面意思 任何帮助将不胜感激 这是我正在谈论的一个例子 This field
  • Notepad++ 在每行添加数字

    我在文本文件中有以下数据 p 1 p 1 p 1 p 1 等等 我在 Notepad 中打开该文件 我该如何将其更改为 p 1 p 2 p 3 p 4 etc You can use the Column Editor mode First
  • 如何消除批处理文件动画中的闪烁? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 因此 我一直在批量制作一个假 GUI 以作为我正在做的 YouTube 评论的结尾 它基本上是一堆方框
  • 有没有人有 Ruby 和 Rake 的 Notepad++ 函数列表插件的解析规则

    我使用 Notepad 编辑 rake 文件 并且希望能够使用函数列表插件 我无法在线找到任何解析规则 并且 语言解析规则 对话框没有非常清晰的记录 我正在将方法解析到以下列表中 但还想显示任务 Function Begin t def t
  • 在 NotePad++ 中,如何复制并粘贴“+”部分中的所有内容?

    在记事本 中 您可以使用 按钮折叠代码块 我如何折叠一个大代码块 复制它 然后在一个新文件中 折叠一个大代码块 然后将整个代码块替换为复制一份 Thanks You can not do this in a one step But her
  • VSCode 语言特定的背景颜色,如 Notepad++

    我最近从使用 Notepad 多年转向 VSCode 例如 在 Notepad 中 如果编辑 HTML 文件 默认编辑器背景为白色 但它能够在编辑器内对左括号和右括号之间的 PHP 和 JavaScript 等不同语言的背景进行着色 例如
  • 使用 Vim 作为 HTML 编辑器

    您知道 Notepad 如何具有此功能 当您单击标签 例如 时 它也会自动突出显示结束标签 它叫什么 如何调整 Vim 使其也具有此功能 还有其他方法可以将 Vim 变成强大且高效的 HTML 编辑器吗 我在 vim 中完成所有 HTML
  • Notepad++:通过快捷方式将第一个字母大写?

    我有一个巨大的单词列表 txt 文件中一行中的每个单词 并且某些单词需要手动大写 例如手动 所以我正在寻找记事本 当前我的编辑器 中是否有快捷方式自动将一行的第一个字母大写 但找不到 没有吗 如果没有 您能否建议我使用一个替代的 Windo

随机推荐