微信小程序学习笔记(2) -- 逻辑层事件、常用组件

约定不等于承诺〃 2023-02-20 13:59 3阅读 0赞

### 文章目录 ###

*  逻辑层
 *   *  逻辑层 事件处理
     *   *  bindtap
         *  冒泡
         *  事件传参
     *  单向逻辑流
     *  登录案例
     *  界面层的条件渲染
     *   *  wx:if
         *  hidden
         *  block
     *  wxss和css的区别
 *  微信ui组件
 *   *  icon组件
     *  text组件
     *  progress 进度条
     *  表单组件
     *   *  button
         *  radio
         *  checkbox
         *  input
 *  操作反馈组件
 *   *  action-sheet
     *  model 模态框
     *  toast
     *  总结
     *   *  组件的基本用法：
         *  组件的分类

# 逻辑层 #

## 逻辑层 事件处理 ##

*  1： 事件的基本使用 bind\[xxx\] catch\[xxx\]
 *  2: 小程序中事件冒泡和HTML中处理起来不一样，这里是使用catch\[xxx\]
 *  3: 如果需要给事件处理函数指定参数 只能通过dataset

下面分别来说明:

### bindtap ###

> 基本的事件使用 就是给组件加一个bind+事件名的属性，属性的值指向一个定义在当前页面对象中的一个function.

<view class="container">
        <button bindtap="buttonTapHandler">点我</button>
    </view>

//index.js
    //获取应用实例
    const app = getApp()
    Page({
      buttonTapHandler:function(e){
        console.log(123);
        //console.dir() 将一个对象以树状的形式打印到控制台
        console.dir(e)
      }
    })

效果:

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

### 冒泡 ###

catch+ 事件名: 是阻止冒泡并绑定事件:

案例:

<view bindtap="outterHandler" style="width:200px;height:200px;background-color:red"> 
         <view catchtap="innerHandler" style="width:100px;height:100px;background-color:blue"> </view>       
    </view>

效果:

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

点击 蓝色小方块，冒泡被阻止了–完美。

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

### 事件传参 ###

如果需要给事件处理函数指定参数 只能通过dataset

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

<button bindtap="tap2Handle" data-name="张三" data-age="13">点我</button>
         <button bindtap="tap2Handle" data-hello-world="张三">点我</button>

tap2Handle:function(e){
        // console.dir(e)
        //dataset指的是元素上所有以data-开头的属性集合
        // console.log(this) //事件处理函数中的this还是页面对象!!!跟html不一样.
        console.log(e.target.dataset)
      }

演示效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200627231123927.png]

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

> 注意: 多个“ - ” 的问题， 会自动转成驼峰的属性。

## 单向逻辑流 ##

小程序没有双向数据绑定。

> this.setData 是用来改变data中的数据  
> 它与直接赋值区别在于setData可以通知界面做出变化  
> 直接赋值没有办法实现这一点（早期的js）

解决是:setData.

案例如下:

<view class="container">
        <input value="{ { message }}" bindinput="inputHandler"/>
        <text>{
       { message }}</text>
    </view>

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
      data:{ 
          demo: '123',
          message: 'initial'
      },
      inputHandler: function(e){ 
          // console.log(123);
          // console.log(e.target);
          // console.log(e);
          // console.log(e.detail.value);
          // this.data.message = e.detail.value;
          // console.log(this.data.message);
          this.setData({ 
            message: e.detail.value
          });
          // this.setData 是用来改变data中的数据
          // 它与直接赋值区别在于setData可以通知界面做出变化
          // 直接赋值没有办法实现这一点（早期的js）
          console.log(this.data.message);
      }
    })

页面  
![在这里插入图片描述][20200627231216555.png]  
打印显示:  
![在这里插入图片描述][20200627231226683.png]

总结:

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

通过这种setData方式，让逻辑层的数据传递到页面层。

页面层的数据传递到逻辑层则是 通过 事件方式。

## 登录案例 ##

<view class="container">
      <view class="userinfo">
       <view>
        <input placeholder="请输入用户名" value="{ { username }}" bindinput="usernameChangeHandler"/>
       </view>
        <view class="padding-b-20">
           <input placeholder="请输入密码" value="{ { password }}" bindinput="passwordChangeHandler" />
        </view>    
        <view>
         <button bindtap="loginHandler">登 录</button>
        </view>
      </view>
    
    </view>

