小程序-文本输入框input+表单组件组合+开关选择器按钮+滑动选择器按钮slider+文本输入框+单选按钮radio+多选按钮checkbox+添加手机联系人+input绑定事件处理函数+剪贴板

wxml

文本输入框input
<form bindsubmit="inputSubmit">
  <input type="text" name="username" placeholder="请输入你的用户名"></input>
  <input password type="text" name="password" maxlength="6" placeholder="请输入6位数密码"  confirm-type="next" />
  <input type="idcard" name="idcard" placeholder="请输入你的身份证账号" />
  <input type="number" name="age" placeholder="请输入你的年龄" />
  <input type="digit" name="height" placeholder="请输入你身高多少米"/>
  <button form-type="submit">提交</button>
</form>
表单组件组合
<form bindsubmit="formSubmit" bindrest="formReset">
    <view>开关选择器按钮</view>
    <switch name="switch"/>
    <view>滑动选择器按钮slider</view>
    <slider name="process" show-value ></slider>
    <view>文本输入框</view>
    <input name="textinput" placeholder="要输入的文本" />
    <view>单选按钮radio</view>
    <radio-group name="sex">
      <label><radio value="male"/>男</label>
      <label><radio value="female"/>女</label>
    </radio-group>
    <view>多选按钮checkbox</view>
    <checkbox-group name="gamecheck">
      <label><checkbox value="game1"/>王者荣耀</label>
      <label><checkbox value="game2"/>欢乐斗地主</label>
      <label><checkbox value="game3"/>连连看</label>
      <label><checkbox value="game4"/>刺激战场</label>
      <label><checkbox value="game5"/>穿越火线</label>
      <label><checkbox value="game6"/>天天酷跑</label>
    </checkbox-group>
    <button form-type="submit">提交</button>
    <button form-type="reset">重置</button>
</form>
添加手机联系人
<form bindsubmit="submitContact">
  <view>姓氏</view>
  <input name="lastName" />
  <view>名字</view>
  <input name="firstName" />
  <view>手机号</view>
  <input name="mobilePhoneNumbe" />
  <view>微信号</view>
  <input name="weChatNumber" />
  <button type="primary" form-type="submit">创建联系人</button>
  <button type="default" form-type="reset">重置</button>
</form>
input绑定事件处理函数
<view>你输入的是：{{inputValue}}</view>
<input  bindinput="bindKeyInput" placeholder="输入的内容会同步到view中"/>
剪贴板
<input type="text" name="copytext" value="{{initvalue}}" bindinput="valueChanged"></input>
<input type="text" value="{{pasted}}"></input>
<button type="primary" bindtap="copyText">复制</button>
<button bindtap="pasteText">粘贴</button>
slider响应设置颜色
<view style="background-color:rgb({{R}},{{G}},{{B}});width:300rpx;height:300rpx"></view>
<slider data-color="R" value='{{R}}' max="255" bindchanging='colorChanging'  show-value>红色</slider>
<slider data-color="G" value='{{G}}' max="255" bindchanging='colorChanging' show-value>绿色</slider>
<slider data-color="B" value='{{B}}' max="255" bindchanging='colorChanging' show-value>蓝色</slider>
picker组件
<picker mode="date" value="{{pickerdate}}" start="2017-09-01" end="2022-09-01" bindchange="bindDateChange">
选择的日期为：{{pickerdate}}
</picker>

js

Page({
  data: {
    //input绑定事件处理函数
    inputValue: '你还没输入内容呢',
    //picker组件
    pickerdate: "2019-8-31",
    //slider响应设置颜色
    R: 7,
    G: 193,
    B: 96,
    //剪贴板
    initvalue: '填写内容复制',
    pasted: '这里会粘贴复制的内容'
  },
  //文本输入框input
  inputSubmit: function (e) {
    console.log('提交的数据信息:', e.detail.value)
  },
  //表单组件组合
  formSubmit: function (e) {
    console.log('表单携带的数据为：', e.detail.value)
  },
  formReset: function () {
    console.log('表单重置了')
  },
  ///添加手机联系人
  submitContact: function (e) {
    const formData = e.detail.value
    wx.addPhoneContact({
      ...formData,
      success() {
        wx.showToast({
          title: '联系人创建成功'
        })
      },
      fail() {
        wx.showToast({
          title: '联系人创建失败'
        })
      }
    })
  },
  //input绑定事件处理函数
  bindKeyInput: function (e) {
    const inputValue = e.detail.value
    console.log('响应式渲染', e.detail)
    this.setData({
      inputValue
    })
  },
  ///剪贴板
  valueChanged(e) {
    this.setData({
      initvalue: e.detail.value
    })
  },
  copyText() {
    wx.setClipboardData({
      data: this.data.initvalue,
    })
  },
  pasteText() {
    const self = this
    wx.getClipboardData({
      success(res) {
        self.setData({
          pasted: res.data
        })
      }
    })
  },
  //slider响应设置颜色
  colorChanging(e) {
    console.log(e)
    let color = e.currentTarget.dataset.color
    let value = e.detail.value;
    this.setData({
      [color]: value
    })
  },
  //picker组件
  bindDateChange: function (e) {
    console.log('picker组件的value', e.detail.value)
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

源码

请添加微信：qiaominliu