文章目录

一、功能概述
二、实现效果
三、实现方法
- 1、新建个人登陆页面
- 2、设计密码获取判别函数和响应函数
- - 1）定义变量
  - 2）设计密码获取判别函数
  - 3）设计响应函数
- 3、设计页面内容
- - 1）input组件设计
  - 2）button组件设计
四、总结
- 1、实现过程中遇到的问题
- 2、后续优化方向

一、功能概述

要实现的功能是给想要访问的页面设置一个密码，输入密码后如果密码错误，会提示密码错误，正确会直接进入页面。

二、实现效果

可以先看一下底部导航栏

本人的需求是想要把小程序分成三个大板块，中间是共享页面，两边是个人页面，点击个人的底部导航栏按键时会进入个人登陆页面，需要在个人登录页面输入密码才能访问个人页面。

进入个人登录页面后的内容如下图

这里并没有让input输入框的边框显示出来，具体怎么让边框显示出来以及有哪些样式，可以在input的style中设置outline-style，关于outline-style的概要可以点击超链接看一下，这里就不再做介绍。

在个人登录页面输入密码后可以正常进入，如果密码错误会有相应的提示，如下图所示

三、实现方法

看完实现效果，接下来说一下如何实现，实现时主要用到了input、button，其次还用到了wx.showToast函数。

1、新建个人登陆页面

在进入个人页面之前，需要有一个个人登录页面，因此需要新建一个，关于如何快速新建页面，可以看一下关于底部导航栏如何实现的文章微信小程序开发笔记二—底部导航栏tabar

2、设计密码获取判别函数和响应函数

1）定义变量

在新建的的个人登陆页面的.ts文件中定义变量

data: {lin_pswd:'',lin_pswd_judge:'',},

其中lin_pswd用于获取input输入的密码，lin_pswd_judge用于指示判别结果。

2）设计密码获取判别函数

get_lin_pswd:function(e:any){let lin_pswd = e.detail.value;   // 获取输入结果if (lin_pswd == 960404){   // 密码判断this.data.lin_pswd_judge = '0'}else{this.data.lin_pswd_judge = ''}},

该函数的大概意思就是先利用lin_pswd获取文本框输入内容，然后判别是否正确，如果正确就会将判别结果变量lin_pswd_judge赋值为0，否则就给判别结果变量赋值为空。

3）设计响应函数

设计完密码获取判别函数后，需要对不同的判别结果做出响应，如果密码正确，则跳转进入个人页面，如果不正确会提示密码错误，具体实现程序如下

judge_lin_pswd:function(){let lin_pswd_judge = this.data.lin_pswd_judgethis.setData({   // 清除文本框内容lin_pswd: '',})if (lin_pswd_judge == '0'){wx.navigateTo({url:'/pages/lin/lin'})this.setData({   // 清空判断结果lin_pswd_judge: '',})}else{wx.showToast({title: '密码错误',icon: 'none',   // sucess：成功；error：失败；loading：加载；none：不显示image: '/image/password_error.png',   // 图片路径优先级高于iconduration: 2000   // 提示的延迟时间})}},

该函数是在button按下后执行的，因此首先无论密码正不正确会先将文本框输入的内容清空，清空之后判别lin_pswd_judge的值，如果是0，说明密码输入正确，会先接跳转到个人页面，然后清空变量lin_pswd_judge，防止出现在进入个人页面退出后不输入密码再次点击登录会直接进入的情况。如果密码输入错误，会利用wx.showToast函数提示，提示的图片和文字都可以自己修改，详见微信官方文档介绍。

3、设计页面内容

完成以上变量定义和函数设计后就可以着手个人登陆页面设计了，这部分代码都在.wxml文件中。

1）input组件设计

按照惯例，先上程序

 <input style="width: 330rpx; height: 73rpx; display: block; box-sizing: border-box;text-align: center; outline-style: none;" type="text" placeholder="请输入密码" focus="true" maxlength="6" password="{{!open}}" bindinput="get_lin_pswd" value="{{lin_pswd}}"/>

这里只简单介绍和一下其中用到的一些关键的属性，其他的可以参考一下微信官方文档对于input的介绍。

type设置输入的类型

这里设置为text，点击文本输入框后会直接拉出手机的文本输入键盘，如果将text改程number，则点击文本输入框后会拉出手机的数字输入键盘。

placeholder设置输入框为空是的内容

这里写入的是请输入密码

maxlength设置最大输入长度
bindinput指示的为键盘输入时触发的函数
value为输入的内容

这里把value设置成密码判别时的变量，主要是为了方便在点击登陆后能够及时清除文本框中的输入内容。

2）button组件设计

button组件程序如下

 <button class="lin_button_enter" type="primary" plain="true" bindtap="judge_lin_pswd" style="position: relative; left: 2rpx; top: 104rpx">进入专属空间</button>

这里也不对button组件做过多的介绍，可以去微信官方文档搜索。

这里用到的关键属性有以下几个

plain设置按钮是否镂空（背景色透明）
bindtap按键按下后执行的函数

四、总结

以上就是设置页面密码的整个实现流程，如果你成功了麻烦点个赞呀，这里总结一下实现这项功能时遇到的问题以及后续的优化方向。

1、实现过程中遇到的问题

由于本人从未接触过微信小程序开发的内容，也没有学习过前端的知识，所以整个实现过程中遇到了很多问题，除去最开始的怎么实现按键跳转，怎么设置文本框属性这些以外，遇到的问题主要有以下几点

1）如何获取文本框输入内容？
2）如何实现密码判别？
3）如何在密码错误时提示？
4）如何在点击登陆后清除文本框输入内容？

获取文本框输入内容的方法比较粗陋，如果有其他方法请留言，作为小白的我非常想了解以下。其次对于如何清除文本框内容也是在冲浪过后跟着大佬们学习的。

2、后续优化方向

目前只是实现了简单的登录功能，但是还有很多可以优化的地方，主要想到了以下几点

1）设置一个小眼睛，可以控制输入内容是否可见；
2）添加一个密码重置功能；

微信小程序开发笔记—设置页面密码相关推荐

微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记一
微信小程序开发笔记一.微信小程序的结构 1.初识小程序 2.快捷键 3.查阅文档二.常用组件 1.input组件 2.button组件三.小程序中的函数 1.函数的两种定义方法 2.带参函数 3 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

微信小程序开发笔记—设置页面密码