/**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    input{
      border-bottom: 1px solid #CCC;
    }
    .padding-b-20 {
      padding-bottom: 20px;
    }
    button{
      background-color: green;
      color: #FFF;
      font-weight: normal;
    }

//index.js
    /* * 1.设计数据的结构(data属性) 2.将数据绑定到特定的元素上 3.登录按钮的点击事件（具体的登录逻辑） 4. */
    Page({ 
      data: { 
        username: 'admin',
        password: '123'
      },
      usernameChangeHandler: function(e){ 
       // this.data.username = e.detail.value; //不要使用这种方式，因为界面层无法判断
        this.setData({ 
          username: e.detail.value
        });
      },
      passwordChangeHandler: function(e){ 
        // this.data.password = e.detail.value; //不要使用这种方式，因为界面层无法判断
        this.setData({ 
          password: e.detail.value
        });
      },
      //用于处理登录按钮点击事件
      loginHandler: function(){ 
        //TODO :完成逻辑
        //1. 先需要知道用户输入了什么
        console.log(this.data)
        //2. 根据用户输入的值判断
        //3. 根据判断的结果做出响应
      },
    })

演示效果:  
![在这里插入图片描述][20200627231253118.png]

看下控制台，是否接收到页面的数据  
![在这里插入图片描述][20200627231303346.png]

## 界面层的条件渲染 ##

### wx:if ###

当条件为假得时候是不渲染(这个标签不工作)，为真才渲染

### hidden ###

标签仍然会工作，只是不显示在界面上

案例:

<view class="container">
      <view class="item">
        <view class="title" bindtap="toggle">
          <text>切换面板展示</text>
        </view>
        
          <block wx:if="{
       { !show }}">
              
           </block>
            
            <view class="content" wx:if="{
       { !show }}">
                  <text>
                    这里是内容....
                      这里是内容....
                        这里是内容....
                  </text>
              </view> 
              -----
           
           <view class="content" hidden="{
       { !show }}">
            <text>
                    这里是内容....
                      这里是内容....
                        这里是内容....
                  </text>
           </view>
       
      </view>
    
    </view>

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        show: false  
      },
      //事件处理函数
      toggle: function(e){ 
        this.setData({
          show: !this.data.show
        });
      }
    })

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]

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

### block ###

<block wx:if="{
       { !show }}">
              <view class="content">
                  <text>
                    这里是内容....
                      这里是内容....
                        这里是内容....
                  </text>
              </view>
              <view class="content" >
                  <text>
                    这里是内容....
                      这里是内容....
                        这里是内容....
                  </text>
              </view>
           </block>

## wxss和css的区别 ##

1.  rpt的单位，750rpt代表宽度100%
2.  @import引入其他的样式。但是只是加载一次。css会发起多个请求。

# 微信ui组件 #

## icon组件 ##

<view class="container">
    
    
      
      <icon type="success"></icon>
      <icon type="success_no_circle"></icon>
        <icon type="info"></icon>
        <icon type="warn"></icon>
        <icon type="waiting"></icon>
        <icon type="cancel"></icon>
        <icon type="download"></icon>
         <icon type="search"></icon>
          <icon type="clear"></icon>
          
          <icon type="success" size="60"></icon>
          
           <icon type="info" size="60" color="red"></icon>
    </view>

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

## text组件 ##

<text>这是一段<text>文本</text>标签</text>
    这是一段没有被text包裹的文本

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

## progress 进度条 ##

<progress percent="20" show-info="true" stroke-width="10" />
      
       <progress percent="30" show-info="true" active="true"/>

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

## 表单组件 ##

### button ###

<view class="container">
    
    <button type="default">这是一个按钮</button>
    
    <button type="warn" size="mini">这是一个按钮</button>
    
    <button type="primary" plain>这是一个按钮</button>
    
    <button type="warn" loading>这是一个按钮</button>
    
    <button type="warn" form-type="submit">这是一个按钮</button>
    
    <button hover-class="btn-active">hover class</button>
    </view>

/**index.wxss**/
    .btn-active{ 
      background-color: red;
    }

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

### radio ###

<radio-group bindchange="bindchangeHandle">
        <radio value="male" color="red">
            男
        </radio>   
          <radio value="female" >
            女
        </radio>      
    </radio-group>
    <view>您选中的是： {
       {gender}}</view>

