详解微信小程序文本框(label/input)、按钮(button)用法,以登陆界面为例

一个很简单的功能实现,先看效果界面。
这里写图片描述

小程序初始界面如1,输入用户名“你是大坏蛋”,密码“wocaibushine”,点击登录效果如2所示,点击重置,效果如3所示。
新建一个小程序,建立普通快速启动模板。
所有东西都不用动,
pages/index/index.wxml代码用如下的替换:

<form bindsubmit="formBindsubmit" bindreset="formReset">
  <view style="display:flex;">
    <label>用户名:</label>
    <input name="userName" placeholder="请输入用户名!" />
  </view>
  <view style="display:flex;">
    <label>密码:</label>
    <input name="psw" placeholder="请输入密码!" password="true" />
  </view>
  <view style="display:flex;margin-top:30px;">
    <button style="width:30%;" formType="submit" >登录</button>
    <button style="width:30%" formType="reset" >重置</button>
  </view>
</form>
<view>{{tip}}</view>
<view>{{userName}}</view>
<view>{{psw}}</view>

pages/index/index.js代码用如下的替换:

Page({
  data: {
    // text:"这是一个页面"
    tip: '测试',
    userName: '用户名:',
    psw: '密码:'
  },
  formBindsubmit: function (e) {
    this.setData({
      tip: '结果',
      userName: '用户名:' + e.detail.value.userName,
      psw: '密码:' + e.detail.value.psw
    })
  },
  formReset: function () {
    this.setData({
      tip: '清空了',
      userName: '君不见',
      psw: '黄河之水天上来'
    })
  }
})

分析一下这两个代码。
首先是wxml,第一行,因为文本框input和按钮button都是放在了表单(form)中,所以这个首行代码几乎是固定的了。

<form bindsubmit="formBindsubmit" bindreset="formReset">

bindsubmit,数据触发,bindreset表单重置。
style=”display:flex;,一行多列,把这个删掉,“用户名:”和“请输入用户名”就是两行。
password,true是隐藏密码,false是不隐藏密码。
margin-top,对象上面空出多少,30px。
formType:点击button的时候触发form组件中的事件,只有两个有效值,要么submit,要么reset。
所以说,button和input在form组件中,用法固定而单一,代码都没有什么变量。
最后,”“调用的是函数,{{}}引用的是值。

再说js文件。
代码都要写在page({})中。
data:{}给个初始化的值。
this.Data({})这也是个固定的,定义函数更新data的数据。
数据结构是json格式的。
formBindsubmit: function (e){}:定义表单中的submit函数,提交表单。
formReset: function () {}:定义表单中的reset函数,重置表单。


小程序中input和button的用法挺固定的,照着源码化用就行了。

input和button在小程序中归为表单组件。
input的官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
button的官方文档,放在了表单组件里了,
https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html

展开阅读全文

没有更多推荐了,返回首页