WeUI for 小程序input表单输入

一、打开微信小程序IDE开发工具，在pages目录下新建目录input，并在目录input下新建文件input.wxml

二、在项目根目录下的app.json中配置新建的文件input，如下图

三、打开input.wxml文件，添加如下代码

<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">Input</view>
<view class="page__desc">表单输入</view>
</view>
<view class="page__bd">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>

<view class="weui-cells__title">单选列表项</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
<radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>

<view class="weui-cell__bd">{{item.name}}</view>
<view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
<icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
</view>
</label>
</radio-group>
<view class="weui-cell weui-cell_link">
<view class="weui-cell__bd">添加更多</view>
</view>
</view>

<view class="weui-cells__title">复选列表项</view>
<view class="weui-cells weui-cells_after-title">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
<checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>

<view class="weui-cell__hd weui-check__hd_in-checkbox">
<icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
<icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
<view class="weui-cell weui-cell_link">
<view class="weui-cell__bd">添加更多</view>
</view>
</view>

<view class="weui-cells__title">表单</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">qq</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入qq"/>
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">手机号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入手机号" />
</view>
<view class="weui-cell__ft">
<view class="weui-vcode-btn">获取验证码</view>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">日期</view>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">时间</view>
</view>
<view class="weui-cell__bd">
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="weui-input">{{time}}</view>
</picker>
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">验证码</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入验证码" />
</view>
<view class="weui-cell__ft">
<image class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
</view>
</view>
</view>
<view class="weui-cells__tips">底部说明文字底部说明文字</view>

<view class="weui-cells__title">表单报错</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input weui-cell_warn">
<view class="weui-cell__hd">
<view class="weui-label">卡号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入卡号"/>
</view>
<view class="weui-cell__ft">
<icon type="warn" size="23" color="#E64340"></icon>
</view>
</view>
</view>

<view class="weui-cells__title">开关</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">标题文字</view>
<view class="weui-cell__ft">
<switch checked />
</view>
</view>
</view>

<view class="weui-cells__title">文本框</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入文本" />
</view>
</view>
</view>

<view class="weui-cells__title">文本域</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
<view class="weui-textarea-counter">0/200</view>
</view>
</view>
</view>

<view class="weui-cells__title">选择</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd" style="width: 105px">
<picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
<view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
</picker>
</view>
<view class="weui-cell__bd weui-cell__bd_in-select-before">
<input class="weui-input" placeholder="请输入号码" />
</view>
</view>
</view>

<view class="weui-cells__title">选择</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__bd">
<picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
<view class="weui-select">{{accounts[accountIndex]}}</view>
</picker>
</view>
</view>
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd weui-cell__hd_in-select-after">
<view class="weui-label">国家/地区</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
<view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
</picker>
</view>
</view>
</view>

<checkbox-group bindchange="bindAgreeChange">
<label class="weui-agree" for="weuiAgree">
<view class="weui-agree__text">
<checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
<view class="weui-agree__checkbox-icon">
<icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
</view>
阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
</view>
</label>
</checkbox-group>

<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
</view>
</view>
</view><!--V型知识库原创 www.vxzsk.com-->

四、打开input.js文件，添加如下代码

Page({
data: {
showTopTips: false,

radioItems: [
{ name: 'cell standard', value: '0' },
{ name: 'cell standard', value: '1', checked: true }
],
checkboxItems: [
{ name: 'standard is dealt for u.', value: '0', checked: true },
{ name: 'standard is dealicient for u.', value: '1' }
],

date: "2016-09-01",
time: "12:01",

countryCodes: ["+86", "+80", "+84", "+87"],
countryCodeIndex: 0,

countries: ["中国", "美国", "英国"],
countryIndex: 0,

accounts: ["微信号", "QQ", "Email"],
accountIndex: 0,

isAgree: false
},
showTopTips: function () {
var that = this;
this.setData({
showTopTips: true
});
setTimeout(function () {
that.setData({
showTopTips: false
});
}, 3000);
},
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);

var radioItems = this.data.radioItems;
for (var i = 0, len = radioItems.length; i < len; ++i) {
radioItems[i].checked = radioItems[i].value == e.detail.value;
}

this.setData({
radioItems: radioItems
});
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value);

var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
checkboxItems[i].checked = false;

for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (checkboxItems[i].value == values[j]) {
checkboxItems[i].checked = true;
break;
}
}
}

this.setData({
checkboxItems: checkboxItems
});
},
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
bindCountryCodeChange: function (e) {
console.log('picker country code 发生选择改变，携带值为', e.detail.value);

this.setData({
countryCodeIndex: e.detail.value
})
},
bindCountryChange: function (e) {
console.log('picker country 发生选择改变，携带值为', e.detail.value);

this.setData({
countryIndex: e.detail.value
})
},
bindAccountChange: function (e) {
console.log('picker account 发生选择改变，携带值为', e.detail.value);

this.setData({
accountIndex: e.detail.value
})
},
bindAgreeChange: function (e) {
this.setData({
isAgree: !!e.detail.value.length
});
}
});

五、点击小程序IDE编译按钮，预览效果如下：