微信小程序开发实战——实现表单页面

微信小程序开发实战——实现表单页面

问题背景

本文将介绍如何在微信小程序开发中，实现一般的表单页面。

问题分析

话不多说，先上效果图，主要包括基本的表单item、列表框选择数据、选择本地图片等功能。

问题解决

完整代码如下：
（1）index.wxml文件，代码如下：

<scroll-view class="scroll-view_H" scroll-y="true">
  <view class="outLayer">
    <View class="lineItemFirst">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系人:
        </View>
      </View>

      <input class="inputItem" placeholder="请输入联系人"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系电话:
        </View>
      </View>

      <input class="inputItem" placeholder="请输入联系方式"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          固定电话:
        </View>
      </View>
      <input class="inputItem" placeholder="请输入固定电话"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          服务类型:
        </View>
      </View>
      <picker class="picker" bindchange="pickerChange" range="{{arr}}">
        <view>
          {{arr[index]}}
        </view>
      </picker>
      <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          服务事项:
        </View>
      </View>
      <picker class="picker" bindchange="pickerChange" range="{{arr}}">
        <view>
          {{arr[index]}}
        </view>
      </picker>
      <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          联系人邮箱:
        </View>
      </View>
      <input class="inputItem" placeholder="请输入联系人邮箱"></input>
    </View>

    <View class="colItem">
      <View class="kindInfoQuestion">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          问题简述:
        </View>
      </View>
      <input class="inputItemBig" placeholder="请输入问题详情"></input>
    </View>

    <View class="lineItem">
      <View class="kindInfo">
        <View class="ringItem">
          *
        </View>
        <View class="KindItem">
          选择附件
        </View>
      </View>
      <button class="btnChooseFile" bindtap="onChooseFile">选择图片</button>
    </View>
  </view>

  <View class="fileItem" wx:if="{{hasFile}}">
      <View class="fileKindInfo">
        <View class="fileInfo">
          选择的文件路径:
        </View>
        <View class="fileNameItem">
          {{path}}
        </View>
      </View>
    </View>

  <button class="btnItem" type="primary">确认</button>
</scroll-view>

（2）index.wxss文件，代码如下：

.outLayer{
  margin:10rpx;
  display:flex;
  flex-direction: column;
  background: rgb(153, 149, 149);
  /* border-top: 3rpx solid lightgrey; */
}

.lineItemFirst{
  margin-top:25rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.lineItem{
  margin-top:3rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.kindInfo{
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.fileKindInfo{
  height: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ringItem{
  height: 70rpx;
  color: red;
}

.KindItem{
  height: 70rpx;
  font-size: smaller;
}

.kindInfoQuestion{
  margin-top: 15rpx;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.inputItem{
  height: 70rpx;
  font-size: smaller;
  width: 70%;
  text-align: center;
}

.inputItemBig{
  margin-top: 10rpx;
  font-size: smaller;
}

.picker{
  height: 40rpx;
  font-size: smaller;
  width: 70%;
  text-align: center;
}

.colItem{
  margin-top:30rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.scroll-view_H {
 /*设置display:flex无效*/
 height: 100vh;
 padding-bottom: 150rpx;
}

.selectImg{
  width: 25rpx;
  height: 25rpx;
}

.btnChooseFile{
  height: 70rpx;
  width: 30rpx;
  font-size: x-small;
}

.btnItem{
  margin: 30rpx;
  margin-bottom: 50rpx;
}

.fileItem{
  margin-top:3rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* border-bottom: 1rpx solid lightgrey; */
}

.fileInfo{
  height: 40rpx;
  display: flex;
  width: 30%;
  flex-direction: row;
  justify-content: flex-start;
}

.fileNameItem{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 70rpx;
  font-size: smaller;
}

（3）index.js文件，代码如下：

// pages/pubu/pubu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    publishInfoList: [],
    arr:['体适能','足球','篮球','乒乓球'],
    index:0,
    path:"",
    hasFile: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let f = this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?location=beij&key=d4a619bfe3244190bfa84bb468c14316',
      success(res) {
        if (res.statusCode == 200) {
          var allList = res.data.location
          f.setData({
            publishInfoList: allList
          })
        }
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  submitInfo(e) {
    this.setData({
        formId: e.detail.formId,
      },
      (res) => {})
  },

  pickerChange(value) {
    console.log(value)
    this.setData({
      index:value.detail.value
    })
  },

  /**
   * 选择图片
   */
  onChooseFile() {
    wx.chooseImage({
      success:(resp)=>{
        let imgPath=resp.tempFilePaths;
        console.log(imgPath);
        this.setData({path: imgPath, hasFile: true});
      }
    })
  }
})

问题总结

本文介绍了如何在微信小程序开发中，实现一般的表单页面,包括普通列表项、列表选择框、图片选择器等，有兴趣的同学可以进一步深入研究。