微信小程序（十四）- 登陆功能

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十四篇：关于微信小程序中登陆功能开发

ui界面

实现

监听input输入信息

在input输入框，使用bindinput监听用户输入的信息。

wxml

<input class="weui-input" placeholder="输入账号" value="{{username}}" bindinput="getUsername"/>

接着再在js中编写监听到足够数量的字符即可让按钮允许点击。

wxml

 <button wx:if="{{!sendCode}}" bindtap="sendcodeMsg" disabled="{{!phoneVaild}}" >
    发送验证码
 </button>

js

getUsername(e){
     console.log(e.detail.value);
     if(e.detail.value >= 6){
     this.setData({phoneVaild:true});
     }  
}

在以上代码中，我们可以看到，在微信小程序中，如果需要改变模板中使用变量的值时，需要注意使用setData方法去修改值。

获取code值

关于微信小程序code值知识可点此进入

由于后台需要记录每个用户的openid，故我们需要获取到code值连同用户填写的登陆信息一同提交给后台。登陆完成后将获取到的token存入本地缓存将。具体提交登陆代码如下：

wx.login ({
          success: res => {
           if (res.code) {
           //以下请求接口为已封装api，以后文章讲解。
            var url="此处为后台接口api地址"
             api._post(url,{jsCode:res.code,mobile:this.data.username,verificationCode:his.data.msg}).then(res=>{ 
               if (res.data.code == 999) {
                 //成功后
                 wx.setStorageSync("token",res.data.data);
               }  
              })
             }}});
 }

微信小程序中的本地存储

关于微信小程序的本地存储，是相当重要的知识点。因为在开发过程中，基本都会需要用到。而微信小程序的本地存储也是相当好用。在微信小程序中，不管存入的是什么类型，获取的时候 就是原来的类型。通常，使用的是同步的本地存储。如下：

1. wx.setStorageSync('studentInfo', { name: "vivi",age:18 }); 存值
2. wx.getStorageSync("studentInfo"); 获取值
3. 默认值 是 空字符串！！！