一、功能概述

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

二、实现效果

可以先看一下底部导航栏

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

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

这里并没有让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_judge
    this.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',   // 图片路径优先级高于icon
        duration: 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）添加一个密码重置功能；