微信小程序开发之（表单组件的使用）代码篇

一时失言乱红尘 2022-10-10 09:59 171阅读 0赞

### 表单组件 ###

*  1.工程目录
 *  2.详细代码
 *  3.结果展示
 *  4.获取资源

<table> 
 <tbody> 
  <tr> 
   <td><font>这篇文章介绍微信小程序的表单组件的使用</font></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><font>内容包括添加视频播放、轮转图片、多选框</font></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><font>单选框、实时获取输入值、按钮提交输入控件的数据</font></td> 
  </tr> 
 </tbody> 
</table>

![20210531202435276.jpg][]

笔者直接上代码，组件的详细介绍参考微信开发者文档：[点击查看][Link 1]

![20210628153031225.jpg][]

<table> 
 <tbody> 
  <tr> 
   <td><font>嘿嘿！先来看看结果视频</font></td> 
  </tr> 
 </tbody> 
</table>

微信小程序表单组件测试

# 1.工程目录 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center]

# 2.详细代码 #

<table> 
 <tbody> 
  <tr> 
   <td><font>index.js</font></td> 
  </tr> 
 </tbody> 
</table>

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
      //background:image的变量（设置图片的值）
        background: 
        ['https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'],
    
    //滑块视图容器的属性
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 2000,
        duration: 500,
    
    
        items: [
          {
        value: 'USA', name: '美国'},
          {
        value: 'CHN', name: '中国', checked: 'true'},
          {
        value: 'BRA', name: '巴西'},
          {
        value: 'JPN', name: '日本'},
          {
        value: 'ENG', name: '英国'},
          {
        value: 'FRA', name: '法国'}
        ],
        inputValue: '',
        radioItems: [
          {
        name: 'USA', value: '美国'},
          {
        name: 'CHN', value: '中国', checked: 'true'}
        ],
      },
      checkboxChange(e) {
        
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    
        const items = this.data.items
        const values = e.detail.value
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
        
          items[i].checked = false
    
          for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        
            if (items[i].value === values[j]) {
        
              items[i].checked = true
              break
            }
          }
        }
    
        this.setData({
        
          items
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
    
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
        
      },
    
    
      bindKeyInput: function (e) {
        
        this.setData({
        
          inputValue: e.detail.value
        })
      },
      radioChange(e) {
        
        const checked = e.detail.value
        const changed = {
        }
        for (let i = 0; i < this.data.radioItems.length; i++) {
        
          if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
        
            changed['radioItems[' + i + '].checked'] = true
          } else {
        
            changed['radioItems[' + i + '].checked'] = false
          }
        }
        this.setData(changed)
        console.log(changed)
      },
      tapEvent() {
        
        console.log('按钮被点击')
      },
      submit:function(e){
        
        console.log(e)
      }
    
    })

<table> 
 <tbody> 
  <tr> 
   <td><font>index.wxml</font></td> 
  </tr> 
 </tbody> 
</table>

内容包括添加视频播放、轮转图片、多选框、单选框、实时获取输入值、按钮提交输入控件的数据

