记录mpvue+vant-weapp的使用（六）：mpvue下面怎么做小程序登录 和 获取van-field的值

1、目前小程序登录是需要主动点击按钮触发的，vant-weapp有两种弹窗可以使用，Popup 弹出层和Dialog 弹出框。我感觉Popup 弹出层容易修改一点，所以我这里用的是这个。

给默认头像那里给个点击事件，控制弹窗的隐藏显示。这里也可以直接给“点击登录”添加点击事件。

      

        
欢迎来到朝花夕拾
        
为提供更优质的服务，我们需要获取以下信息：
        
你的公开信息（昵称、头像等）
        

          取 消
          确 认
        
      
    

 

vant-weapp的button按钮是是支持微信开放能力的：

所以这里的操作和小程序的button的操作是差不多的，然后获取授权和用户信息使用小程序的原生接口即可。

获取用户信息和登录的方法，直接使用微信提供的api即可。

2、van-field本身是不支持双向绑定的，所以获取input的值，需要添加绑定事件，和小程序差不多，。

我这里使用的是bind:input：

      

        
          

            取 消
            确 认
          
      

值得注意的是van-field这里本身的bind:input要改成@input ，不然会报错。

onInput(val){
      console.log(val.mp.detail)
    },

2020-7-21前来补充。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

我发现vant-weapp里面的van-field有坑。。。。。无论是使用@input还是@change，都会出现一种情况：当你手机按键比较快的时候，会有延迟和丢失数据。

所以这里最终弃用van-field，改用小程序原生的input和textarea，因为mpvue里面是支持双向绑定的，直接使用v-model就可以了。