/** * 页面的初始数据 */
      data: { 
        gender:""
    
      },
      bindchangeHandle: function(e) { 
        console.log(e);
        console.log( e.detail.value);
        let gender =  e.detail.value
        this.setData({ 
          gender
        });
      },

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

### checkbox ###

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
      data: { 
        items: [
          { value: 'USA', name: '美国'},
          { value: 'CHN', name: '中国', checked: 'true'},
          { value: 'BRA', name: '巴西'},
          { value: 'JPN', name: '日本'},
          { value: 'ENG', name: '英国'},
          { value: 'FRA', name: '法国'}
        ]
      },
      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
        })
      }
    })

<view class="container">
    
    <checkbox-group bindchange="checkboxChange">
      <label class="checkbox" wx:for="{ {items}}">
        <checkbox value="{ {item.value}}" checked="{ {item.checked}}"/>{
       {item.name}}
      </label>
    </checkbox-group>
    
    </view>

效果:

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

### input ###

<view class="container">
        <input class="input1" placeholder-class="input-placeholder" placeholder="请输入"/>
    </view>

.input1{
      border: 1px solid #c0c0c0;
    }
    .input-placeholder {
      color: red;
    }

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

# 操作反馈组件 #

## action-sheet ##

[https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html][https_developers.weixin.qq.com_miniprogram_dev_api_ui_interaction_wx.showActionSheet.html]

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
        data: { 
    
        },
        btnToDo: function(){ 
          //当点击按钮触发
          // console.log(111)
          //交互操作组件必须通过调用API的方式使用
          // https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html
          wx.showActionSheet({ 
            //显示出来的项目列表
            itemList: ['java', '大数据', '小程序','APP'],
            //点击其中任一项的回调
            success (res) { 
              //res.cancel 指的是否点击取消
              if(!res.cancel){ 
                console.log(res.tapIndex)
              }         
            },
            fail (res) { 
              console.log(res.errMsg)
            }
          })      
        }
    })

效果:

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

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

## model 模态框 ##

wx.showModal({
            title: '提示',
            content: '这是一个模态弹窗',
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })

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

## toast ##

wx.showToast({ 
            title: '成功',
            icon: 'success',
            duration: 2000
          })

点击

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

wx.showToast({
            title: '加载中',
            // icon: 'success',
            icon: 'loading',
            duration: 2000
          })

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

## 总结 ##

### 组件的基本用法： ###

*  语法问题:
    
    组件的使用类似于html的方式（有不同），组件使用的严格的XML标准(开闭标签问题)

### 组件的分类 ###

*  功能性的组件
    
     *  完成具体功能的
 *  布局类型的组件
    
     *  用来完成页面结构的(DIV)
 *  API类型(使用的角度)
    
     *  wx.showModel
     *  wx.showActionSheet
     *  wx.showToast

--------------------

完

[20200627231006853.png]: https://img-blog.csdnimg.cn/20200627231006853.png
[20200627231032477.png]: https://img-blog.csdnimg.cn/20200627231032477.png
[20200627231041460.png]: https://img-blog.csdnimg.cn/20200627231041460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627231053441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627231109313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627231123927.png]: https://img-blog.csdnimg.cn/20200627231123927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627231139994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627231146405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627231216555.png]: https://img-blog.csdnimg.cn/20200627231216555.png
[20200627231226683.png]: https://img-blog.csdnimg.cn/20200627231226683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627231236653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627231253118.png]: https://img-blog.csdnimg.cn/20200627231253118.png
[20200627231303346.png]: https://img-blog.csdnimg.cn/20200627231303346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200627231319685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627231329657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627231346345.png]: https://img-blog.csdnimg.cn/20200627231346345.png
[20200627231353698.png]: https://img-blog.csdnimg.cn/20200627231353698.png
[20200627231402319.png]: https://img-blog.csdnimg.cn/20200627231402319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200627231419299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200702190757214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200702192329514.png]: https://img-blog.csdnimg.cn/20200702192329514.png
[202007021923395.png]: https://img-blog.csdnimg.cn/202007021923395.png
[20200627231440470.png]: https://img-blog.csdnimg.cn/20200627231440470.png
[20200627231447875.png]: https://img-blog.csdnimg.cn/20200627231447875.png
[20200627231457426.png]: https://img-blog.csdnimg.cn/20200627231457426.png
[https_developers.weixin.qq.com_miniprogram_dev_api_ui_interaction_wx.showActionSheet.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200627231521416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200627231533850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200627231543874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200627231554150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200627231602592.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70