今天早上终于有时间做个demo， 发现小程序上手还是挺容易的，架构也非常简单。

一个简单的登录交互的demo，没有后台交互，其实主要是想测试下数据绑定这块。

官方教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418

效果：

项目结构：

好了，直接上源码：

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    errorMsg: '',
    loginName: '',
    password: ''
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    var that = this
  	//调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
      that.update()
    })
  },
  bindKey1Input:function(e){
    this.setData({
      loginName:e.detail.value
    })
  },
  bindKey2Input:function(e){
    this.setData({
      password:e.detail.value
    })
  },
  login : function(){
    console.log(this.data.loginName + "   " + this.data.password);
    if(this.data.loginName == "" || this.data.password == ""){
      this.setData({
          errorMsg:"请输入账号、密码"
      })
      return ;
    }
    if(this.data.loginName != "zhangsan" || this.data.password != "123"){
      this.setData({
          errorMsg:"账号或密码错误"
      })
      return ;
    }
    this.setData({
          errorMsg:"登录成功"
      })
  }
})

index.wxml

<!--index.wxml-->
<view class="container">
   <view>
      <input bindinput="bindKey1Input" placeholder="输入账号" value="{{loginName}}"/>
   </view>
   <view>
      <input bindinput="bindKey2Input" placeholder="输入密码" value="{{password}}"/>
   </view>
   <view>
      <text class="errorMsg">{{errorMsg}}</text>
   </view>
   <view>
      <button bindtap="login">登录</button>
   </view>
</view>

index.wxss

/**index.wxss**/

input{
  border:1px solid #dbdbdb;
  padding:3px;
  width:200px;
}

.errorMsg{
  color:red;
}