微信小程序（组件--表单：交互控件）

谁践踏了优雅 2023-06-19 09:54 56阅读 0赞

【本节大纲】  
（1）input输入框组件  
（2）textarea多行输入框组件  
（3）form表单组件  
（4）radio-group单选选择器与radio单选项目  
（5）label关联组件  
（6）checkbox-group多选选择器与checkbox多选项目

# 表单组件 #

### （1）input输入框组件 ###

**基础属性**：

##### 1、type类型—type属性值 #####

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文本输入键盘</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字输入键盘</td> 
  </tr> 
  <tr> 
   <td>idcard</td> 
   <td>身份证输入键盘</td> 
  </tr> 
  <tr> 
   <td>digit</td> 
   <td>带小数点的数字键盘</td> 
  </tr> 
 </tbody> 
</table>

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

##### 2、占位符placeholder属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>placeholder-style</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>指定 placeholder 的内联样式</td> 
  </tr> 
  <tr> 
   <td>placeholder-class</td> 
   <td>string</td> 
   <td>input-placeholder</td> 
   <td>否</td> 
   <td>指定 placeholder 的样式类名</td> 
  </tr> 
 </tbody> 
</table>

> 注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。  
> 方案：给input设置字体大小即可

.placeClassName{ 
      color: blue;
    }

##### 3、焦点类属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>获取焦点，加上后会自动聚焦</td> 
  </tr> 
  <tr> 
   <td>bindfocus</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度</td> 
  </tr> 
  <tr> 
   <td>bindblur</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>输入框失去焦点时触发，event.detail = {value: value}</td> 
  </tr> 
 </tbody> 
</table>

**bindfocus**：

/**获取授权页面相关数据 */
      bindopensettingFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191205194358191.png]  
**bindblur**：

/**输入框失去焦点时触发 */
      bindblurFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191205194926929.png]

##### 4、键盘与键盘按钮 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>confirm-type</td> 
   <td>string</td> 
   <td>done</td> 
   <td>否</td> 
   <td>设置键盘右下角按钮的文字，仅在type='text’时生效</td> 
  </tr> 
  <tr> 
   <td>cursor-spacing</td> 
   <td>number</td> 
   <td>0</td> 
   <td>否</td> 
   <td>聚焦时光标离软键盘的距离(了解即可)</td> 
  </tr> 
  <tr> 
   <td>bindconfirm</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>点击完成按钮时触发，event.detail = {value: value}</td> 
  </tr> 
 </tbody> 
</table>

**confirm-type属性值**：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>send</td> 
   <td>右下角按钮为“发送”</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>右下角按钮为“搜索”</td> 
  </tr> 
  <tr> 
   <td>next</td> 
   <td>右下角按钮为“下一个”</td> 
  </tr> 
  <tr> 
   <td>go</td> 
   <td>右下角按钮为“前往”</td> 
  </tr> 
  <tr> 
   <td>done</td> 
   <td>右下角按钮为“完成”</td> 
  </tr> 
 </tbody> 
</table>

一般需要开发人员根据业务的情景选择合适的confirm-type  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

> **注意**：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。

**场景**：当填写项较多时，可能超出当前屏幕，此时需要对弹起的软键盘做些处理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

<table> 
 <thead> 
  <tr> 
   <th>cursor-spacing</th> 
   <th>number</th> 
   <th>0</th> 
   <th>否</th> 
   <th>聚焦时光标离软键盘的距离</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>bindconfirm</th> 
   <th>function</th> 
   <th>无</th> 
   <th>否</th> 
   <th>点击完成按钮时触发，event.detail = {value: value}</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

/**点击完成按钮时触发 */
      bindconfirmSearch(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191209151353468.png]

##### input输入框现有bug： #####

1.  部分微信版本placeholder 在聚焦时出现重影问题
2.  部分机型 focus 属性设置无效
3.  input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family

### （2）textarea多行输入框组件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>输入框的内容</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>输入框为空时占位符</td> 
  </tr> 
  <tr> 
   <td>placeholder-style</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>指定 placeholder 的内联样式，目前仅支持color和font-weight，不支持font-size、background等属性</td> 
  </tr> 
  <tr> 
   <td>placeholder-class</td> 
   <td>string</td> 
   <td>textarea-placeholder</td> 
   <td>否</td> 
   <td>指定 placeholder 的样式类名</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>number</td> 
   <td>140</td> 
   <td>否</td> 
   <td>最大输入长度，设置为 -1 的时候不限制最大长度</td> 
  </tr> 
  <tr> 
   <td>auto-focus</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>自动聚焦，拉起键盘</td> 
  </tr> 
  <tr> 
   <td>auto-height</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否自动增高，设置auto-height时，style.height不生效</td> 
  </tr> 
  <tr> 
   <td>bindinput</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}</td> 
  </tr> 
  <tr> 
   <td>bindconfirm</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>点击完成按钮时触发，event.detail = {value: value}</td> 
  </tr> 
 </tbody> 
