[解读小程序]手机归属地查询Demo(三)

[解读小程序]手机归属地查询Demo(三)

分析的程序来源:
http://blog.csdn.net/y1258429182/article/details/52666290

下载链接：http://pan.baidu.com/s/1o8bElya 密码：b621
解压密码: yangzheshare

登录页

前面闪屏页的skipToMain()方法会跳转到登录页面.

login.wxml

页面的组成就是最简单的两个输入框,一个按钮. 还有一个toast框.
注意这里的toast和Android中的吐司不同, 在小程序中toast是一个组件, 必须要在wxml中设置.

<view class="page">
  <view class="page__bd">
  <text class="page__desc">用户名</text>
    <view class="section">
        <input placeholder="请输入用户名" bindinput="bindKeyInput1" />
    </view>
    <text class="page__desc">密码</text>
    <view class="section">
        <input placeholder="请输入密码"  bindinput="bindKeyInput2" />
    </view>
     <button bindtap="login" class="btn_Login" type="primary">登录</button>   

           <view class="body-view">
                <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
                    登录成功
                </toast>          
            </view>
    </view>
</view>

页面结构

首先可以看到这个页面的组织结构和微信官方的demo很像.

<view class="page">
  <view class="page__bd">
    //....
        <view class="section">
        //....
        </view>
        <view class="section">
        //...
        </view>
    </view>
</view>

结构类似于 page –>(head)–> body –> section. 虽然这样的结构没有明确提出来, 但是这样的结构很清晰, 每个view都依赖于各自的wxss样式.
这里包含几个非常常用的组件input输入框, button按钮, toast消息提示框.

input输入框

<input placeholder="请输入用户名" bindinput="bindKeyInput1" />

placeholder指定输入框为空时占位符.
bindinput的API说明为: 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
这句话相当于确定了方法签名

function(e) { //接受一个EventHandle参数
    this.setData( {
      inputValue1: e.detail.value //具体取值为e.detail.value
    })
    //也可以直接return一个字符串
  }

input有几个常用的属性password是否为密码,type输入类型,auto-focus自动聚焦.
输入框和输入法软键盘总是密切相关的. 小程序提供了关闭软键盘的方法wx.hideKeyboard() 文档-隐藏输入法
* bindchange方法比较特殊: 输入框失去焦点时，触发 bindchange 事件，event.detail = {value: value}

一个疑问: 如何实现输入框内容的动态监听呢? 好像没看到这样的方法哎.

button 按钮

<button bindtap="login" class="btn_Login" type="primary">登录</button>  

type类型有三种primary(绿色按钮), default(灰色按钮),warn(红色按钮).
比较重要的属性有form-type(用于表单组件),hover-class(按钮按下的样式, 这个对用户操作的反馈).

toast 消息提示框

这个用法比较固定. 因为大多数情况下只是控制显示和隐藏状态.

<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">登录成功</toast>

login.js

初始数据

  data: {
    inputValue1: "", //默认输入框为空
    inputValue2: "",
    toast1Hidden: true, //默认隐藏
  },

获得输入框的值

  bindKeyInput1: function( e ) {
    this.setData( {
      inputValue1: e.detail.value
    })
  },
  bindKeyInput2: function( e ) {
    this.setData( {
      inputValue2: e.detail.value
    })
  },

登录验证

  login: function() {
    if(this.data.inputValue1 == "123" && this.data.inputValue2 == "123" ) {
      wx.redirectTo( {
        url: "../index/index" //跳转
      })
      this.setData( {
        toast1Hidden: false //显示消息对话框
      })
    } else {
      console.log( "登录失败" )
    }
  },

记得前面讲过页面路由wx.redirectTo()就是关闭当前页面,进入应用内的另一个页面.
hidden 设置 false 后，会触发 bindchange()方法, 默认的duration为1500ms.

  toast1Change: function( e ) {
    this.setData( {
      toast1Hidden: true
    })
  },

to be continued…