微信小程序系列（2）关于微信小程序自定义下拉框组件的使用及表单提交问题

微信小程序原生wxml没有下拉框，还得自己写自定义组件好坑！！！

这个是最后效果图，是一个含下拉框的投票界面：

直接上自定义组件代码（使用了iview weapp组件）：
JS部分

// pages/complain/complain.js
var app = getApp();//这里是获url的
const { $Toast } = require('../../dist/base/index');
Page({

formSubmit(e) {
var that = this;
console.log(e.detail.value)
if(e.detail.value.name==null||e.detail.value.number==null||e.detail.value.phoneNumber==null||e.detail.value.collageMajor==null||e.detail.value.detail==null||e.detail.value.name==''||e.detail.value.number==''||e.detail.value.phoneNumber=='' ||e.detail.value.collageMajor=='' ||e.detail.value.detail=='')
{
$Toast({
content: '所有填写内容都不能为空哦！',
type: 'warning'
});
}else{
$Toast({
content: '提交成功！',
type: 'success'
});
wx.request({

url: app.globalData.url+'addFan',
data:{
'name': e.detail.value.name,
'number': e.detail.value.number,
'phoneNumber': e.detail.value.phoneNumber,
'collageMajor': e.detail.value.collageMajor,
'detail': e.detail.value.detail,
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success:function(res) {
console.log('submit success');
},
fail:function(res){
console.log('submit fail');
}
})
}
},

data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

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

}
})

json部分

{
"usingComponents":
{
"i-input": "../../dist/input/index" ,
"i-button": "../../dist/button/index",
"i-card": "../../dist/card/index",
"i-toast": "../../dist/toast/index"
}
}

wxml部分

<text> \n </text>
<form bindsubmit="formSubmit">
<i-input name="name"  title="反馈人" type="textarea" autofocus placeholder="姓名" />
<i-input name="number" title="学号" type="textarea" placeholder="请输入学号" />
<i-input name="phoneNumber"  type="textarea" title="联系电话" placeholder="请输入手机号" />
<i-input name="collageMajor" type="textarea" title="学院及专业" placeholder="学院和专业简称"/>
<i-input name="detail" type="textarea" title="反馈内容" placeholder="请输入详细反馈内容" />
<text> \n </text>
<i-card title="小贴士">
<view slot="content">在这里可以反馈学校相关问题和对学校建设的意见，请一定要详细反馈自己的想法哦，这样问题才能得到最快的解决！</view>
</i-card>
<text> \n </text>
<text> \n </text>
<text> \n </text>
<text> \n </text>
<button form-type="submit" type="ghost">提交</button>
</form>
<i-toast id="toast" />

主页面代码：

<text >\n</text>
<Select prop-array='{{selectArray}}' bind:myget='getDate1' now-text='历史与文化'></Select>

<Select prop-array='{{selectArray2}}' bind:myget='getDate2' now-text='艺术与审美'></Select>

<Select prop-array='{{selectArray3}}' bind:myget='getDate3' now-text='数学与自然科学'></Select>

<Select prop-array='{{selectArray4}}' bind:myget='getDate4' now-text='社会、经济与管理'></Select>

<Select prop-array='{{selectArray5}}' bind:myget='getDate5' now-text='创新创业'> </Select>

<Select prop-array='{{selectArray6}}' bind:myget='getDate6' now-text='其他'></Select>
<form bindsubmit="formSubmit">

<input class="input" disabled="ture" name="like1" value="{{likeSome1}}">{{likeSome1}}</input>
<input class="input" disabled="ture" name="like2" value="{{likeSome2}}">{{likeSome2}}</input>
<input class="input" disabled="ture" name="like3" value="{{likeSome3}}">{{likeSome3}}</input>
<input class="input" disabled="ture" name="like4" value="{{likeSome4}}">{{likeSome4}}</input>
<input class="input" disabled="ture" name="like5" value="{{likeSome5}}">{{likeSome5}}</input>
<input class="input" disabled="ture" name="like6" value="{{likeSome6}}">{{likeSome6}}</input>
<text class="txt">(点击提交按钮即可投票，一天只能进行一次投票哦！)</text>
<button type="ghost"  open-type="getUserInfo" bindgetuserinfo="getUserInfo" bindtap="buttonForm" disabled="{{disabled}}" id="btn" class="btn" form-type="submit" >提交</button>
</form>
<i-toast id="toast" />

这里使用了骚操作，为了实现表单提交在页面下面写了6个透明的input框，只实现表单提交功能而不可见。

/* pages/like/like.wxss */
select{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5rpx;
}
.btn {
width: 80%;
height: 80%;
margin-top: 20rpx;
background-color: #ffcc66;
color: rgb(255, 255, 255);
border-radius: 98rpx;
}
.input{
justify-content: center;
align-items: center;
font-size: 28rpx;
width: 300rpx;
border-radius: 6rpx;
margin: 0 0 3px 350rpx;
opacity: 0.0;
}
.image{
width: 100%;
height: 30%;
}
.txt{
font-size: 28rpx;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6rpx;
margin: 0 0 3px 35rpx;
}

{
"usingComponents": {
"i-checkbox-group": "../../dist/checkbox-group/index",
"i-checkbox": "../../dist/checkbox/index",
"Select": "../../Componet/Componet",
"i-card": "../../dist/card/index",
"i-toast": "../../dist/toast/index"
}
}

js放上重点部分，这个页面整体的代码量还是挺大的，需要在下拉框选择的内容要放在
data：{
selectArray: [
{ “id”: “T020002”,//这个id没什么用可以不写
“text”: “易经与中国文化” }
]
}
以这个格式使用（光选择部分我就写了600+行代码，手抽筋。。。）

var app = getApp();
const { $Toast } = require('../../dist/base/index');
Page({

getUserInfo:function(e){
var that = this
wx.login({
success: function(res) {
//console.log(app.globalData.url+'onlogin')
// 发送 res.code 到后台换取 openId, sessionKey, unionId
//if (res.code) {

wx.request({
url: app.globalData.url+'onlogin',          //本地调试，是获取不到code的，所以要实现，还是得传服务
data: {
"code": res.code
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data.openid)
var OD=res.data.openid

var userInfo = e.detail.userInfo
console.log(userInfo.nickName)
wx.request({
url: app.globalData.url+'time',
data:{
'userName': e.detail.userInfo.nickName,
"openId":OD
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success:function(res) {
that.setData(
{
flag : res.data
}
)
console.log(res)
},

fail:function(res){
console.log('submit fail');
},
})
}
})
}
})
},
formSubmit(e)
{
var that = this
console.log(this.data.flag);
setTimeout(function () {
if(that.data.flag == false)
{
$Toast({
content: '投票成功！',
type: 'success'
})

wx.request({
url: app.globalData.url+'zan',
data:{
'like1': e.detail.value.like1,
'like2': e.detail.value.like2,
'like3': e.detail.value.like3,
'like4': e.detail.value.like4,
'like5': e.detail.value.like5,
'like6': e.detail.value.like6,
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success:function(res) {
console.log('submit success');
},
fail:function(res){
console.log('submit fail');
},
})
}else{
$Toast({
content: '投票失败！可能是网络问题或24小时内重复投票哦！',
type: 'warning'
})
}

}
, 1750)
}

这个页码应该还有很多可以优化的地方，但是我当时写的真的也非常费劲了，这里实现了自定义组件和主页面之间的通信。

希望微信小程序赶紧推出下拉框组件吧！！！