</table>

**应用场景**：发表评论或发布帖子，点击按钮跳到评论页面

/**评论 */
      commentPage(){ 
        wx.navigateTo({ 
          url: 'comment/comment',
        })
      },

![在这里插入图片描述][20191209162551927.png]  
发布评论页面代码块

.commentArea{ 
      width: 100%;
      height: 300rpx;
      padding: 20rpx 5%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .commentArea textarea{ 
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 3;
      padding: 10rpx;
      box-sizing: border-box;
    }
    .commentArea textarea::after{ 
      content: "";
      width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid rgba(0, 0, 0, 0.2);
      transform: scale(0.5);
      transform-origin: 0 0;/**元素缩放基点 */
      z-index: 2;
    }
    .commentArea button{ 
      display: inline-block;
      font-size: 30rpx;
      margin: 20rpx 0;
      line-height: 50rpx;
      color: #fff;
    }

<table> 
 <thead> 
  <tr> 
   <th>bindinput</th> 
   <th>function</th> 
   <th>无</th> 
   <th>否</th> 
   <th>当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

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

/**当键盘输入时，触发 input 事件 */
      textareaInputFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191209164726454.png]

![在这里插入图片描述][20191209164137544.png]  
![在这里插入图片描述][20191209164847359.png]

### （3）form表单组件 ###

作用：将组件内的用户输入的switch input checkbox slider radio picker 提交

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bindsubmit</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>触发 submit 事件，提交表单数据 event.detail = {value : {‘name’: ‘value’} , formId: ‘’}</td> 
  </tr> 
  <tr> 
   <td>bindreset</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>表单重置时会触发 reset 事件</td> 
  </tr> 
 </tbody> 
</table>

> 注意：当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

###### 回顾下button按钮组件 ######

form-type触发表单提交/重置操作

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>form-type</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>用于 form 组件，点击分别会触发 form 组件的 submit提交/reset重置 事件</td> 
  </tr> 
 </tbody> 
</table>

form-type 属性值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>submit</td> 
   <td>提交表单</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置表单</td> 
  </tr> 
 </tbody> 
</table>

##### form表单组件–提交评论操作 #####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5][]

/**提交表单 */
      bindsubmitFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191209170428158.png]

> 注意：  
> 提交表单时，必要在需要提交信息的表单组件上，加上 name 来作为 key，否则会获取不到相关信息

接下来做些完善，评论完毕后弹框提示，然后返回上一页面

*  完善一

/**提交表单 */
      bindsubmitFn(option){ 
        wx.showToast({ 
          title: '评论成功',
          duration: 3000,
          success(){ 
            setTimeout(function(){ 
              wx.navigateBack({ 
                dalta:1
              })
            },1000)
          }
        })
      },

接下来接着做完善，提交时验证最少10个字，否则弹框提示

*  完善二

/**提交表单 */
      bindsubmitFn(option){ 
        if(option.detail.value.textarea.lenght < 10){ 
          wx.showToast({ 
            icon: 'none',
            title: '最少10个字'
          })
        }else{ 
          wx.showToast({ 
            title: '评论成功',
            duration: 3000,
            success() { 
              setTimeout(function () { 
                wx.navigateBack({ 
                  dalta: 1
                })
              }, 1000)
            }
          })
        }
      },

接下来接着做完善，输入字体时，实时监听目前输入多少字

*  完善三  
    ①实时获取输入时字体数量  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]

/**动态监听字数 */
      textareaInputFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191209171246700.png]  
②接下来接着做完善，输入字体时，实时监听目前输入多少字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]

.fontCountClass{ 
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 30rpx;
      color: #b1aeae;
    }

data: { 
        fontCount:0
      },
    /**动态监听字数 */
      textareaInputFn(option){ 
        console.log(option.detail.cursor)
        this.setData({ 
          fontCount:option.detail.cursor
        })
      },

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

##### form表单组件–取消评论操作 #####

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

/**重置取消，返回上一页 */
      bindresetFn(option){ 
        wx.navigateBack({ 
          delta: 1
        })
      },

##### form表单组件–提交评论操作 #####

radio-group单选选择器与radio单选项目

*  ①radio-group单项选择器，内部由多个 radio 组成

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bindchange</td> 
   <td>function</td> 
   <td>无</td> 
   <td>否</td> 
   <td>checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}</td> 
  </tr> 
 </tbody> 
</table>