<view class="container">
    <view>
     <text>hello world </text>
    
    
    
    
     <checkbox-group bindchange="checkboxChange" >
      <label  wx:for="{
        {items}}" wx:key="{
        {item.value}}">
          <view >
              <checkbox value="{
        {item.value}}" checked="{
        {item.checked}}"/>
          </view>
          <view>{
        {
        item.name}}</view>
        </label>
      </checkbox-group>
           </view> 
            
    
    
    
    <view class="item3" >
    
        <form bindsubmit="submit">
          <custom-comp>
             <input name="name" placeholder="请输入名字"></input>
            <switch name="student" />
          </custom-comp>
          <button form-type="submit" size="default" type="primary" >提交</button>
        </form>
    
    </view>
    
    
    
    
    
    <view class="item">
      <view>实时获取输入值：{
        {
        inputValue}}</view>
    
         <input   maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
      </view>
    </view>
    
    
    <view class="item1">
     <text>radio-group</text>
      <radio-group class="group" bindchange="radioChange">
            <view class="label-2" wx:for="{
        {radioItems}}">
              <radio id="{
        {item.name}}" value="{
        {item.name}}" checked="{
        {item.checked}}"></radio>
              <label class="label-2-text" for="{
        {item.name}}"><text>{
        {
        item.name}}</text></label>
            </view>
     </radio-group>
    </view>
    
    
    
    
    <view class="item2">
     <text>swiper   image </text>
          <swiper indicator-dots="{
        {indicatorDots}}" sytle="width:300px"
            autoplay="{
        {autoplay}}" interval="{
        {interval}}" duration="{
        {duration}}">
            <block wx:for="{
        {background}}" wx:key="*this">
              <swiper-item>
          <image src="{
        {item}}" class="slide-image" width="355" height="300"/>
      
              </swiper-item>
            </block>
          </swiper>
        </view>
    
    
    
        <view class="item2">
         <text>video </text>
            <video 
          id="myVideo" 
          src="http://81.71.14.198/vx/testvx.mp4" 
          binderror="videoErrorCallback" 
          danmu-list="{
        {danmuList}}" 
          enable-danmu 
          danmu-btn 
          show-center-play-btn='{
        {false}}' 
          show-play-btn="{
        {true}}" 
          controls
          picture-in-picture-mode="{
        {['push', 'pop']}}"
          bindenterpictureinpicture='bindVideoEnterPictureInPicture'
          bindleavepictureinpicture='bindVideoLeavePictureInPicture'
        ></video>
            </view>

<table> 
 <tbody> 
  <tr> 
   <td><font>index.wxss</font></td> 
  </tr> 
 </tbody> 
</table>

/**index.wxss**/
    
    .container{
        
      height:100%;
      width: 100%;
      background-color:rgb(119, 151, 221);
      display: flex;
      flex-direction: row;
     
     flex-wrap: wrap;/*换行*/
    
      justify-content: space-between;
    
      align-items: center;
    }
    .item{
        
      width:100%;
      height: 100rpx;
      background-color: yellow;
      border:1px solid#fff;
    order: 3;
    }
    
    .item1{
        
      width:100%;
      height: 150rpx;
      background-color: rgb(105, 185, 109);
      border:1px solid#fff;
    order: 3;
    }
    .item2{
        
      height: 300px;
      background-color: rgb(153, 172, 211);
      border:1px solid#fff;
    order: 3;
    }
    
    .item3{
        
      
      background-color: rgb(241, 237, 241);
      border:1px solid#fff;
    order: 3;
    }

# 3.结果展示 #

<table> 
 <tbody> 
  <tr> 
   <td><font>测试展示图</font></td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 3]

<table> 
 <tbody> 
  <tr> 
   <td><font>调试信息，看标记部分</font></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 4]

[在这里插入图片描述][Link 2]

# 4.获取资源 #

资源链接：[资源获取][Link 3]

![20210531193735226.jpg][]

<table> 
 <tbody> 
  <tr> 
   <td><font>【关注微信公众号一起来交流】</font></td> 
  </tr> 
 </tbody> 
</table>

![20210519112915276.jpg][]

[20210531202435276.jpg]: /images/20221005/dceb645d7ae24066b5a545a72fc1bfef.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
[20210628153031225.jpg]: /images/20221005/eaf74d42a4d0468b9594fc28d7c72713.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/0468eeeff4b6436590206c7760041b61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/c99680a9e13943338ec067a713955658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/b1de80d921f34243a10a822b7743f5cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/c4f020667160425d88f3b4d72ec47346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/9eafc562620e4124adf43234fe8da3f7.png
[Link 2]: https://img-blog.csdnimg.cn/20210531202850187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NmOTA5MA==,size_16,color_FFFFFF,t_70#pic_center
[Link 3]: https://download.csdn.net/download/sf9090/19872348
[20210531193735226.jpg]: /images/20221005/16b0b47574fc4bf0880e76d510865ce8.png
[20210519112915276.jpg]: /images/20221005/4d39059dfc9644bda0b86113471a5452.png