*  ②radio单选项目

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>当前是否选中</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td>#09BB07</td> 
   <td>否</td> 
   <td>radio的颜色，同css的color</td> 
  </tr> 
 </tbody> 
</table>

radio-group单选选择器与radio单选项目

性别：<radio-group>
      <radio name="man" checked="true">男</radio>
      <radio name="woman">女</radio>
      <radio name="no" disabled="true">中性</radio>
    </radio-group>

![在这里插入图片描述][20191209190327346.png]  
有时单选项目过多时，需要用到循环指令wx:for

爱好：<radio-group>
      <label wx:for="{ {likeList}}" wx:key="index">
        { { item.value}}
        <radio value="{ {item.name}}" checked="{ {item.checked}}"></radio>
      </label>
    </radio-group>

likeList:[
          {  name: 'swim', value: '游泳' },
          {  name: 'climd', value: '爬山',checked:'true' },
          {  name: 'fitness', value: '健身' },
          {  name: 'sing', value: '唱歌' },
        ]

![在这里插入图片描述][2019120919083780.png]

<table> 
 <thead> 
  <tr> 
   <th>bindchange</th> 
   <th>function</th> 
   <th>无</th> 
   <th>否</th> 
   <th>checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

![在这里插入图片描述][20191209191059585.png]

/**单选按钮更改时触发 */
      radioChangeFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][20191209191257119.png]  
![在这里插入图片描述][20191209191349644.png]

##### form表单组件–关联组件label #####

*  label组件用来改进表单组件的可用性
 *  **作用**：使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
 *  目前可以绑定的控件有：button, checkbox, radio, switch

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>绑定控件的 id</td> 
  </tr> 
 </tbody> 
</table>

国籍：<radio-group class="countryClass">
      <label wx:for="{ {countryList}}" wx:key="index">
        <radio value="{ {item.name}}" checked="{ {item.checked}}"></radio>
        { { item.value}}
      </label>
    </radio-group>

.countryClass label{ 
      display: block;
    }

countryList:[
          {  name: 'zg', value: '中国' },
          {  name: 'mg', value: '美国',checked:true },
          {  name: 'jnd', value: '加拿大' },
          {  name: 'rb', value: '日本' },
        ]

![在这里插入图片描述][20191209192513132.png]

##### form表单组件–多选组件 #####

checkbox-group多选选择器与checkbox多选项目

1.  checkbox-group多选选择器

1.  checkbox多选项目

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否</td> 
   <td>checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>当前是否选中，可用来设置默认选中</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td>#09BB07</td> 
   <td>否</td> 
   <td>checkbox的颜色，同css的color</td> 
  </tr> 
 </tbody> 
</table>

<checkbox-group bindchange="likeChangeFn">
      <label wx:for="{ {likeList}}" wx:key="index">
        <checkbox value="{ {item.name}}" checked="{ {item.checked}}"></checkbox>
        { { item.value}}
      </label>
    </checkbox-group>

![在这里插入图片描述][20191209193256687.png]  
![在这里插入图片描述][20191209193335720.png]

/**单选按钮更改时触发 */
      radioChangeFn(option){ 
        console.log(option)
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205193138310.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191205194358191.png]: https://img-blog.csdnimg.cn/20191205194358191.png
[20191205194926929.png]: https://img-blog.csdnimg.cn/20191205194926929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205195535916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191209144642227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191209150307366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191209151353468.png]: https://img-blog.csdnimg.cn/20191209151353468.png
[20191209162551927.png]: https://img-blog.csdnimg.cn/20191209162551927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191209163105430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191209164726454.png]: https://img-blog.csdnimg.cn/20191209164726454.png
[20191209164137544.png]: https://img-blog.csdnimg.cn/20191209164137544.png
[20191209164847359.png]: https://img-blog.csdnimg.cn/20191209164847359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2019120917043412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191209170428158.png]: https://img-blog.csdnimg.cn/20191209170428158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191209171043217.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191209171246700.png]: https://img-blog.csdnimg.cn/20191209171246700.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191209172154623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191209172455911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191209185209953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191209190327346.png]: https://img-blog.csdnimg.cn/20191209190327346.png
[2019120919083780.png]: https://img-blog.csdnimg.cn/2019120919083780.png
[20191209191059585.png]: https://img-blog.csdnimg.cn/20191209191059585.png
[20191209191257119.png]: https://img-blog.csdnimg.cn/20191209191257119.png
[20191209191349644.png]: https://img-blog.csdnimg.cn/20191209191349644.png
[20191209192513132.png]: https://img-blog.csdnimg.cn/20191209192513132.png
[20191209193256687.png]: https://img-blog.csdnimg.cn/20191209193256687.png
[20191209193335720.png]: https://img-blog.csdnimg.cn/20191209193335720.png